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:
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> << 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>
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>