Angular 7-How To Do "else if" with "* ngif"?

I am trying to do an "else if", to present the items of the category chosen by the user through a radio button. Only I only have" if " and "else" to present in ng-template.

I put together a sequence of photos to better explain the Question:

  1. The screen appears like this first: insert the description of the image here

  2. If you Select "Category", A table appears: insert the description of the image here

  3. If "companies" is selected, another one appears table: insert the description of the image here

The rest of the code works quietly, only this question of how to do appears the option that the user chooses (in the example has 3 options [with the screen blank], if the answer is applied to 3 or more options, it will also be accepted).

The html code of the component:

<a (click)="goBack()" class="btn btn-warning btn-md m-3">
  <span class="glyphicon glyphicon-backward"></span><strong> &lt;&lt; Voltar </strong>
</a>
<div class="form-group">
  <label for="changeTipoTemplate" class="mx-3">Selecione o tipo de pesquisa: </label>
  <div class="form-check">
    Categoria<input class="form-check-inline ml-2" type="radio" name="optTipoTabela" value="1" id="checkinfo_1" (change)="changeTipoTemplate(1)">
    Empresa<input class="form-check-inline ml-2" type="radio" name="optTipoTabela" value="0" id="checkinfo_0" (change)="changeTipoTemplate(0)">
  </div>
</div>
<h4 class="m-3">Fiscal</h4>
<ng-container *ngIf="tipo_template === 1; else empresaTemplate">
  <div class="form-group w-50 mx-3">
    <label for="fiscalCategorias">Selecione a categoria:</label>
    <select class="form-control" id="fiscalCategorias" (change)="changeTable()">
      <option value="casn">Código Acesso Simples Nacional</option>
      <option value="municipios">Municípios</option>
      <option value="estados">Estados</option>
      <option value="ibge">IBGE</option>
      <option value="sefaz">SEFAZ</option>
      <option value="nfgaucha">NF Gaúcha</option>
      <option value="parcelamentos">Parcelamentos</option>
      <option value="prefeitura">Prefeitura</option>
      <option value="nfse">NFS-e</option>
    </select>
  </div>

  <div class="row mx-3">
      <prime-table [th]="th" *ngIf="fiscais.length > 0" [td]="fiscais"
          [btn_cadastra]="true" (outputAdd)="cadastrar()"
          [btn_edita]="true" (outputEdita)="editar($event)"
          [btn_deleta]="true" (outputDeleta)="deletar($event)"
      ></prime-table>
  </div>
</ng-container>
<ng-template #empresaTemplate>

  <div class="form-group w-50 mx-3">
    <label for="empresaCategorias">Selecione a empresa:</label>
    <select class="form-control" name="empresaCategorias" id="empresaCategorias" (change)="getAllRegistersOfEmpresa($event)">
      <option value="0"></option>
      <option value="{{ e.nome_empresa }}" *ngFor="let e of empresas">{{ e.nome_empresa }}</option>
    </select>
  </div>

  <div class="row mx-3">
    <prime-table [th]="th" *ngIf="fiscais.length > 0" [td]="fiscais"
        [btn_generico1]="true" [icone_generico1]="'fas fa-edit'" (outputGenerico1)="editarEmpresa($event)"
        [btn_generico2]="true" [icone_generico2]="'fas fa-eye'" (outputGenerico2)="ver($event)"
        [btn_deleta]="true" (outputDeleta)="deletar($event)"
    ></prime-table>
  </div>
</ng-template>
Author: Edward Ramos, 2019-05-14

1 answers

In the case of your project it will not be necessary to use else, only by using *ngIf in each ng-container you can show the content according to the selected item.

I will put the file function .ts for future reference.

changeTipoTemplate(tipo) {
     this.tipo_template = tipo;
}

In your html you pass the value of the selected item.

<div class="form-check">
   Categoria<input class="form-check-inline ml-2" type="radio" name="optTipoTabela" value="1" id="checkinfo_1" (change)="changeTipoTemplate(1)">
   Empresa<input class="form-check-inline ml-2" type="radio" name="optTipoTabela" value="0" id="checkinfo_0" (change)="changeTipoTemplate(0)">
   Outro<input class="form-check-inline ml-2" type="radio" name="optTipoTabela" value="2" id="checkinfo_2" (change)="changeTipoTemplate(2)">
</div>

Now in the same html you mount the content the way you want to show from Wake with the selected option

<ng-container *ngIf="tipo_template === 0">
     <!-- Conteúdo 0 aqui -->
</ng-container>

<ng-container *ngIf="tipo_template === 1">
     <!-- Conteúdo 1 aqui -->
</ng-container>

<ng-container *ngIf="tipo_template === 2">
     <!-- Conteúdo 2 aqui -->
</ng-container>
 2
Author: André Vicente, 2019-05-15 14:13:29