An example of Angular content projection. I was following this: https://angular.io/guide/content-projection#conditional-content-projection, but couldn't get it right away

ng-conditional-content-projection-example.ts

import { Component, ContentChild, Directive, Input, OnInit, TemplateRef } from '@angular/core';

// parent component where the list is rendered and where we can decide where which conditional field will be rendered
@Component({
  selector: 'app-root',
  template: `
    <h2>Here's where the chips come in yo</h2>
    <div *ngFor="let c of config">
      <app-chip [hasConditionalField]="c.hasConditionalField">
        <ng-template appConditionalField>
          <app-conditional-field [id]="c.conditionalFieldId"></app-conditional-field>
        </ng-template>
      </app-chip>
    </div>
  `
})
export class AppComponent {
  config = [
    {hasConditionalField: true, conditionalFieldId: 1},
    {hasConditionalField: false, conditionalFieldId: 2},
    {hasConditionalField: true, conditionalFieldId: 3},
    {hasConditionalField: false, conditionalFieldId: 4},
    {hasConditionalField: true, conditionalFieldId: 5},
  ];
}
// this directive creates a template ref where we can pass date into the template
@Directive({
  selector: '[appConditionalField]'
})
export class ConditionalFieldDirective {
  constructor(public templateRef: TemplateRef<unknown>) {
  }
}
// this component has the ng-container that will house ng-template. the Directive binds this component with
// the ng-template in a consuming component
@Component({
  selector: 'app-chip',
  template: `
    <p>i'm the chip</p>
    <div *ngIf="hasConditionalField">
      <ng-container [ngTemplateOutlet]="conditionalField.templateRef"></ng-container>
    </div>
  `
})
export class ChipComponent {
  @ContentChild(ConditionalFieldDirective) conditionalField: ConditionalFieldDirective;
  @Input() hasConditionalField: boolean;
}
// the parent component will choose this component, or any other to conditionally render
@Component({
  selector: `app-conditional-field`,
  template: `
    <p>Id is {{ id }}.</p>
    <p>Conditional Text is {{ conditionalText }}</p>
  `
})
export class ConditionalFieldComponent implements OnInit {
  @Input() id: number;
  conditionalText: string;

  ngOnInit(): void {
    switch (this.id) {
      case 1:
        this.conditionalText = 'first is wurst';
        break;
      case 2:
        this.conditionalText = 'second is heaven';
        break;
      case 3:
        this.conditionalText = 'third is a turd';
        break;
      case 4:
        this.conditionalText = 'fourth goes forth';
        break;
      case 5:
        this.conditionalText = 'fifth is a sith';
        break;
      default:
        this.conditionalText = 'dont got nuthin';
    }
  }
}