Change template as you click Angular 6

Question

I have a chip list, depending on the chip being clicked it will change. If user clicks the "gasoline" chip, template switches to source and destination input, if it clicks on hotel, it turns a tag input. My difficulty is to transform these template depedending on the condition

<div fxFlex="100">
  <mat-form-field fxFlex ngStyle.gt-sm="margin-left:30px" *ngIf="descriptionTags == 'default'; else tagDescription">
    <input matInput placeholder="Descrição" ngStyle.gt-sm="margin-left:30px">
  </mat-form-field>

  <ng-template #tagDescription>
    <mat-chip-list class="mat-chip-list">
      <mat-chip *ngFor="let tags of descriptionTags" value>
        {{tags.nameTag}}
      </mat-chip>
    </mat-chip-list>
  </ng-template>

  <ng-template #inputListTags>

    <h1>TAG INPUT LIST</h1>

  </ng-template>

  <ng-template #OriginDestinationReason>

    <h1>TAG Origin Destination adn Reason</h1>

  </ng-template>

  <ng-template #OriginDestination>

    <h1>TAG Origin Destination</h1>

  </ng-template>
</div>

Answer 1

Since you're using the descriptionTags property as an Object Array and as a string, you can specify the type of descriptionTags as descriptionTags: (string | any[])

You can then switch between them whenever you like. In this example, I've made the switch based on the button that was clicked.

Here's a Sample StackBlitz for your ref.

Answer 2

It would be basically this, I will have a component that changes as the client or user clicks on the tags, I will have three types of tag template This part in thesis has already been finalized, when user clicks on the tag the template changes according to business rule. Ex A B C D, when user clicks on tag A it will open a template in place of A B C D and in this template will have two Input –

<div fxFlex="100">
  <mat-form-field fxFlex ngStyle.gt-sm="margin-left:30px" *ngIf="descriptionTags == 'default'; else tagDescription">
    <input matInput placeholder="Descrição" ngStyle.gt-sm="margin-left:30px">
  </mat-form-field>

  <ng-template #tagDescription>
    <mat-chip-list class="mat-chip-list">
      <!-- *ngIf="user click tag.name ='A'"; if else 'B' > -->
      <mat-chip *ngFor="let tags of descriptionTags" >
        {{tags.nameTag}}
      </mat-chip>
    </mat-chip-list>
  </ng-template>

  <ng-template #A>
 <!-- displays this template instead of mat-chip-list -->
    <input matInput placeholder="Descrição" ngStyle.gt-sm="margin-left:30px">
    <input matInput placeholder="Descrição" ngStyle.gt-sm="margin-left:30px">

  </ng-template>

  <ng-template #B>

    <h1>TAG Origin Destination adn Reason</h1>

  </ng-template>

  <ng-template #OriginDestination>

    <h1>TAG Origin Destination</h1>

  </ng-template>
</div>