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;

Próximo

Anterior

Primeiros passos no Angular

Descrição