how to show-hide a drop-down element with the options from a different drop-down menu

Question

I'm assigning roles to the user.

User types are: student, teacher, parent and admin.

So when i select student or teacher as the user from the drop-down. i wanted the class and section drop-down to be enabled. and when admin or parent is selected. the class and section should be disabled.

any help would be great.

I have tried this with radio buttons but drop-downs isn't working for me.

<select matInput id="userType" class="fullWidth">
    <option value="" disabled>---Select User---</option>
    <option *ngFor = "let user of users" [ngValue]="user">{{user}</option>
 </select>
  ``` user types are student, teacher, parent and admin```
```below is the drop-down for selecting class if the user type is only student or teacher```
<select matInput id="className" class="fullWidth">
  <option value="" disabled>---Select class---</option> 
  <option *ngFor = "let class of classes"[ngValue]="class">{{class}}</option>
</select>
```class values are 1st, 2nd and 3rd```

"i expect the following result when student or user is selected from the user type drop down menu. i wanted the class to be enabled. otherwise it should be disabled for all the other user types (which are: admin and parent)"

Answer 1

You can use two-way data binding to achieve this.

On your component.ts, we shall define the required properties:

role: string = undefined;
users : string[] = ['student', 'teacher', 'parent', 'admin'];

On your component.html, you will bind the <select> element to role, which is the model. Then, we use *ngIf which will conditionally show/hide the subsequent based on the selected role. In this scenario, it will only show if the user selects student or teacher.

<select matInput [(ngModel)]="role" id="userType" class="fullWidth">
  <option value="" disabled>---Select User---</option>
  <option *ngFor = "let user of users" [ngValue]="user">{{user}}</option>
</select>

<select *ngIf="role === 'student' || role === 'teacher'" matInput id="className" class="fullWidth">
  <option value="" disabled>---Select class---</option> 
  <option *ngFor = "let class of classes"[ngValue]="class">{{class}}</option>
</select>

---

EDIT 1: From OP -

Thanks for your reply !!, but the above isn't working for me or maybe I'm doing something wrong. I found the answer though:

 <select matInput  id="userType" class="fullWidth" (change)="onChange()" [ngModel]="defaultUser">
            <option value="" disabled>---Select User---</option>
            <option value="teacher">Teacher</option>
            <option value="parent">Parent</option>
            <option value="student">Student</option>
            <option value="admin">Admin</option>
 </select> 

and in the .ts file i added the onChange() as :

onChange(){
    const userType = document.getElementById("userType");
    const dvClass = document.getElementById("dvClass");
    const dvTeacher = document.getElementById("dvTeacher");
    dvClass.style.display = userType.value == "student" ? "block":"none";
}

but i wanted only the student and the teacher to access the class drop-down. im confused with how to add both the users to the above expression in the onChange() (which is : dvClass.style.display = userType.value == "student" ? "block":"none";)

---

Edit 2:

Here are my proposed changes based on your update. Similar to my initial code, I have made use of 2-way binding. However, I have used the titlecase pipe to transform the values of the options to have the first letter capitalised (instead of manually defining it).

<select matInput [(ngModel)]="role" id="userType" class="fullWidth">
  <option [ngValue]="null" disabled>---Select User---</option>
  <option *ngFor = "let user of users" [ngValue]="user">{{user | titlecase}}</option>
</select>

<br>

<select *ngIf="role === 'student' || role === 'teacher'" matInput id="className" class="fullWidth">
  <option value="" disabled>---Select class---</option> 
  <option *ngFor = "let class of classes"[ngValue]="class">{{class}}</option>
</select>

Updated demo.