1
I am trying to make 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 on ng-template.
I set up a sequence of photos to explain the question better:
The screen appears like this first:
If you select "Category", a table appears:
If you read "Companies", another table appears:
the rest of the code works smoothly, only this question of how to do appears the option that the user choose (in the example has 3 options [with the blank screen], if the answer is applied to 3 or more options, 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>
I believe you have the answer for what you need: https://stackoverflow.com/questions/49217822/how-to-render-a-div-on-selection-of-radio-button-angular-2
– Philippe Nunes
Opa, I took a look and it seemed that in the answer, the result is type "true or false", that ngIf already does by default when, displaying a template or other template. In my case, a template of 3 or 4 would have to appear on the screen
– Edward Ramos
Vc would do <ng-container *ngIf="type_template === 1">, in the other <ng-container *ngIf="type_template === 2">, in another <ng-container *ngIf="type_template === 3"> etc.. From what I understand does not need Else, it will show your container only if the type_template is what you are checking
– André Vicente
I did a test here, putting values from 0 to 3 on the Uttons radio, and did some ng-template, and apparently it worked. Posted as an answer that I will accept her @Andrevicente
– Edward Ramos