Show component based on value - Angular 2

Question

I have different tabs that show ribbons with components. What I need to do is to get these components to hide when project is not loaded(undefined), and show when any of projects from dropdown list is loaded. For that, I need to grab value from project id or name, and then, rest of ribbon components can be shown.

As you can see, this is one of tabs with components:

<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'">
    <project-settings></project-settings>
</ribbon-item>
<div class="ribbon-divider"></div>

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

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

And this is project component from this tab that have project.id :

<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>

Basic question is, how can I set rest of my components (except project.component) to show, based on id value or data form that component? Can I use ngIf or something like that? Thanks for help

Answer 1

Spent some time putting together a very basic plunk for the idea of Inputs and Outputs (the two-way data-binding that Angular employs), with nested components, as well as "transclusion" (where you're including a component within the content area of another component).

That plunk is here.

The highlights are exactly as pezetter described: in the child component that's emitting a value, you'll want to use EventEmitter and Output:

// SelectorComponent
@Output() valueSelected: EventEmitter<number> = new EventEmitter();
selectValue(val: number) {
    this.valueSelected.emit(val);
}

Which will be called on the (change) event of your <select> component.

// SelectorComponent    
<select #selectorElem (change)="selectValue(selectorElem.value)">

The parent then watches for that emitted event

// ParentComponent (template)
<selector design="purple" (valueSelected)="valueChanges($event)"></selector>

// ParentComponent
selectedVal: string;    
valueChanges(val: number) {
    this.selectedVal = val;
}

Finally, you just need your components which will be hiding or showing to do so based on the value that has been outputted (passed up to the parent). In the plunk, there are 2 different ways this is done: an *ngIf on the component itself (alt-child):

// ParentComponent    
<alt-child design="gray" *ngIf="selectedVal">

or an *ngIf within the component (child)

// ParentComponent
<child design="red" [value]="selectedVal" [position]="2">

// ChildComponent
<div [ngClass]="design" *ngIf="value >= position">

This is all certainly more in-depth than it needs to be for understanding, but hopefully some can find playing around with that plunk useful.