3

I want show one element on button click and hide another element on same button click. Here is my code

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.

risingTide
  • 1,754
  • 7
  • 31
  • 60
vedankita kumbhar
  • 1,468
  • 6
  • 19
  • 42

6 Answers6

8

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>
Sivakumar Tadisetti
  • 4,865
  • 7
  • 34
  • 56
  • Thank u so much.. :) – vedankita kumbhar Aug 11 '18 at 08:56
  • 1
    @Javascript, even you needn't make a function just: < button (click)="showMainContent=!showMainContent">click< /button> – Eliseo Aug 11 '18 at 10:43
  • @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 – Sivakumar Tadisetti Aug 11 '18 at 12:17
  • Instead of using ternary you can simply write ShowHideButton() { this.showMainContent = !this.showMainContent; } – Vijay Barot Aug 13 '18 at 05:23
  • @VijayBarot yeah as **Eliseo** said in the comments of this answer – Sivakumar Tadisetti Aug 13 '18 at 05:24
  • Hi @JavascriptLover-SKT can you please help me in this. https://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. – vedankita kumbhar Aug 21 '18 at 11:42
  • @vedankitakumbhar Yeah, I already started look into your problem :-), 5 mins back forked your code from Stackblitz posted here https://stackoverflow.com/questions/51947534/multiple-conditions-in-ngif-in-angular-6 – Sivakumar Tadisetti Aug 21 '18 at 11:47
3

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.

Lazar Ljubenović
  • 18,976
  • 10
  • 56
  • 91
3

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>
Sanoj_V
  • 2,936
  • 1
  • 12
  • 28
  • Hi @Sanjog_V can you please help me in this. https://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. – vedankita kumbhar Aug 21 '18 at 11:41
1

Just reasign the variable with the opposite value of it 

ShowButton() {
  this.showSelected = !this.showSelected;
}
Sven
  • 357
  • 4
  • 10
0

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

DEMO

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
0

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.

fedexo
  • 62
  • 5