Angular Toggle only the element click on

Question

I have a method that toggles a div area.

At the moment I have 3 areas

app.component.ts

show = false;


toggle() {
    this.show = !this.show;
}

app.component.html

<div>
    <div *ngIf="show">
      <div>One</div>
    </div>
    <button type="button" toggle()"></button>
</div>

<div>
    <div *ngIf="show">
      <div>Two</div>
    </div>
    <button type="button" toggle()"></button>
</div>

<div>
    <div *ngIf="show">
      <div>Three</div>
    </div>
    <button type="button" toggle()"></button>
</div>

At the moment is will show and hide the 3 sections.

How can I chan it so that it just toggles the div with the *ngIf="show" that I of the button I clicked?

Use three different boolean variables instead of one variable. — Barremian
– Barremian, Commented Jun 2, 2020 at 15:05
That's what I wanted to avoid. Is there a way to pass a parameter in toggle($event) for example and then just toggle(this) ? — joe2020wow
– joe2020wow, Commented Jun 2, 2020 at 15:09
Well if you are binding anything with show (i.e. 1 variable), then changing it will affect everywhere it is bound. If you do not want to do that then you can go with the traditional javascript approach by sending the reference of the div and changing it's style.display to none. — Manish
– Manish, Commented Jun 2, 2020 at 15:42

Charlie Cai · Accepted Answer · 2020-06-02 15:21:13Z

3

I guess below is what you want: app.component.ts

toggleStatus =[false,false,false];

toggle(index:number) {
    this.toggleStatus[index] = !this.toggleStatus[index];
}

app.component.html

<div>
    <div *ngIf="toggleStatus[0]">
      <div>One</div>
    </div>
    <button type="button" toggle(0)"></button>
</div>

<div>
    <div *ngIf="toggleStatus[1]">
      <div>Two</div>
    </div>
    <button type="button" toggle(1)"></button>
</div>

<div>
    <div *ngIf="toggleStatus[2]">
      <div>Three</div>
    </div>
    <button type="button" toggle(2)"></button>
</div>

answered Jun 2, 2020 at 15:21

Charlie Cai

3011 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barremian · Accepted Answer · 2020-06-02 16:31:31Z

If you do not wish to have three different booleans in the controller, you could look into Angular TemplateRef to create different templates for each sections.

Template

<ng-template #templateOne>
  One
</ng-template>

<ng-template #templateTwo>
  Two
</ng-template>

<ng-template #templateThree>
  Three
</ng-template>

<ng-container *ngTemplateOutlet="template"></ng-container>
<br /><br />

<button type="button" (mouseup)="showRef(templateOne)">Show Template 1</button>
<button type="button" (mouseup)="showRef(templateTwo)">Show Template 2</button>
<button type="button" (mouseup)="showRef(templateThree)">Show Template 3</button>
<button type="button" (mouseup)="showRef(null)">Hide all</button>

Now you could set the template variable in the controller to the <ng-template> block that needs to be displayed.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  template: TemplateRef<any>;

  showRef(template: TemplateRef<any>) {
    this.template = template;
  }
}

Working example: Stackblitz

Abdulrahman Hashem · Accepted Answer · 2020-06-02 15:58:17Z

You could have a responsible class for doing this, with a property for each div:

class SectionVisibilityHandler {
     private boolean _div1 = false;
     private boolean _div2 = false;
     private boolean _div3 = false;

     public toggle(idx: number): boolean {
         this['_div' + idx] = !this['_div' + idx];
     }

     public get div1(): boolean {
         return this._div1;
     }

     public get div2(): boolean {
         return this._div2;
     }

     public get div3(): boolean {
         return this._div3;
     }
}

And then, access these properties using getters:

<div>
   <div *ngIf="visibilityHandler.div1">
     <div>One</div>
   </div>
   <button type="button" toggle()"></button>
</div>

<div>
    <div *ngIf="visibilityHandler.div2">
      <div>Two</div>
    </div>
    <button type="button" toggle()"></button>
</div>

<div>
    <div *ngIf="visibilityHandler.div3">
      <div>Three</div>
    </div>
    <button type="button" toggle()"></button>
</div>

And the visibility handler object is defined in your component properties:

public visibilityHandler: SectionVisibilityHandler = new SectionVisbilityHandler();

This way, you can customize your logic behind showing/hiding the div in a specific class and method.

However, you can define this class as a service and inject it inside the component.

NOTE: If your divs are dynamically generated then you need an array in the handling class and two methods, one for toggling a specific index and another one to access arrays' elements by index.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

You could also use [ngSwitch] to solve this problem. (See stackblitz below)

app.component.html

<nav>
  <ul style="cursor: pointer;">
    <li (click)="showTab('tab1')"><a href="#">Tab1</a></li>
    <li (click)="showTab('tab2')"><a href="#">Tab2</a></li>
    <li (click)="showTab('tab3')"><a href="#">Tab3</a></li>
  </ul>
</nav>
<ng-container [ngSwitch]="tab">
  <div *ngSwitchCase="'tab1'">
    <h1>Tab 1</h1>
  </div>
  <div *ngSwitchCase="'tab2'">
    <h1>Tab 2</h1>
  </div>
  <div *ngSwitchCase="'tab3'">
    <h1>Tab 3</h1>
  </div>
</ng-container>

app.component.ts

export class AppComponent  {
  public tab: string = "tab1";

  public showTab(tab: string) {
    this.tab = tab;
  }
}

https://stackblitz.com/edit/angular-ivy-snj6zw

https://angular.io/api/common/NgSwitch

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 2, 2020 at 17:53

Jason White

5,9131 gold badge25 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angular Toggle only the element click on

4 Answers 4

Comments

Comments

Comments

app.component.html

app.component.ts

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

app.component.html

app.component.ts

Comments

Your Answer

Sign up or log in

Post as a guest

Related