角4 - コンポーネントの表示と非表示

Question

同じhtmlファイルに次のコンポーネントがあります。

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

私はボタンをクリックしない場合は、「お問い合わせ」コンポーネントを表示する必要があります「アプリ接触プライマリ」と "：

成分「アプリフォーム」で

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

、私は2つのボタンがありますapp-contact-second "を隠し、" app-results "コンポーネントを非表示にします。

ボタンをクリックすると、「結果」コンポーネントが「app-contact-primary」と「app-contact-second」のコンポーネントを非表示にし、「app-results」コンポーネントを表示する必要があります。

どうすればいいですか？あなたが隠されたりngIfを使用することができます

おかげ

Answer 1

：

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

Answer 2

だけ変数が真と偽作る

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