Angular 4 - Show and hide components
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>
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>
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>