Angular display multiple templates based on condition

June 20, 2023

I’ve an button and I’m displaying tooltip based on the condition, now I’ve single condition for which I’m displaying tooltip, now I’ve other set of condition for which I need to display different message

<div *ngIf="!assessmentDetailsObj" placement="top-right" [mtTooltip]="(!lob || lob === undefined) ? disabledLOBContent : ''">
          <button
            *ngIf="!assessmentDetailsObj"
            [disabled]="(!lob || lob === undefined)"
            class="btn btn-primary"
            aria-label="Accept"
            (click)="create()"
          >
            Create
          </button>
        </div>
        <ng-template #disabledLOBContent>Please Select LOB</ng-template>

now I want to add other set of condition

[mtTooltip]="isTrueSet ? refVar : ''"
<ng-template #refVar>Please select Endpoints</ng-template>

Can I bind [mtTooltip] to a function and inside function can i check for multiple conditions and based on that can i display messages?

>Solution :

instead of making multiple templates and making your condition complex, you may actually put your conditions inside your template, if your templates are simple enough:

<ng-template #disabledLOBContent>
  <ng-container *ngIf="myContition1">Please Select LOB</ng-container>
  <ng-container *ngIf="myContition2">An other message</ng-container>
  <ng-container *ngIf="myContition3">An other diffrent message</ng-container>
</ng-template>