Click on an element in Angular to toggle it

Question

Click on an element in Angular to toggle it

A function in my codebase is responsible for toggling a specific section within a div element.

Currently, there are a total of 3 sections available in the app.

The functionality is implemented in the app.component.ts file:

show = false;


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

In the app.component.html file:

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

As it stands now, all three sections toggle visibility when clicking on any button.

Is there a way to modify this behavior so that only the corresponding section toggles when clicking on its respective button with *ngIf="show"?

angular typescript angular9

Answer 1

Answer №1

Here is the code snippet you are looking for: 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>

Answer 2

Here is the code snippet you are looking for: 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>

Answer 3

Answer №2

To simplify your controller code, consider exploring the use of Angular's TemplateRef to create distinct templates for different sections.

Templates:

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

In your controller, assign the desired <ng-template> block to the template variable in order to display it.

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

See a live demo here: Stackblitz

Answer 4

To simplify your controller code, consider exploring the use of Angular's TemplateRef to create distinct templates for different sections.

Templates:

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

In your controller, assign the desired <ng-template> block to the template variable in order to display it.

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

See a live demo here: Stackblitz

Answer 5

Answer №3

To manage the visibility of different sections, you can create a specialized class with properties for each section:

class SectionVisibilityManager {
     private boolean _section1 = false;
     private boolean _section2 = false;
     private boolean _section3 = false;

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

     public get section1(): boolean {
         return this._section1;
     }

     public get section2(): boolean {
         return this._section2;
     }

     public get section3(): boolean {
         return this._section3;
     }
}

You can then use getters to access these properties in your template:

<div>
   <div *ngIf="visibilityManager.section1">
     <div>One</div>
   </div>
   <button type="button" toggle()"></button>
</div>

<div>
    <div *ngIf="visibilityManager.section2">
      <div>Two</div>
    </div>
    <button type="button" toggle()"></button>
</div>

<div>
    <div *ngIf="visibilityManager.section3">
      <div>Three</div>
    </div>
    <button type="button" toggle()"></button>
</div>

In your component, make sure to define an instance of the SectionVisibilityManager object:

public visibilityManager: SectionVisibilityManager = new SectionVisibilityManager();

This approach allows you to have a centralized logic for managing section visibility within your application.

Alternatively, you can turn this class into a service and inject it where needed.

IMPORTANT: If your sections are dynamically created, consider using an array in the manager class along with methods for toggling specific indices and accessing elements by index.

Answer 6

To manage the visibility of different sections, you can create a specialized class with properties for each section:

class SectionVisibilityManager {
     private boolean _section1 = false;
     private boolean _section2 = false;
     private boolean _section3 = false;

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

     public get section1(): boolean {
         return this._section1;
     }

     public get section2(): boolean {
         return this._section2;
     }

     public get section3(): boolean {
         return this._section3;
     }
}

You can then use getters to access these properties in your template:

<div>
   <div *ngIf="visibilityManager.section1">
     <div>One</div>
   </div>
   <button type="button" toggle()"></button>
</div>

<div>
    <div *ngIf="visibilityManager.section2">
      <div>Two</div>
    </div>
    <button type="button" toggle()"></button>
</div>

<div>
    <div *ngIf="visibilityManager.section3">
      <div>Three</div>
    </div>
    <button type="button" toggle()"></button>
</div>

In your component, make sure to define an instance of the SectionVisibilityManager object:

public visibilityManager: SectionVisibilityManager = new SectionVisibilityManager();

This approach allows you to have a centralized logic for managing section visibility within your application.

Alternatively, you can turn this class into a service and inject it where needed.

IMPORTANT: If your sections are dynamically created, consider using an array in the manager class along with methods for toggling specific indices and accessing elements by index.

Answer 7

Answer №4

You have the option to utilize [ngSwitch] for resolving this issue. Explore the stackblitz link below for more details.

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

Visit stackblitz for live demo

Learn more about NgSwitch on Angular official documentation

Answer 8

You have the option to utilize [ngSwitch] for resolving this issue. Explore the stackblitz link below for more details.

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

Visit stackblitz for live demo

Learn more about NgSwitch on Angular official documentation

Click on an element in Angular to toggle it

Answer №1

Answer №2

Answer №3

Answer №4

app.component.html

app.component.ts

Similar questions

What methods can I use to dismantle an Angular component?

The process of automatically formatting Typescript has transformed into an unfortunate auto-discarding action

Tips for Disabling ML5 Posenet

Is it possible to directly parse a multipart/mixed response without needing to first convert it into a string?

Flex-Layout in Angular - The Ultimate Combination

Exploring Angular 9: Experimenting with iterating over a collection of objects and performing validations

Creating a function in Angular to locate each object based on its ID

Exporting Arrays in Ionic Angular with Typescript is an essential feature

Can one extract a property from an object and assign it to a property on the constructor?

What is the best way to organize objects based on their timestamps?

What is the way to imitate a variable with Jasmine Spy?

Utilizing external clicks with Lit-Elements in your project

"Sequencing http.get requests in Angular 2 using

When executing the "node app.js" command, the <app-root> element appears empty in the browser

The use of the cache-control request header field is prohibited when attempting to sign in with an Angular frontend during the

Unresolved HTTP header problem with Angular 4 and Siteminder

Utilizing TypeScript interfaces with additional parameter object members does not result in the anticipated compilation error

Angular failing to retrieve URL parameters correctly

I am having trouble accessing my JSON data via HTTP get request in Angular 2 when using TypeScript

Type 'ɵɵComponentDeclaration' must be provided with at least 7 but no more than 8 type arguments