Introdução Prática às Diretivas ngIf, ngFor e ngSwitch

Oi pessoal!

Estou começando a aprender Angular e gostaria de entender melhor o funcionamento de ngIf, ngFor e ngSwitchCase. Fiz um resuminho do que eu entendi abaixo, se alguem quiser complementar será muito bem vindo!

O ngIf é uma diretiva usada para exibir ou ocultar um elemento com base em uma condição. Por exemplo, você pode mostrar um botão apenas se uma variável for verdadeira. Como se fosse o if utilizado no JavaScript puro.
Suponha que você tenha um botão que deseja exibir apenas se uma variável chamada mostrarBotao for verdadeira:

<button *ngIf="mostrarBotao">Clique aqui</button>

No código acima, o botão só será mostrado se a variável mostrarBotao for true. Caso contrário, o botão não aparecerá na página.

Já o ngFor é utilizado para iterar sobre uma lista de elementos, como um array, e criar repetições de um elemento HTML com base nesses itens. Isso é útil para exibir uma lista de itens em uma página. Como o for do JS. No caso, uma lista de nomes e você queira exibi-los em uma lista não ordenada:

<ul>
  <li *ngFor="let nome of nomes">{{ nome }}</li>
</ul>

Supondo que nomes seja um array no seu componente com vários nomes, essa diretiva ngFor criará um item de lista para cada nome na lista nomes.

E temos também o ngSwitch, que enquanto o ngIf é utilizado para condições de verdadeiro ou falso, o ngSwitch é usado quando temos vários casos e precisamos escolher entre eles. Como o switch case do JS.

<div [ngSwitch]="condicao">
  <p *ngSwitchCase="'caso1'">Conteúdo para o Caso 1</p>
  <p *ngSwitchCase="'caso2'">Conteúdo para o Caso 2</p>
  <p *ngSwitchDefault>Conteúdo Default</p>
</div>

Nesta diretiva, o conteúdo exibido depende do valor da variável condicao. Se condicao for 'caso1', será exibido o conteúdo do primeiro caso. Se for 'caso2', será exibido o segundo conteúdo. Caso contrário, será exibido o "Conteúdo Default".

Espero que ajude alguém aqui do fórum!