NgModule - Declarations

Declarations é um conjunto de elementos visuais do módulo, em outras palavras são elementos que serão utilizados nos templates do módulo. Esses elementos estão divididos em 3 tipos: Components, Directives e Pipes. Cada um dos tipos tem as suas características específica e a utilização deles da forma correta tornará o teu código mais manutenível.

Os elementos em declarations tem uma característica em comum, por serem elementos visuais em uma aplicação Angular, não podem ter lógica de negócio dentro delas (acesso à API's, cálculos complexos...).

Component

O Component é o elemento básico na construção visual de uma aplicação Angular. Com ele é possível dividir uma página em blocos e sub-blocos, eliminando a repetição de código html.

Essa esplicação não ajudou? Então pense no Component como sendo básicamente um conjunto de tags html com valores dinâmicos, se no teu projeto algum Component se tornar muito mais do que isso, ele precisa ser refatorado.

Então um componente não pode ter nenhuma lógica de negócios nela? Com regra geral não, a função de um componente é:

• Dividir o html da aplicação em blocos menores, facilitando assim a leitura e a manutenção;
• Isolar os estilos do css por blocos, permitindo assim a reutilização do nome das classes e evitando assim que um estilo interfira em outro;
• Interceptar os eventos das tags do html, repassando-os para os serviços;
• Atualizar os valores das tags e dos seus atributos.

Exemplo de um Component

//table-pessoa.component.ts

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

@Component({
selector: 'app-table-pessoa',
templateUrl: './table-pessoa.component.html',
styleUrls: ['./table-pessoa.component.css']
})
export class TablePessoaComponent {

}

Esse component tem os itens básicos de um componente Angular, que são:

selector: Nome da tag que será criada pelo Angular e que será usada nos demais arquivos htmls do projeto;

templateUrl: O bloco de código html que esse componente encapsula, pode ser substituido pela propriedade "template: string", mas o recomendado é que seja um arquivo;

styleUrls: CSS que irá estilizar o html desse componente;

class: Aqui ficam as funções que serão chamadas pelo html, as propriedades com os valores dinâmicos que serão repassados para o html...

Directive

A Directive são as responsáveis pela manipulação do DOM, ou seja, enquanto os Components são os tijolos que o Angular usa para contruir a interface, as Directives são as ferramentas que o Angular usa para colocar/tirar esses tijolos e até alterar o comportamento padrão dos elementos do DOM.

Um exemplo claro disso são as directivas nativas do Angular:

*ngIf: coloca ou tira elementos no DOM;

*ngFor: coloca ou tira vários elementos no DOM;

ngStyle: altera a aparência de um elemto do DOM;

ngClass: adiciona ou retira uma classe em um elemento do DOM;

...

Então sempre que precisar você precisar manipular o DOM em seu projeto, você deve usar uma directiva e nunca fazer isso diretamente no componente.

Pipe

O Pipe é um manipulador de valores, que não altera o valor original, como assim?

Você precisa colocar uma mascara em um input, você usa um Pipe para criar e manipular a mascara;

Você precisa que o número em uma SPAN tenha o simbolo de percentagem ou do Real, você usa um Pipe;