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

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 08.1 — Projeção de Conteúdo Simples com

Contexto: Projeção de Conteúdo Simples com no contexto de Encapsulamento de CSS e Projeção de Conteúdo (ng-content).

Requisitos de Execução:

  1. Criar componente CardBoxComponent com <ng-content> projetando o corpo fornecido pelo pai.

Resultado Esperado

Conteúdo filho projetado no slot do componente pai.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_08_1_SeuNome
  2. Envie na tarefa: Atividade Cap 08 - Encapsulamento de CSS e Projeção de Conteúdo (ng-content)
🔑 Gabarito de Código & Solução Comentada 
// card-box.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-card-box',
  standalone: true,
  template: `
    <div class="box-wrapper">
      <ng-content></ng-content>
    </div>
  `
})
export class CardBoxComponent {}

🔍 Nível 2: Prática

Problema 08.2 — Projeção Múltipla com Seletores (ng-content select=’[card-header]’)

Contexto: Projeção Múltipla com Seletores (ng-content select=’[card-header]’) no contexto de Encapsulamento de CSS e Projeção de Conteúdo (ng-content).

Requisitos de Execução:

  1. Criar slots nomeados com <ng-content select='[header]'> e <ng-content select='[footer]'>.

Resultado Esperado

Elementos projetados nos slots correspondentes via atributos seletores.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_08_2_SeuNome
  2. Envie na tarefa: Atividade Cap 08 - Encapsulamento de CSS e Projeção de Conteúdo (ng-content)
🔑 Gabarito de Código & Solução Comentada 
// modal-slot.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-modal-slot',
  standalone: true,
  template: `
    <header><ng-content select="[header]"></ng-content></header>
    <main><ng-content></ng-content></main>
    <footer><ng-content select="[footer]"></ng-content></footer>
  `
})
export class ModalSlotComponent {}

⚡ Nível 3: Integração

Problema 08.3 — Encapsulamento de Estilos com ViewEncapsulation (Emulated vs ShadowDom)

Contexto: Encapsulamento de Estilos com ViewEncapsulation (Emulated vs ShadowDom) no contexto de Encapsulamento de CSS e Projeção de Conteúdo (ng-content).

Requisitos de Execução:

  1. Configurar @Component({ encapsulation: ViewEncapsulation.ShadowDom }) para isolamento total com Web Components nativos.

Resultado Esperado

Estilos encapsulados em Shadow Root isolados de CSS global.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_08_3_SeuNome
  2. Envie na tarefa: Atividade Cap 08 - Encapsulamento de CSS e Projeção de Conteúdo (ng-content)
🔑 Gabarito de Código & Solução Comentada 
// shadow-dom.component.ts
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-shadow-card',
  standalone: true,
  encapsulation: ViewEncapsulation.ShadowDom,
  template: `<h2>Texto Isolado em Shadow DOM</h2>`,
  styles: [`h2 { color: #2563eb; }`]
})
export class ShadowCardComponent {}

🏆 Nível 4: Desafio Corporativo

Problema 08.4 — Projeção Dinâmica de Templates com NgTemplateOutlet e Contexto

Contexto: Projeção Dinâmica de Templates com NgTemplateOutlet e Contexto no contexto de Encapsulamento de CSS e Projeção de Conteúdo (ng-content).

Requisitos de Execução:

  1. Criar componente aceitando TemplateRef e renderizando dinamicamente com <ng-container *ngTemplateOutlet='template; context: ctx'>.

Resultado Esperado

Template flexível renderizado com passagem dinâmica de variáveis de contexto.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_08_4_SeuNome
  2. Envie na tarefa: Atividade Cap 08 - Encapsulamento de CSS e Projeção de Conteúdo (ng-content)
🔑 Gabarito de Código & Solução Comentada 
// dynamic-template.component.ts
import { Component, input, TemplateRef } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-dynamic-list',
  standalone: true,
  imports: [CommonModule],
  template: `
    @for (item of items(); track item) {
      <ng-container *ngTemplateOutlet="customTemplate(); context: { $implicit: item }"></ng-container>
    }
  `
})
export class DynamicListComponent {
  items = input.required<string[]>();
  customTemplate = input.required<TemplateRef<any>>();
}
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos