angular2 ngif selected show required form - html

Question

I'm new to angular2
I want to create a function that when user choose an option the required form wil be show.
This is my html code
<label class="col-md-3 form-control-label" for="select">Zone</label>
<div class="col-md-9">
<select class="form-control" id="select" name="select" size="1">
<option *ngFor="let obj of zone" value={{obj.id}} ngDefaultControl>
{{obj?.name}}</option>
</select>
</div>
Let's say a user chooses Zone 1, then a form for Zone 1 appears. If a user selects Zone 2, then a form for Zone 2 appears. And so on. How can I create those functions in Angular2? I want the form to appeared in the same html page.

Answer 1

You can simply do this with switch cases like below.
My HTML file:
<label class="col-md-3 form-control-label" for="select">Zone</label>
<div class="col-md-9">
<select class="form-control" id="select" name="select" size="1" [(ngModel)]="selected">
<option *ngFor="let obj of zone" value={{obj.id}} ngDefaultControl>
{{obj?.name}}</option>
</select>
</div>
<div [ngSwitch]="selected">
<div *ngSwitchCase="1">
<p>1st Form</p>
</div>
<div *ngSwitchCase="2">
<p>2nd Form</p>
</div>
<div *ngSwitchCase="3">
<p>3rd form</p>
</div>
</div>
My TypeScript file
zone:Array<Object>=[
{id:1,name:"Name One"},
{id:2,name:"Name Two"},
{id:3,name:"Name Three"}
];
selected:number=0;

Answer 2

You can do this:
- Delare a property in component class to hold selected zone
- Then use ngIf base on above property
<label class="col-md-3 form-control-label" for="select">
<div *ngIf="selectedid==1">
Zone1
</div>
<div *ngIf="selectedid==2">
Zone2
</div>
</label>
<div class="col-md-9">
<select class="form-control" id="select" [(ngModel)]="selectedid" name="select" size="1">
<option *ngFor="let obj of zone" value={{obj.id}} ngDefaultControl>
{{obj?.name}}</option>
</select>
</div>