typescript ngif-then.component.ts

Posted 2021-05-21

@Component({ 
  selector: 'ng-if-then', 
  template: ` 
    <button (click)="switchPrimary()">Switch Template</button> 
    <div *ngIf="show; then thenBlock"></div> 
    <ng-template #primaryBlock>Primary</ng-template> 
    <ng-template #secondaryBlock>Secondary</ng-template> 
  `
}) 
class NgIfThenElse implements OnInit { 
  thenBlock: TemplateRef<any> = null; 
  show: boolean = true; 
  @ViewChild('primaryBlock') 
  primaryBlock: TemplateRef<any> = null;
  @ViewChild('secondaryBlock') 
  secondaryBlock: TemplateRef<any> = null; 
  switchPrimary() { 
    this.thenBlock = this.thenBlock === this.primaryBlock ? this.secondaryBlock : this.primaryBlock; 
  } 
  
  ngOnInit() { this.thenBlock = this.primaryBlock; } 
}