<section class="container">
<header class="header d-flex">
<h2 class="ff-inter">Meu Mural</h2>
<div class="buscar-pensamentos">
<input
type="search"
class="filtro"
placeholder="O que você procura?"
autofocus
[(ngModel)]="filtro"
(keyup)="pesquisarPensamentos()"
>
<img src="/assets/imagens/lupa.png" alt="Lupa azul">
</div>
<h2 class="ff-inter">Meu Mural</h2>
<button routerLink="/criarPensamento" class="botao">Adicionar pensamento</button>
</header>
<div class="mural" *ngIf="listaPensamentos.length > 0, else semPensamentos">
<div *ngFor="let pensamento of listaPensamentos">
<app-pensamento [pensamento]="pensamento"></app-pensamento>
</div>
</div>
</section>
<app-botao-carregar-mais
[haMaisPensamentos]="haMaisPensamentos"
(click)="carregarMaisPensamentos()"
>
</app-botao-carregar-mais>
<ng-template #semPensamentos>
<div class="ff-inter sem-pensamentos">
<p>Ainda não há pensamentos cadastrados!</p>
</div>
</ng-template>
No código acima do listar-pensamento.component.html da aula atual temos várias formas de associar a lógica do Angular ao HTML da página.
Exemplos:
-> (keyup), (click): Pelo que entendi essa sintaxe, quando separados por parenteses, são de listeners de eventos, que após podem chamar uma função, estou correto?
-> [haMaisPensamentos]: Não entendi direito qual a sua utilidade, seria para passar parâmetros para a tag filha?
-> *ngFor, *ngIf: Está sintaxe com os asteríscos a frente, serve para implementar lógica ao HTML? Estou correto?
-> [(ngModel)]: Está sintaxe com parenteses e colchetes, tem uma função específica?
-> {{}}: Sintaxe das chaves duplas, serve para substituir uma parte do HTML com um atributo do component.ts?
-> #semPensamentos: Sintaxe com #, qual é a sua função?
Qual a diferença e quando devo usar em cada caso, seria interessante haver uma explicação básica de quando e como usá-las
