ngIf show based on dropdown value - Angular 2

Question

I have one parent component that contains couple different components. In "project" component (child), I have dropdown from which user can pick any available project.

What I need is other components to be created with ngIf when any project is selected from dropdown.

As you can see from here, I already placed ngIf in parent component for components that I want to be affected.

<div class="tab tab-style">

<ribbon-item style="width:10%;" [title]="'Load/Save Project'">
    <project></project>
</ribbon-item>
<div class="ribbon-divider"></div>

<ribbon-item style="width:12%;" [title]="'Project settings'" *ngIf="showComponent">
    <project-settings></project-settings>
</ribbon-item>
<div class="ribbon-divider"></div>

<ribbon-item style="width:23%;" [title]="'Environment'" *ngIf="showComponent">
    <environment></environment>
</ribbon-item>
<div class="ribbon-divider"></div>

<ribbon-item class="pd-width" [title]="'Project dates'" *ngIf="showComponent">
    <project-dates></project-dates>
</ribbon-item>
<div class="ribbon-divider"></div>

And this is "project" component with dropdown.

<div class="button-wrapper">
<select #projectSelect class="custom-select custom-select-project" (change)="loadProject(projectSelect.value)">
    <option selected disabled>Open projects</option>
    <option *ngFor="let project of projects" [value]=project.id>{{project.name}}</option>
</select>

<button class="btn-main" (click)="createNewProject()">New project</button>
<button class="btn-main">Save project</button> 
<button class="btn-main">Save as</button>

How can I check when user pick any project, and then show other components in parent.

Answer 1

You can use output from your project component. The flow will be as defined below:

Step-1. change in parent component for project component as :

 `<project (projectSelected) = "projectSelected($event)"></Project>`

Step-2: In your project component defined the output variable as :

@Output() projectSelected: EventEmitter<number> = new EventEmitter<number>();

Step-3: In loadProject add below line :

this.projectSelected.emit(id); // selected value from dropdown

step-4 : In parent component defined function as :

projectSelected(projectId) {
 this.showComponent = true;
}