Angular 4 - Show and hide components

angular angular-template
Eladerezador picture Eladerezador · Oct 30, 2017 · Viewed 62.9k times · Source

I have the next components in the same html file.

<app-form></app-form>
<app-results [hidden]="isOn"></app-results>
<app-contact-primary [hidden]="!isOn"></<app-contact-primary>
<app-contact-second [hidden]="!isOn"></app-contact-second>

In component "app-form", I have two buttons:

<button pButton label="Contact" (click)="">Contact</button>
<button pButton label="Results" (click)="">Results</button>

If I do click on button "Contact" must to show the component "app-contact-primary" and "app-contact-second" and to hide the "app-results" component.

But if I do click in button "Results" must to hide components "app-contact-primary" and "app-contact-second" and show "app-results" component.

How I could do it?

Thanks

Answer

Fateh Mohamed picture Fateh Mohamed · Oct 30, 2017

you can use hidden proprty or ngIf directive :

<app-form></app-form>
<app-results *ngIf="isOn"></app-results>
<app-contact-primary *ngIf="!isOn"></<app-contact-primary>
<app-contact-second *ngIf="!isOn"></app-contact-second>

<button pButton label="Contact" (click)="isOn= false">Contact</button>
<button pButton label="Results" (click)="isOn= true">Results</button>

Related questions

Angular: conditional class with *ngClass

What is wrong with my Angular code? I am getting: Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ... HTML <ol class="breadcrumb"> <li *ngClass="{active: step==='step1'}" (click)="step='step1; '">Step1</li&…

Read More
How to use *ngIf else?

I'm using Angular and I want to use *ngIf else (available since version 4) in this example: <div *ngIf="isValid"> content here ... </div> <div *ngIf="!isValid"> other content here... </div> How can I …

Read More
What is the equivalent of ngShow and ngHide in Angular 2+?

I have a number of elements that I want to be visible under certain conditions. In AngularJS I would write <div ng-show="myVar">stuff</div> How can I do this in Angular 2+?

Read More