Menu
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
782
Add a ngIf directive to comp1 to show or hide the component.
The Angular ngIf directive works essentially as an if statement for HTML, adding this missing feature to the language under the form of the special ngIf attribute. In this example, the container div will only be shown to the user if the user is logged in, otherwise the whole content of the div is not visible.
How do you hide a button after it is clicked in angular? First set up a Boolean variable for the show hide like public show:boolean = false. Next, set up a function that is tied to the click event of a button or some event on the dom.
*ngIf will not hide the element, if the condition evaluates true , so setting the variable isButtonVisible to true is sufficient. Just change the (click) event code to a toggle function like (click)="this. isButtonVisible = ! this.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
