Aula 3

Modelos em Angular são estruturas de interface de usuário que vinculam dados dinâmicos e componentes. Eles utilizam a linguagem HTML aprimorada com sintaxe específica do Angular, como bindings e diretivas, para criar layouts interativos e dinâmicos.

Criação de modelos

Os modelos são definidos no arquivo .html do componente Angular associado ou diretamente dentro do componente por meio da propriedade template.

Exemplo

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>{{ title }}</h1><p>Welcome to Angular!</p>`,
  styles: ['h1 { color: blue; }']
})
export class AppComponent {
  title = 'My Angular App';
}

Exemplo usando modelo separado:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Angular App';
}

// app.component.html
<h1>{{ title }}</h1>
<p>This is an external template example.</p>

Diretivas são instruções ao DOM para alterar o layout ou comportamento do modelo. Elas podem ser:

• Estruturais: Alteram a estrutura do DOM.
  • *ngIf: Renderiza um elemento condicionalmente.
  • *ngFor: Cria elementos dinamicamente com base em listas.
• Atributos: Alteram a aparência ou comportamento de um elemento.
  • [ngClass]: Aplica classes CSS dinamicamente.
  • [ngStyle]: Aplica estilos dinamicamente.

A diretiva *ngFor é usada no Angular para iterar sobre uma lista e gerar elementos HTML dinamicamente. Ela é uma diretiva estrutural, o que significa que altera a estrutura do DOM.

Sintaxe básica

A forma padrão de uso é:

<elemento *ngFor="let item of lista">
  {{ item }}
</elemento>

Exemplo 1

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  frutas = ['Maçã', 'Banana', 'Laranja', 'Uva'];
}

<h2>Lista de Frutas</h2>
<ul>
  <li *ngFor="let fruta of frutas">
    {{ fruta }}
  </li>
</ul>

Exemplo 2

É possível acessar o índice da iteração usando let i = index:

<ul>
  <li *ngFor="let fruta of frutas; let i = index">
    {{ i + 1 }} - {{ fruta }}
  </li>
</ul>

Esse recurso é útil para numerar os itens exibidos, controlar ações específicas por índice ou aplicar estilos alternados.

Exemplo com *ngIf e *ngFor:

// HTML do componente
<h2>Product List</h2>
<ul>
  <li *ngFor="let product of products">{{ product.name }} - ${{ product.price }}</li>
</ul>

<p *ngIf="products.length === 0">No products available.</p>

// app.component.ts
export class AppComponent {
  products = [
    { name: 'Laptop', price: 1000 },
    { name: 'Smartphone', price: 500 }
  ];
}

Exemplo com [ngClass]:

// HTML
<p [ngClass]="{ 'active': isActive, 'inactive': !isActive }">
  This paragraph's class changes dynamically.
</p>

// app.component.ts
export class AppComponent {
  isActive = true;
}

A diretiva *ngIf é usada para exibir ou ocultar elementos no DOM com base em uma condição. Se a condição for verdadeira, o elemento será renderizado; caso contrário, será removido do DOM.

Sintaxe básica

A forma padrão de uso é:

<elemento *ngIf="condicao">
  Conteúdo exibido se a condição for verdadeira.
</elemento>

Exemplo 1

<p *ngIf="estaLogado">
  Bem-vindo de volta!
</p>
<p *ngIf="!estaLogado">
  Por favor, faça login.
</p>

// app.component.ts
export class AppComponent {
  estaLogado = true;
}

O *ngIf pode ser combinado com else usando a sintaxe *ngIf="condicao; else templateAlternativo".

Exemplo com else:

<p *ngIf="temPermissao; else semPermissao">
  Acesso concedido.
</p>
<ng-template #semPermissao>
  <p>Acesso negado.</p>
</ng-template>

A diretiva [ngClass] permite aplicar classes CSS dinamicamente a um elemento com base em expressões ou condições. Ela é útil para alternar estilos conforme o estado da aplicação.

Sintaxe básica

A forma mais comum de uso é com um objeto:

<elemento [ngClass]="{ 'classe1': condicao1, 'classe2': condicao2 }">
  Conteúdo
</elemento>

Exemplo 1

<p [ngClass]="{ 'ativo': isActive, 'inativo': !isActive }">
  Status do usuário
</p>

// app.component.ts
export class AppComponent {
  isActive = true;
}

Também é possível passar diretamente o nome da classe como string ou array:

<div [ngClass]="'highlight'">Texto em destaque</div>
<div [ngClass]="['box', 'rounded']">Caixa estilizada</div>