Aglutinação de dados em Angular é um tópico importante quando se trata de passar dados entre componentes para o DOM. Neste artigo, vou discutir a ligação de dados unidirecionais e bidirecionais.
Este é um método unidirecional de ligação de dados. Se usarmos a ligação de dados unidirecional, só podemos ligar dados do componente para ver ou da vista para o componente. Há muitas maneiras diferentes de usar a ligação de dados unidirecionais em nossa aplicação angular.
- Interpolation Binding
Interpolation é um método muito comum que usamos para ligar dados em Angular e isso se refere a valores de ligação em elementos de IU.
Como mostrado no exemplo, podemos usar a variável binded em elementos HTML adicionando colchetes como {{Nome}}. Este método é usado principalmente quando precisamos concatenar dois valores, por exemplo: {{{PrimeiroNome}}}. {{{{Last Name}}.
2. Binding de propriedades.
Esta é outra abordagem amplamente utilizada para vincular dados e com este método, podemos vincular valores de componentes para as propriedades DOM dos elementos HTML.
Se usarmos o botão Interpolação em tais situações será sempre desabilitado negligenciando o valor da variável.
3. Attribute Binding
Attribute binding é usado para bindar uma propriedade de atributo de um elemento de visualização. Vamos pegar um cenário em que precisamos fundir algumas colunas em uma tabela usando um atributo colspan.
Se usarmos uma variável de valor como mostrado no comentário ou como uma propriedade bind, isso resultará em um erro. Então precisamos usar um Attribute bonding com início com attr e seguido por um ponto e o nome do atributo.
4. Class Binding
Syntax of class binding é muito similar ao Attribute Binding e este método é usado para definir uma propriedade de classe de um elemento view. Com o uso deste método de binding, podemos adicionar condicionalmente classes CSS a um elemento, criando elementos de estilo dinâmico.
A propriedade CSS vermelha só será aplicada quando as notas dos alunos forem inferiores a 40. Como similar ao Attribute binding, o Class binding começa com a palavra-chave class seguido por um ponto e nome da classe.
5. Style Binding
Este método também é muito similar aos dois métodos anteriores e podemos definir Style Binding para definir os estilos css em linha.
Binding de dados bidirecionais
>
Binding de dados bidirecionais está estabelecendo uma conexão bidirecional entre View e componente permitindo aos usuários trocar dados de ambas as maneiras. A ligação de dados bidirecional pode ser facilmente alcançada usando (ngModel).
Por favor certifique-se de importar FormsModule de @angular/forms para o arquivo app.pt se você estiver usando (ngModel).