Diretivas na Pratica, como criar a base de uma Single Page Application no Angular (ng será seu melhor amigo)

O que são diretivas?

São comando especiais do Angular manipular e alterar a DOM no Angular.

Como manipula (ocultar e evidenciar coisas, desenhar de maneiras especificas)

Diretivas de Atributos (Altera a ou comportamento de um elemento, comportamento ou outra diretiva (Componente))

Ng class - ADD ou REMOVE um conjunto de classes CSS de um elemento.

NgStyle - ADD ou REMOVE um conjunto de estilos ao HTML.

(quando o usuário clique, altere a class css. EX: Tema Dark e Ligth)

NgModel - Adiciona vinculação de dados bidirecional a um elemento de um formulário.

(Todas estão associadas a algum atributo de um componente/atributo)

Diretivas Estruturais (Moldam ou remodelam a estrutura da DOM, add ou removendo elementos na tela (Árvore como um todo))

NgIf - Condicional que verifica se o modelo deve ser visualizado ou não.

(Condicional que verifica se o conteúdo deveria está mostrando ou não)

NgFor - Repete um elemento para cada item em uma lista.

(Repete uma ação, EX. Uma lista que será repetida)

NgSwitch - Utilizado para alterar entre comportamentos alternativos.

(semelhante ao Switch Case, onde tem vários casos e como quer que seja executado, semelhando ao if e else)

Diretivas na Pratica

01 - Segmentação da criação do projeto:

ng new diretivas-proj (criação da pasta diretivas-proj)

cd diretivas-proj (entra na minha pasta de diretivas)

_______________________________________________________

Após baixado, usar o comando:

cd ‘diretivas-proj’ ou

cd (insira a primeira letra da pasta e clique esta tecla tab, que completa o nome da pasta)

cd code .

(para abrir o vs code somente com a pasta do diretivas-proj)

(isso é só para sair da pasta global e ficar com a janela do VS Code mais limpa)

(Particularmente eu gosto de seguir isto)

_______________________________________________________

02 - Criar o primeiro component usando o comando:

ng generate component card 

(ng - é o comando | generate component |serve para gerar o component | card - é o nome que você escolher para aquele component )

(Criou a pasta card e esses components)

card.component.html

card.component.spec.ts

card.component.ts

card.component.css

app.module.ts (atualizou o meu modulo com os component card)

(Após isso, pegar a tag <app-card> que está localizada no arquivo card.component.ts e inserir no arquivo app.component.html), ou seja, ele já esta chamando a minha tag <app-card>.

03 - Executar o projeto

ng serve

By Andressa.

Se gostarem, eu posso explicar com exemplos como usar Diretivas Estruturais na pratica.