Criando eventBinding com exportAs

Estava criando um componente angular e pensei "Será que é possível pegar um método ou retorno de função sem precisar emitir um evento em si?".

Foi onde achei uma propriedade do angular que é o exportAs.

O exportAs basicamente exporta seu componente com todas as variáveis e métodos públicos.

Começando com o básico vamos criar um projeto Angular simples rodando o comando

ng new nameProject

Para este caso vou escolher as opções básicas do CLI.

para rodar o projeto execute o comando

ng serve

E ele irá rodar na porta https://localhost:4200

Feito isso, vamos criar nosso componente onde vamos exportar ele para o "pai".

Para criar um novo componente você pode criar na "mão" ou rodar o comando ng g c nameComponent ou ng generate component nameComponent ambos criam um novo component.

Quando inicia um novo componente vamos criar um método qualquer aqui que retorno uma informação. Vamos fazer o exemplo do Output primeiro para demonstrar a diferença de ambos.

O app.component.html ficaria dessa forma

<div class="content">
  <div style="display: flex">
    <app-user #exportUser="user"></app-user>

    <button (click)="exportUser.hideUser()">Hide User</button>
  </div>

  <div *ngIf="exportUser.user">
    <p>User:</p>
    <p>{{ exportUser.user.name }}</p>
    <p>{{ exportUser.user.age }}</p>
  </div>
</div>

No exemplo acima, estou importando o component app-user no html e criando uma variável nele chamada exportUser , o nome desta variável você quem escolhe e não precisa ter o nome “export” nela, usei apenas como exemplo.

Feito isso eu posso pegar os valores de variáveis e métodos publicos dentro do meu componente e poder fazer todas as interações com ele.

O user.component.ts fica dessa forma

import { Component } from '@angular/core';

interface User {
  name: string;
  age: number;
}

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
  exportAs: 'user',
})
export class UserComponent {
  user: User | undefined;

  clickedButton = '';

  showTextClickedButton = false;

  showUser() {
    this.user = {
      name: 'Joao',
      age: 18,
    };
  }

  hideUser() {
    this.user = undefined;
  }
}

O “Pulo do Gato” está em colocar o exportAs no decorator, exportAs: 'user' , o nome da variável que utilizei para atribuir ao exportAs é a qual voce vai usar dentro do app.component.html então o nome delas precisam ser iguais. Você também pode escolher o nome da variável que achar mais viável para o seu component.

Essa é uma forma que podemos trabalhar com eventos, além do Output e pegar o retorno de alguma variável específica, podendo facilitar assim para algo que precise.

Comments

[Wellington Domiciano]

Oi, João \o

Com base no seu texto eu fui pesquisar mais um pouco e percebi algumas coisas.

No seu exemplo o exportAs é desnecessário, pois mesmo sem ele o Angular já entende que o tipo de exportUser é UserComponent e vc já consegue acessar propriedades e métodos públicos por padrão.

Ou seja:

<!-- Isto: -->
<app-user #exportUser="user"></app-user>

<!-- é equivalente a isto: -->
<app-user #exportUser></app-user>

O exportAs brilha em cenários em que vc precisa que o tipo da template variable seja diferente do tipo do componente em que ela está sendo usada.

Por exemplo, imagina que vc tem esta diretiva:

import { Directive, HostBinding } from "@angular/core";

@Directive({
  selector: "[appHighlight]",
  exportAs: "appHighlight",
})
export class HighlightDirective {
  @HostBinding("style.color") private color = "";

  toggleHighlight(): void {
    this.color = this.color === "" ? "yellow" : "";
  }
}

E este template:

<app-user appHighlight #exportUser></app-user>
<button (click)="exportUser.toggleHighlight()">Highlight</button>

O código acima vai dar erro, pois o Angular entende que exportUser é do tipo UserComponent.

Para corrigir, basta fazermos isso:

<app-user appHighlight #exportUser="appHighlight"></app-user>
<button (click)="exportUser.toggleHighlight()">Highlight</button>

O mesmo vale para elementos comuns:

<div appHighlight #myDiv>Hello</div>
<button (click)="myDiv.toggleHighlight()">Highlight</button>

O tipo de myDiv é HTMLDivElement e por isso vai dar erro. Para corrigir:

<div appHighlight #myDiv="appHighlight">Hello</div>
<button (click)="myDiv.toggleHighlight()">Highlight</button>

[João Paulo Ávila]

Ótimo ponto, obrigado!!! =D =D