Uma das bases do Angular são os componentes. E o que é um componente?
ele nos permite vincular um modelo estilizado com alguma lógica em Typescript
A tag <app-root> fica no arquivo app.component.ts
{{ }} -> interpolação
O objetivo de o Angular ser estruturado por componentes, é o fato de podermos facilmente identificar onde fica a lógica e onde fica a view e estilizações do componente, pois são separados.
O component é responsável por recuperar os dados e disponibilizá-los para a view
a view serve para acessarmos as informações disponibilizadas no componente.
Recursos núcleo do Angular:
- Capacidade de definir nossos próprios elementos HTML personalizados e chamá-los onde desejamos usar, nos permitindo estender a funcionalidade do navegador com a nossa própria funcionalidade;
- Capacidade de criar nosso programa de um jeito que os dados disponíveis no componente e nossa exibição (HTML), sejam completamente separados;
para passarmos informação de um componente para um elemento html, exemplo input, usamos a propriedade value do input entre colchetes, pois dessa forma, esse value deixa de receber apenas uma string, fazendo com que possa ser passado um objeto vindo do componente, virando assim uma expressão.
[] => passar informações do component para a view (esse colchetes é uma sintaxe especial do Angular);
() => através de um evento que ocorre na view, dispara uma ação no componente. ex: (click)
VIEW => manipula propriedades de entrada e eventos nativos do navegador, além de ser possível definir uma referência (nome) a um determinado elemento que poderá ser replicado usando essa referência em outros pontos dentro dessa mesma view. ex: #titleInput
O angular fica esperando alguma atualização na view para assim chamar o componente e automaticamente retornar o valor atualizado.
Sincronização entre o modelo do nosso aplicativo com a nossa view - Núcleo do Angular
A vantagem dessa maneira de trabalhar é a sua segurança, pois o Angular o por si só impede ataques maliciosos que podem tentar ser executados diretamente no html.
RESUMINDO:
- Podemos definir nossas próprias tags HTML personalizadas e ampliar as funcionalidades padrão do navegador;
- Temos uma maneira clara de separar nossos dados (Model) da visualização (View);
- Temos um mecanismo desse componente que coordena a interação Model <-> View;
- O componente já tem um mecanismo integrado de detecção de alterações que sincroniza de maneira transparente os dados com a view (não precisamos fazer nenhum tipo de sincronização manual);
- Essa atualização dos dados com a view são feitos de maneira segura;
