Clash Royale CLAN TAG#URR8PPP

Show one div and hide another div in angular 4

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.

6 Answers
6

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>


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.

true

false

false

true

ToggleButton()
this.showSelected = !this.showSelected;



Here's the demo.

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>


Just reasign the variable with the opposite value of it

ShowButton()
this.showSelected = !this.showSelected;



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

DEMO

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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.