Simplificando a Lógica de Visualização em Angular

Recentemente, tive que implementar uma visão popover com muitas variações baseadas em condições complexas. Usar ngSwitch, nesse caso, era impossível, e usar ngIfé ilegível e detalhado.

Aqui está como eu decidi abordar este problema. O primeiro passo foi criar uma diretiva chamada TemplateIdDirective:

@Directive({
  selector: 'ng-template[id]',
  standalone: true
})
export class TemplateIdDirective {
  @Input() id: string;
  
  tpl = inject(TemplateRef);
}

<-- trace-information.component.html -->

<div>
  <p>{{ header }}</p>
  <ng-template [ngTemplateOutlet]="body"></ng-template>
</div>

<ng-template id="variation-one">...</ng-template>
<ng-template id="variation-two">...</ng-template>
<ng-template id="variation-three">...</ng-template>
<ng-template id="variation-four">...</ng-template>
<ng-template id="variation-five">...</ng-template>

@Component({
  selector: 'app-trace-information',
  standalone: true,
  imports: [TemplateIdDirective],
  templateUrl: './trace-information.component.html'
})
export class TraceInformationComponent {
  header = '';

  @Input() traceInfo: TraceInfo;
  
  @ViewChildren(TemplateIdDirective) 
  templates: QueryList<TemplateIdDirective>;
  
  private cdr = inject(ChangeDetectorRef);

  ngAfterViewInit() {
    this.resolveView();
  }
 
  private resolveView() {
    // All the complex conditions are defined here.
    // In real life is way more complicated than that.
    // This is only for illustration
    if(...) {
      this.header = '...';
      this.body = this.getTemplate('variation-one');
    } else if(...) {
       if(...) {
         this.header = '...';
         this.body = this.getTemplate('variation-two'); 
       } else {
         this.header = '...';
         this.body = this.getTemplate('variation-three');
       }
    }

    this.cdr.detectChanges();
  }


  private getTemplate(id: string) {
    return this.templates.find((tpl) => tpl.id === id).tpl;
  }
}

Siga-me no Medium ou Twitter para ler mais sobre Angular e JS!