Angular 4 - Show and hide components

Question

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

score 28 · Accepted Answer · edited May 11 '21 at 12:00

28

You can use hidden property 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>

edited May 11 '21 at 12:00

Dan Atkinson

11,391
14
81
114

answered Oct 30 '17 at 10:34

Fateh Mohamed

20,445
5
43
52

1

Yes, I tried it before but nothing happened maybe I have to pass "isOn" as parameter at component , from son to father and to father to son, the four components are inside the component "app-main", this would be the component father. – Eladerezador Oct 30 '17 at 11:52
Would this trigger the ngcycle events after condition gets satisfied? – Silent_Coder Apr 27 '18 at 06:38
Buy doing this we have to hookup our own cycle of navigation to the entire application the default back will not work. Is this okay to have the entire application follow this structure of showing and hiding components ? – Shahabaz Jun 04 '19 at 04:50

score 1 · Answer 2 · edited May 11 '21 at 12:01

1

Just make the variable true and false

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

edited May 11 '21 at 12:01

Dan Atkinson

11,391
14
81
114

answered Oct 30 '17 at 10:33

Sachila Ranawaka

39,756
7
56
80

score 1 · Answer 3 · edited May 11 '21 at 12:02

Just using it

Typescript:

public show: boolean = false;
public buttonName: any = true;

toggle() {
    this.show = !this.show;
    if(this.show)
        this.buttonName = false;
    else
        this.buttonName = true;
}

HTML:

<div *ngIf="show">
<textarea #todoitem class="></textarea>
</div>
<button type="button" (click)="addItem('status')">Add</button>
<button type="button" (click)="toggle()">Close</button>
<div *ngIf="buttonName">
<a (click)="toggle()"><i class="fa fa-plus text-white"></i></a>
</div>

Angular 4 - Show and hide components

3 Answers3