i want to show hide div based on dropdown selection using typescript.
html.file:
<select class="browser-default custom-select">
<option selected>single</option>
<option value="1">Weekly</option>
<option value="2">Monthly</option>
<option value="3">Yearly</option>
</select>
<div class="single">single working fine</div>
<div class="weekly">Weekly working fine</div>
<div class="monthly">monthly working fine</div>
<div class="yearly">yearly working fine</div>
You can use two way binding [(ngModel)]="selectedValue" and *ngIf to show/hide div
<select class="browser-default custom-select" [(ngModel)]="selectedValue">
<option value="0" selected>single</option>
<option value="1">Weekly</option>
<option value="2">Monthly</option>
<option value="3">Yearly</option>
</select>
<div class="single" *ngIf="selectedValue == 0">single working fine</div>
<div class="weekly" *ngIf="selectedValue == 1">Weekly working fine</div>
<div class="monthly" *ngIf="selectedValue == 2">monthly working fine</div>
<div class="yearly" *ngIf="selectedValue == 3">yearly working fine</div>
You need to use ngModel in select box. So that you can store the latest value in it and in div you need to use ngIf condition
<select class="browser-default custom-select" [(ngModel)]="selectedOption">
<option selected>single</option>
<option value="1">Weekly</option>
<option value="2">Monthly</option>
<option value="3">Yearly</option>
</select>
In Ts file, just define selectedOption variable.
<div class="single" *ngIf="selectedOption === 1">single working fine</div>
<div class="weekly" *ngIf="selectedOption === 2">weekly working fine</div>
<div class="monthly" *ngIf="selectedOption === 3">monthly working fine</div>
<div class="yearly">yearly working fine</div>
In DIV you need to use ngIf like this.
