Conforme visto na aula anterior, introduzimos os conceitos de módulos, rotas, databind for loops, ifs e eventos. Agora vamos ver como fazer outros tipos de binding muito comuns no angular, e depois ver como criar pipes para formatação de dados. Logo após iremos introduzir outro conceito que é o de serviços e injeção de dependências.
É comum que queiramos aplicar um estilo condicionalmente a um elemento em dom. Isso permite fazer efeitos simples como por exemplo trocar a cor de uma div caso tenhamos uma condição de erro ou de sucesso.
Para isso o angular possui o class binding que vem na sintaxe: [class]=”expressão”
Sendo que a expressão pode ser feita de algumas formas:
Fonte: Angular Guide. Disponível em <https://angular.io/guide/class-binding>. Acesso em 09 de fevereiro de 2023.
Lembrando que as expressões são do databind do angular, ou seja elas vêm de dados do componente.
Exemplo prático: Vamos simular a alteração de uma div de alerta conforme um registro do servidor, por ser somente uma simulação não vamos nos comunicar com o servidor, veremos isso nos próximos módulos.
Componente:
Nesse componente, ao chamarmos a função simularEnvioServidor, trocamos o estado de erro alternando entre false e true. Caso seja true adicionamos uma mensagem de erro e caso seja false adicionamos uma mensagem de tudo ok.
Componente html:
Como pode observar, usando o class binding para decidir qual classe aplicar no componente conforme o estado da variável erro.
Css:
Aqui é aplicado um estilo simples para os estados.
O binding de estilo é similar ao de classes, mas age em propriedades e não em classes. Possui sintaxe similar conforme tabela abaixo: