'show the different DIV based on selection of dropdown in angular using ngmodel

I am having three different div like div1,div2,div3 , i need to show div1 and div2 on one selection and again show div1 div3 based on second selection and again show the div2 and div3 at last selection so i need this kind of solution please help me on this

htmlcssangularangular9angular12


Solution 1:[1]

TS

selectedOption: any;
options = [
   { value: 1, name: 'Option 1' },
   { value: 2, name: 'Option 2' },
   { value: 3, name: 'Option 3' },
];
    
constructor() {
   this.selectedOption = this.options[0];
}

HTML

<select name="selectField" [(ngModel)]="selectedOption">
    <option *ngFor="let option of options" [ngValue]="option.value">{{ option.name }}</option>
</select>

<div #div1 [hidden]="selectedOption === 3">
    //...
</div>
<div #div2 [hidden]="selectedOption === 2">
    //...
</div>
<div #div3 [hidden]="selectedOption === 1">
    //...
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions