Angular 5 - Intermediário

Input e Output


As vezes, precisamos que algum componente interaja com outro, para isto existem as diretivas @Input() e @Output..


@Input() é utilizado quando um componente pai passa dados para o filho, no caso, o componente filho declara esta variável do tipo @Input() e o componente pai passa os dados via template binding


@Output é utilizado quando o componente filho precisa se comunicar com o pai, no caso, o componente filho cria um Evento de um tipo qualquer, e o componente pai se subscreve a este evendo, evocando uma funcion quando o evento for disparado.


Acima temos o componente pai, que está passando um dado para o componente filho via [], e está se subscrevendo a function output do filho.

Acima temos o componente filho, expondo a variável do tipo Input e o evento Output, o próprio componente filho decide quando o evento output deve ser disparado, pois ele que se comunica com o pai.


Services


O Angular possui componentes simples de TS chamados de service, o intuito desses componentes é
interagir com servidores para obter dados ou comunicar-se com outros sistemas..

Um service deve ser "Injetado" no construtor do componente onde deseja-se utilizar. O que isso quer dizer?
É simples, o Angular trabalha com injeção de dependência, em outras palavras, você nunca precisa instanciar um componente,
O angular cuida de criar a instância do componente a medida que ele é necessário, eliminando o uso de instancias descessárias
e otimizando a memória e performance da aplicação.

A seguir, temos um simples exemplo no qual foi consumido dados da Api Swapi para pegar
dados dos filmes do Star Wars através de uma service e utilziar um simples *ngFor para mostrar esses dados na tela ;)




Rotemento

Roteamento é a técnica utilizada para linkar uma URL ao carregamento de um componente específico
Como o Angular é um SPA e a aplicação carrega apenas uma vez e fica toda na memória, o angular precisa
"Emular" essa troca de página, então através do roteamento, é possível alcançar o efeito de que
quando o usuário acesse determinada rota, certo componente seja carregado, dando uma sensação de navegação.


Para isso, basta que criemos e configuremos um arquivo app.routes.ts na raiz da aplicação, onde determinaremos todas
as rotas possíveis e quais rotas carregaram quais componentes, e importar essa variável na sessão imports do nosso app.module.ts.




Parabéns!

Você concluiu a parte intermediária do curso, em breve publicarei tópicos avançados! Fique de olho e obrigado pelo apoio.