how to switch between components in angular using ngSwitch

Question

I have two child login form components named student and Staff in a parent's components, and I will like to display one of them in the parent's components once the user selects the user type.

Please i have no idea how to implement it here.

<div class="parent-component">
             <app-staff></app-staff>
            <app-student></app-student>

</div>

Answer 1

Store the value of the user selection in a variable. In the below code snippet I have used a select tag for user to select the user type. Also I have used ngModel (template driven form) for assigning the user selection to a variable called userType.

I am using the userType in the ngSwitch attribute on parent div. Then using the structural directive *ngSwitchCase we can drive which component has to be displayed as below -

<select [(ngModel)]="userType">
  <option value="staff">Staff</option>
  <option value="student">Student</option>
</select>

<div class="parent-component" [ngSwitch]="userType">
  <app-staff *ngSwitchCase="userType==='staff'"></app-staff>
  <app-student *ngSwitchCase="userType==='student'"></app-student>
</div>

More on NgSwitch. Alternatively we can also use *ngIf to achieve the same.