Para que serve o @Input() no Angular

Postado em por Wolmir Cezer Garbin em Angular | 138 Visualizações
Última atualização em:

Neste post vou mostrar como é utilizado o @Input() em atributos de um componente no Angular

Todo mundo tem algo para vender, AnuncieOn.com o melhor site de anúncios grátis de todo o Brasil. ABRIR

O Angular, em qualquer versão, trabalha com componentes, o que na minha opinião é uma coisa ótima por permitir reaproveitamento de código.

Até aí tudo bem, trabalhar com componentes é uma coisa ótima, mas surgem outras questões, como, a comunicação entre os componentes.

Pode ser que um evento de clique precise repercutir em outro componente, ou no componente pai (que será tratado em outro post), ou apenas passar para o componente filho um determinado valor, para que ele trate da melhor maneira a apresentação, que é o caso do uso do @Input() do Angular.



Como funciona o @Input() no Angular

Vamos a um exemplo prático para entender melhor esta interação entre os componentes do Angular.

Criando o componente filho, veja:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-child',
  template: `
    <h1>{{label}}</h1>
    <p>Este é um componente padrão que pode ser utilizado por outros componente para adicionar o título em uma página.</p>
  `
})
export class TituloChildComponent {
  label: string;
}

Note que o nosso objetivo é tornar o título (atributo label) dinâmico, permitindo alterar o texto para cada componente pai o que utilizar.

Para isso precisamos modificar melhorar o componente adicionando @Input() antes do atributo label. Veja como fica:

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'app-child',
  template: `
    <h1>{{label}}</h1>
    <p>Este é um componente padrão que pode ser utilizado por outros componente para adicionar o título em uma página.</p>
  `
})
export class TituloChildComponent {
  @Input() label: string;
}

Note que importamos o Input do @angular/core, da mesma forma que o Component e adicionamos @Input() antes do label.

Com isso podemos chamar de qualquer componente pai o nosso componente passando o texto que será exibido entre as tags <h1> da seguinte forma:

<app-child label="Meu título"></app-child>

Ou ainda pode utilizar da seguinte forma para passar atributos do componente pai:

<app-child [label]="atrComponentPai"></app-child>

Lembrando que para que tudo funcione corretamente é preciso criar os módulos, importar o módulo do componente filho no componente pai e aí será possível utilizar o componente filho da forma mostrada, mas isso cabe a outro tutorial.

Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.


Wolmir Cezer Garbin

Wolmir Cezer Garbin


Sou formado em Desenvolvimento de Sistemas para Internet pela faculdade Mater Dei e Pós graduado em Desenvolvimento de sistemas em Java pela UTFPR. Trabalho a mais de 9 anos com desenvolvimento em Java, Android e Web utilizando as principais tecnologias do mercado. Atuo como professor na faculdade Mater Dei, programador na Garbo Software e criador do Receitas de Código.

Ver mais

FIQUE POR DENTRO

Receba as novidades todo mês em seu e-mail!

Apoiadores


Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar