Angular hide div and show div on button click.

Angular hide div and show div on button click. How to hide an HTML element via a button click in AngularJS? AngularJS show or hide div on click example. In angularjs ng-show, ng-hide options are used to show or hide elements on click based on our requirements.

HTML

<div *ngIf="currDiv == 'A'" class="myDiv">
    Div A
</div>

<div *ngIf="currDiv == 'B'" class="myDiv">
    Div B
</div>

<div *ngIf="currDiv == 'C'" class="myDiv">
    Div C
</div>

<div *ngIf="currDiv == 'D'" class="myDiv">
    Div D
</div>

<div *ngIf="currDiv == 'E'" class="myDiv">
    Div E
</div>


<button type="button" (click)="ShowDiv('A')">Show A</button>
<button type="button" (click)="ShowDiv('B')">Show B</button>
<button type="button" (click)="ShowDiv('C')">Show C</button>
<button type="button" (click)="ShowDiv('D')">Show D</button>
<button type="button" (click)="ShowDiv('E')">Show E</button>

.ts

import { Component, OnInit } from '@angular/core';

declare var AOS: any;
@Component({
  selector: 'app-my-page',
  templateUrl: './my-page.component.html',
  styleUrls: ['./my-page.component.scss']
})
export class MyPageComponent implements OnInit {

  currDiv: string = 'A';
  ShowDiv(divVal: string) {
    this.currDiv = divVal;
  }

  constructor() { }

  ngOnInit(): void {
    AOS.init();
  }
}

Angular 8 hide divs and show div on button click.

Example of Toggle a Div on Click on a Button using Angular. <button (click)=toggleDisplayDiv() >Toggle display Div</button>. <div [hidden]=”isShowDiv”>This Div is from Java </ div>/div>. Hide and show div in Angular, show one div and hide another div in angular 4.

Add active class to current selection to attached active class.

To add an active class to the when it is clicked and its corresponding divVal matches the currDiv value, you can use Angular’s ngClass directive. You’ll need to define a CSS class for the active state, and then conditionally apply that class using ngClass. Here’s how you can do it:

HTML

<div class="dummyClass" (click)="ShowDiv('A')" [ngClass]="{'activeBtn': currDiv === 'A'}"></div>
<div class="dummyClass" (click)="ShowDiv('B')" [ngClass]="{'activeBtn': currDiv === 'B'}"></div>
<div class="dummyClass" (click)="ShowDiv('C')" [ngClass]="{'activeBtn': currDiv === 'C'}"></div>
<div class="dummyClass" (click)="ShowDiv('D')" [ngClass]="{'activeBtn': currDiv === 'D'}"></div>
<div class="dummyClass" (click)="ShowDiv('E')" [ngClass]="{'activeBtn': currDiv === 'E'}"></div>

Define an active CSS class in your component’s CSS or in a global stylesheet. For example, let’s call it “activeBtn.” Update your HTML to use the ngClass directive to conditionally apply the “active-div” class when the currDiv matches the divVal:

Repeat the same process for other elements that you want to make active when their respective divVal values match currDiv. Just make sure to replace ‘A’ with the appropriate divVal for each. Here’s an example with another that should be active when divVal is ‘B’:

Hide and show div based on click function.

You will learn how to show and hide div by clicking on the Button in the Angular application using the (click)=”ShowDiv()” method.

---

Learn HTML/CSS from W3 School Website

• Angular