I want show one element on button click and hide another element on same button click. Here is my code
I am able to show sub div but I want to hide that element which contain "show sub content" button on same button click. Please help.
Add a comment
|
6 Answers
You can do like below with single function, working example is here on the Stackblitz
In the component file
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
showMainContent: Boolean = true;
constructor() {}
ShowHideButton() {
this.showMainContent = this.showMainContent ? false : true;
}
}
And in the template file
<div *ngIf="!showMainContent">
<button (click)="ShowHideButton()">Show Sub content</button>
My Main content
</div>
<div *ngIf="showMainContent">
Sub Content
<button (click)="ShowHideButton()">Show Main Content</button>
</div>
answered Aug 11, 2018 at 8:13
Sivakumar Tadisetti
5,0617 gold badges39 silver badges62 bronze badges
7 Comments
vedankita kumbhar
Thank u so much.. :)
Eliseo
@Javascript, even you needn't make a function just: < button (click)="showMainContent=!showMainContent">click< /button>
Sivakumar Tadisetti
@Eliseo yeah that's also correct, but if we want to execute some lines of code, we should write a function. And your suggestion is super fine and simple
Vijay Barot
Instead of using ternary you can simply write ShowHideButton() { this.showMainContent = !this.showMainContent; }
Sivakumar Tadisetti
@VijayBarot yeah as Eliseo said in the comments of this answer
|
Determine whether to show or hide based on the current state. If it's currently true, then make it false. If it's currently false, then make it true.
ToggleButton() {
this.showSelected = !this.showSelected;
}
Here's the demo.
Comments
You can also do it like this way. No need to initialize showMainContent variable.
<div *ngIf="!showMainContent">
<button (click)="showMainContent=!showMainContent">Show Sub content</button>
My Main content
</div>
<div *ngIf="showMainContent">
Sub Content
<button (click)="showMainContent=!showMainContent">Show Main Content</button>
</div>
1 Comment
vedankita kumbhar
Hi @Sanjog_V can you please help me in this. stackblitz.com/edit/angular-9cuejm I have added more sub divs which will be hidden first then click on eash button for that sub section related section will open and main section will hide and vise versa. can you please help.
Just reasign the variable with the opposite value of it
ShowButton() {
this.showSelected = !this.showSelected;
}
Comments
Two suggestions,
Initalize while you declare the variable instead of assigning in constructor,
showSelected: boolean = false;
Inside the function toggle the value using !
ToggleButton() {
this.showSelected = !this.showSelected;
}
Comments
Instead of writing ngIf for n time, you could also write ngIf else:
<div *ngIf="isLoggedIn; else loggedOut">
Welcome back, friend.
</div>
<ng-template #loggedOut>
Please friend, login.
</ng-template>
or ngIf else then syntax:
<ng-container
*ngIf="isLoggedIn; then loggedIn; else loggedOut">
</ng-container>
<ng-template #loggedIn>
<div>
Welcome back, friend.
</div>
</ng-template>
<ng-template #loggedOut>
<div>
Please friend, login.
</div>
</ng-template>
The choice depends in how many check you need to do.
Comments
