web-dev-qa-db-fra.com

Angular 4 - Afficher et masquer les composants

J'ai les composants suivants dans le même fichier HTML.

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

Dans le composant "app-form", j'ai deux boutons:

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

Si je le fais, cliquez sur le bouton "Contact" pour afficher les composants "app-contact-primary" et "app-contact-second" et pour masquer le composant "app-results".

Mais si je clique sur le bouton "Résultats" doit masquer les composants "app-contact-primaire" et "app-contact-second" et afficher le composant "résultats de l'application".

Comment je pourrais le faire?

Merci

angularangular-template
10
Eladerezador

vous pouvez utiliser hidden ou ngIf:

<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>
12
Fateh Mohamed

Juste l'utiliser

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

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

<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>
1
Vadivel Subramanian

Faites juste la variable vraie et fausse

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