🧩 Exercícios Práticos: Templates, Property Binding, Event Binding e Two-Way Binding

Spec Frontend Com Angular • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 02.1 — Property Binding com [src] e Event Binding com (click)

Contexto: Property Binding com [src] e Event Binding com (click) no contexto de Templates, Property Binding, Event Binding e Two-Way Binding.

Requisitos de Execução:

  1. Vincular propriedade de imagem [src]='avatarUrl' e manipular clique de botão com (click)='onSalvar()'.

Resultado Esperado

Eventos de clique e propriedades vinculadas no template com sucesso.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_02_1_SeuNome
  2. Envie na tarefa: Atividade Cap 02 - Templates, Property Binding, Event Binding e Two-Way Binding
🔑 Gabarito de Código & Solução Comentada 
// perfil-card.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-perfil-card',
  standalone: true,
  template: `
    <div>
      <img [src]="avatarUrl" alt="Avatar" />
      <button (click)="alterarFoto()">Mudar Foto</button>
    </div>
  `
})
export class PerfilCardComponent {
  avatarUrl = 'https://via.placeholder.com/150';
  alterarFoto() { this.avatarUrl = 'https://via.placeholder.com/200'; }
}

🔍 Nível 2: Prática

Problema 02.2 — Two-Way Data Binding com [(ngModel)] e FormsModule

Contexto: Two-Way Data Binding com [(ngModel)] e FormsModule no contexto de Templates, Property Binding, Event Binding e Two-Way Binding.

Requisitos de Execução:

  1. Criar formulário de busca com [(ngModel)]='termoBusca' e importar FormsModule no componente standalone.

Resultado Esperado

Valor do input sincronizado bidirecionalmente com a variável do componente.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_02_2_SeuNome
  2. Envie na tarefa: Atividade Cap 02 - Templates, Property Binding, Event Binding e Two-Way Binding
🔑 Gabarito de Código & Solução Comentada 
// busca.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-busca',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="termoBusca" placeholder="Pesquisar..." />
    <p>Termo digitado: {{ termoBusca }}</p>
  `
})
export class BuscaComponent {
  termoBusca = '';
}

⚡ Nível 3: Integração

Problema 02.3 — Interpolação Segura e Sanitização com DomSanitizer

Contexto: Interpolação Segura e Sanitização com DomSanitizer no contexto de Templates, Property Binding, Event Binding e Two-Way Binding.

Requisitos de Execução:

  1. Sanitizar URLs seguras com DomSanitizer.bypassSecurityTrustUrl() para prevenir ataques XSS.

Resultado Esperado

URL confiável sanitizada e vinculada ao iframe de forma segura.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_02_3_SeuNome
  2. Envie na tarefa: Atividade Cap 02 - Templates, Property Binding, Event Binding e Two-Way Binding
🔑 Gabarito de Código & Solução Comentada 
// video-safe.component.ts
import { Component, inject } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-video-safe',
  standalone: true,
  template: `<iframe [src]="safeUrl"></iframe>`
})
export class VideoSafeComponent {
  private sanitizer = inject(DomSanitizer);
  safeUrl: SafeResourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl('https://youtube.com/embed/demo');
}

🏆 Nível 4: Desafio Corporativo

Problema 02.4 — Variáveis de Template com #templateRef e ViewChild

Contexto: Variáveis de Template com #templateRef e ViewChild no contexto de Templates, Property Binding, Event Binding e Two-Way Binding.

Requisitos de Execução:

  1. Acessar elemento nativo com @ViewChild('inputRef') e focar programaticamente.

Resultado Esperado

Elemento nativo acessado e focado via ViewChild.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_02_4_SeuNome
  2. Envie na tarefa: Atividade Cap 02 - Templates, Property Binding, Event Binding e Two-Way Binding
🔑 Gabarito de Código & Solução Comentada 
// focus-input.component.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-focus-input',
  standalone: true,
  template: `<input #campoNome type="text" />`
})
export class FocusInputComponent implements AfterViewInit {
  @ViewChild('campoNome') campoNome!: ElementRef<HTMLInputElement>;
  ngAfterViewInit() { this.campoNome.nativeElement.focus(); }
}
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos