Criando eventBinding com exportAs
Tags: angular, typescript, javascript, programming
Published: 2022-01-20 22:37:48

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.


![Criando novo projeto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bjmkda6axkrjwx9gdog.png)

para rodar o projeto execute o comando

`ng serve`

E ele irá rodar na porta [`https://localhost:4200`](https://localhost:4200/)


![Página principal do angular](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4nwwanfbvg3utg6tmwe.jpeg)

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.



![Criação de um novo component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pea2h3yr4r4um0zc6hnn.png)

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

```html
<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

```typescript
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.