1. Qual é a diferença entre ngIf e hidden no Angular?

Resposta esperada:

*ngIf remove ou adiciona o elemento do DOM, enquanto [hidden] apenas altera a propriedade CSS
display: none.

*ngIf é mais eficiente se o elemento não precisa estar no DOM quando oculto, mas [hidden] mantém o
elemento no DOM (útil para elementos que precisam de estado preservado).

2. Como você implementaria comunicação entre

componentes não relacionados (ex: irmãos ou
avô/neto)?
Resposta esperada:

Usando um serviço compartilhado com Subject ou BehaviorSubject (padrão Observable).

Alternativas:

@Output() + EventEmitter (para componentes pai/filho direto).

State Management (NgRx, Akita) para cenários complexos.

3. Explique a diferença entre constructor e ngOnInit.

Quando usar cada um?
Resposta esperada:

constructor: Inicializa a classe (usado para injeção de dependências). Evite lógica complexa aqui.

ngOnInit: Executa após o Angular renderizar as propriedades (@Input()). Ideal para carregar dados iniciais.

4. Como você otimizaria o desempenho de uma

aplicação Angular lenta?
Resposta esperada:

Lazy Loading de módulos.

Change Detection OnPush para reduzir verificações desnecessárias.

TrackBy em *ngFor para evitar rerenders desnecessários.

Bundle Analysis (ex: webpack-bundle-analyzer) para identificar bibliotecas pesadas.

5. O que são Pure Pipes e Impure Pipes? Dê

exemplos.
Resposta esperada:

Pure Pipe: Executa apenas quando os parâmetros mudam (otimizado). Ex: {{ valor | currency }}.

Impure Pipe: Executa em cada ciclo de detecção de mudanças (cuidado com performance). Ex: {{ valores |
filter }} (se o filtro for complexo).

6. Como lidar com erros HTTP globalmente em uma

aplicação Angular?
Resposta esperada:

Usar um interceptor (HttpInterceptor) para capturar erros e tratar centralizadamente (ex: redirecionar para
página de erro ou mostrar toast).

Exemplo:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

return [Link](req).pipe(
catchError(error => {
[Link]('Erro na requisição');
return throwError(error);
})
);
}

7. Quando usar ngOnChanges e como ele funciona?

Resposta esperada:

Usado para reagir a mudanças em @Input(). Recebe um SimpleChanges com valores atuais e anteriores.

Exemplo:
 ngOnChanges(changes: SimpleChanges) {
if (changes['inputProp']) {
[Link]('Valor anterior:', changes['inputProp'].previousValue);
}
}

8. Como garantir que um formulário reativo

(ReactiveForms) não tenha dados inválidos antes do
submit?
Resposta esperada:

Validadores síncronos ([Link]) e assíncronos (ex: validação no servidor).

Desabilitar o botão de submit se o formulário for inválido:

<button [disabled]="[Link]">Enviar</button>

Usar [Link]('campo')?.errors para feedback visual.

9. Qual é a diferença entre ViewChild e

ViewChildren?
Resposta esperada:

@ViewChild: Acessa um único elemento/componente/diretiva (ex: @ViewChild('ref') elemento;).

@ViewChildren: Retorna uma QueryList de vários elementos (ex: @ViewChildren(Directive) itens;).

10. Como você testaria um componente Angular que

depende de um serviço?
Resposta esperada:

Usar TestBed e mocks (ex: [Link]):

 const mockService = [Link]('Servico', ['metodo']);
[Link]({
providers: [{ provide: Servico, useValue: mockService }]
});
const component = [Link](MeuComponente).componentInstance;
expect([Link]).toHaveBeenCalled();

Bônus: Pergunta de cenário

"Como você estruturaria um módulo compartilhado (SharedModule) em um projeto grande?"
Resposta esperada:

Agrupar componentes/diretivas/pipes reutilizáveis (ex: cabeçalho, loaders, validadores).

Exportar apenas o necessário (exports: [MeuComponente]).

Evitar prover serviços aqui (a menos que seja providedIn: 'root').

11. Como você implementaria um debounce em um

campo de busca que faz requisições HTTP?
Resposta esperada:
Usando FormControl + valueChanges do ReactiveForms com operadores RxJS (debounceTime,
distinctUntilChanged, switchMap):

[Link]
.pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(term => [Link](term))
)
.subscribe(results => [Link] = results);

12. Qual é a diferença entre BehaviorSubject,

ReplaySubject e AsyncSubject?
Resposta esperada:

BehaviorSubject: Armazena o último valor e emite para novos assinantes (ex: estado de autenticação).
 ReplaySubject: Armazena e emite N valores anteriores (útil para cache).

AsyncSubject: Emite apenas o último valor quando completado (raro em Angular).

13. Como evitar memory leaks em Observables no

Angular?
Resposta esperada:

Sempre fazer unsubscribe (usando takeUntil, async pipe ou Subscription).

Exemplo com takeUntil:

private destroy$ = new Subject<void>();

ngOnInit() {
[Link]()
.pipe(takeUntil([Link]$))
.subscribe(data => ...);
}

ngOnDestroy() {
[Link]$.next();
[Link]$.complete();
}

14. Quando usar ngTemplateOutlet e ngContainer?

Dê um exemplo.
Resposta esperada:

ngTemplateOutlet: Renderiza templates dinâmicos (ex: componentes genéricos).

ngContainer: Agrupa elementos sem adicionar nós ao DOM (ex: diretivas estruturais múltiplas).

<ng-container *ngIf="condicao">
<ng-template [ngTemplateOutlet]="templateRef"></ng-template>
</ng-container>
15. Como implementar roteamento com lazy loading em
Angular?
Resposta esperada:
No [Link]:

{
path: 'feature',
loadChildren: () => import('./feature/[Link]').then(m => [Link])
}

O módulo FeatureModule deve ter seu próprio [Link]().

16. O que são resolvers e quando usá-los?

Resposta esperada:

Resolvers: Carregam dados antes da rota ser ativada (evitando templates vazios).

Exemplo:

@Injectable()
export class DataResolver implements Resolve<Data> {
resolve(route: ActivatedRouteSnapshot): Observable<Data> {
return [Link]([Link]);
}
}

Uso na rota:

{ path: 'detalhes/:id', component: DetalhesComponent, resolve: { dados: DataResolver } }

17. Como você testaria um pipe personalizado?

Resposta esperada:

Teste isolado (sem TestBed):

it('deve formatar CPF', () => {
const pipe = new CpfPipe();
expect([Link]('12345678900')).toBe('123.456.789-00');
});

Para pipes com dependências, usar [Link].

18. Explique o ciclo de vida de um componente Angular.

Resposta esperada (ordem principal):

1. constructor (injeção de dependências).

2. ngOnChanges (se houver @Input()).

3. ngOnInit (inicialização).

4. ngDoCheck (detecção de mudanças customizada).

5. ngAfterViewInit (após renderização da view).

6. ngOnDestroy (limpeza).

19. Como criar uma diretiva estrutural customizada (ex:

*ngIf alternativo)?
Resposta esperada:

@Directive({ selector: '[appMinhaDiretiva]' })

export class MinhaDiretiva implements OnInit {
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
) {}

@Input() set appMinhaDiretiva(condicao: boolean) {

condicao
? [Link]([Link])
: [Link]();
}
}
 Uso:

<div *appMinhaDiretiva="condicao">Conteúdo condicional</div>

20. Como internacionalizar (i18n) uma aplicação

Angular?
Resposta esperada:

Usar o pacote @angular/localize + tags i18n nos templates:

<h1 i18n="@@titulo">Título</h1>

Gerar arquivos .xlf com ng extract-i18n.

Configurar builds para múltiplos idiomas no [Link].

Bônus: Pergunta de arquitetura

"Como você organizaria um projeto Angular com 50+ componentes e 10+ módulos?"
Resposta esperada:

Estrutura por feature:

/src
/app
/core (serviços globais, interceptors)
/shared (componentes reutilizáveis)
/features
/auth (módulo de autenticação)
/dashboard (módulo principal)
...

Lazy Loading para módulos de features.

State Management centralizado (se necessário, ex: NgRx).

21. Como implementar SSR (Server-Side Rendering) em
Angular e quais problemas comuns resolver?
Resposta esperada:

Usar @angular/universal para renderização no servidor.

Benefícios: SEO, performance inicial e acessibilidade.

Desafios comuns:

Uso de window ou document (usar PLATFORM_ID + isPlatformBrowser).

Chamadas HTTP duplicadas (usar TransferState).

Autenticação entre servidor/cliente.

22. Como criar um Custom Decorator em Angular e

quando seria útil?
Resposta esperada:

Exemplo de decorator para logging:

export function LogExecutionTime() {

return function(target: any, key: string, descriptor: PropertyDescriptor) {
const originalMethod = [Link];
[Link] = function(...args: any[]) {
[Link](key);
const result = [Link](this, args);
[Link](key);
return result;
};
return descriptor;
};
}

Uso:

@LogExecutionTime()
calcularAlgoComplexo() { ... }

Casos de uso: Logging, validação, caching.

 23. Como otimizar o carregamento inicial (Above the
Fold) em uma SPA Angular?
Resposta esperada:

Estratégias:

Lazy Loading + Preloading (PreloadAllModules ou estratégia custom).

SSR (Angular Universal).

Divisão de código com import() dinâmico.

Critical CSS inlined no HTML.

Defer de scripts não essenciais.

24. O que é Hydration no Angular 17+ e como evitar

problemas?
Resposta esperada:

Hydration: Processo onde o Angular "reidrata" o DOM renderizado no servidor no cliente.

Problemas comuns:

Discrepância entre servidor/cliente (usar ngSkipHydration em elementos dinâmicos).

Event listeners duplicados (evitar manipulação direta do DOM).

25. Como implementar um micro-frontend com Angular?

Resposta esperada:

Opções:

Module Federation (Webpack 5): Compartilhar dependências entre apps.

Single-SPA: Framework agnóstico para integração.

Iframes (simples, mas limitado).

Desafios:

Comunicação entre apps (Custom Events ou RxJS).

 CSS isolado (Shadow DOM ou prefixos).

26. Como monitorar performance em tempo real em

produção?
Resposta esperada:

Ferramentas:

Angular [Link]().

Google Lighthouse CI.

New Relic/Datadog para RUM (Real User Monitoring).

Custom metrics com PerformanceObserver.

Métricas-chave: FCP, LCP, TTI, CLS.

27. Como proteger rotas baseadas em roles (RBAC) de

forma escalável?
Resposta esperada:

Usar CanActivate + serviço de auth:

@Injectable()
export class RoleGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router) {}

canActivate(route: ActivatedRouteSnapshot): boolean {

const expectedRole = [Link]['role'];
if () {
[Link](['/forbidden']);
return false;
}
return true;
}
}

Rotas:
{
path: 'admin',
component: AdminComponent,
canActivate: [RoleGuard],
data: { role: 'ADMIN' }
}

28. Como implementar undo/redo em um formulário

complexo?
Resposta esperada:

Padrão Command + State Management:

Armazenar snapshots do estado do formulário em um array.

Usar [Link] para capturar alterações.

Implementar métodos para navegar no histórico.

Bibliotecas como NgRx ou Immer podem ajudar.

29. Qual a diferença entre providedIn: 'root' e

módulos compartilhados? Quando usar cada um?
Resposta esperada:

providedIn: 'root': Singleton global (ideal para serviços stateless).

Módulo compartilhado:

Útil para serviços com estado específico do módulo.

Permite forRoot()/forChild() para configuração.

Exemplo: HttpClient é 'root', mas um LoggerService com configuração pode ser modular.

30. Como depurar memory leaks em uma aplicação

Angular grande?
Resposta esperada:
Ferramentas:

Chrome DevTools (Memory tab + Heap Snapshots).

[Link] para change detection.

why-did-you-render para rerenders desnecessários.

Padrões suspeitos:

Subscriptions não liberadas.

Listeners de eventos globais.

Cache muito agressivo.

Bônus: Pergunta de Arquitetura Avançada

"Como estruturar um monorepo com múltiplas apps Angular compartilhando bibliotecas?"
Resposta esperada:

Ferramentas: Nx Workspace ou Angular CLI + ng-packagr.

Estrutura:

Copy

Download

/apps /app1 /app2 /libs /shared-ui /core-data

Vantagens:

Reuso de código.

Builds otimizadas com afetados.

Versionamento semântico único.