Utilize ngClass for every individual section

Question

Utilize ngClass for every individual section

I have completed the implementation of all UI components, which are visually appealing.

Here is the data structure I am using:

public filters = [
        {
            tag: 'Year',
            label: 'year',
            items: [2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020]
        },
        {
            tag: 'Cash On Delivery',
            label: 'cash',
            items: this.truthyFalsy
        },
        {
            tag: 'In stock',
            label: 'stock',
            items: this.truthyFalsy
        }
    ];

Below is a snippet of my HTML code:

<div *ngFor="let filter of filters">
        <p ><small>{{filter?.tag}}</small></p>
        <div class="line"></div>
        <div>
            <div class="item" *ngFor="let item of filter?.items">
                <button class="btn" [ngClass]="{'btn-active-1':labelType1 === filter.label  && selectedItem === item }"
                    (click)="select(item,filter?.label)">{{item}}</button>
            </div>
        </div>
    </div>

The goal is to make the selected buttons active. Here are the specific requirements:

In the year section, only one button should be active.
In the Cash On Delivery section, only one button should be active.
In the In stock section, only one button should be active.

Each section must have at least one active button using ngClass.

css angular typescript ng-class

Answer 1

Answer №1

View the live DEMO

By clicking on a button, you can pass the item index and label to distinguish different sections and their buttons.

 /* Create an empty object called selectedItem where we can set key (label)
 and value (index) on each button click. With key (label) and value (index),
 we can identify the selected button of each section */
 selectedItem = {};

The select method toggles the button: if the user clicks on an already selected button, it will be deselected; otherwise, it will become selected.

  select(index, label) {
    if(this.selectedItem[label] === index) {
      delete this.selectedItem[label]
    } else {
      this.selectedItem = {
      ...this.selectedItem,
     [label]: index
   };
  }
}

In the template, all you need to do is pass the index and label from the select method and add a conditional active class by using

[class.btn-active-1]="selectedItem[filter.label] === i"

 <div *ngFor="let filter of filters;">
    <p ><small>{{filter?.tag}}</small></p>
    <div class="line"></div>
    <div>
      <div class="item" *ngFor="let item of filter?.items; let i=index">
        <button class="btn" [class.btn-active-1]="selectedItem[filter.label] === i"
          (click)="select(i, filter?.label)">{{item}}</button>
      </div>
    </div>
  </div>

Answer 2

View the live DEMO

By clicking on a button, you can pass the item index and label to distinguish different sections and their buttons.

 /* Create an empty object called selectedItem where we can set key (label)
 and value (index) on each button click. With key (label) and value (index),
 we can identify the selected button of each section */
 selectedItem = {};

The select method toggles the button: if the user clicks on an already selected button, it will be deselected; otherwise, it will become selected.

  select(index, label) {
    if(this.selectedItem[label] === index) {
      delete this.selectedItem[label]
    } else {
      this.selectedItem = {
      ...this.selectedItem,
     [label]: index
   };
  }
}

In the template, all you need to do is pass the index and label from the select method and add a conditional active class by using

[class.btn-active-1]="selectedItem[filter.label] === i"

 <div *ngFor="let filter of filters;">
    <p ><small>{{filter?.tag}}</small></p>
    <div class="line"></div>
    <div>
      <div class="item" *ngFor="let item of filter?.items; let i=index">
        <button class="btn" [class.btn-active-1]="selectedItem[filter.label] === i"
          (click)="select(i, filter?.label)">{{item}}</button>
      </div>
    </div>
  </div>

Answer 3

Answer №2

Check out the demo I put together for you on Stackblitz.

If you want to select items by index and have a default selected item, you can use let i = index. Give it a shot to choose the first item in each group:

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  labelType1: string = "";
  public selectedItem = { year : 0, cash: 0, stock: 0  };
  truthyFalsy: any[] = [true, false];
  public filters = [
    {
      tag: 'Year',
      label: 'year',
      items: [2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020]
    },
    {
      tag: 'Cash On Delivery',
      label: 'cash',
      items: this.truthyFalsy
    },
    {
      tag: 'In stock',
      label: 'stock',
      items: this.truthyFalsy
    }
  ];

  select(index, label){
    this.selectedItem[label] = index;
  }
}
}

app.component.html

<div *ngFor="let filter of filters">
    <p><small>{{filter?.tag}}</small></p>
    <div class="line"></div>
    <div>
        <div class="item" *ngFor="let i=index; let item of filter?.items">
            <button class="btn" [ngClass]="{'btn-active-1': selectedItem[filter.label] === i}" (click)="select(i,filter?.label)">{{item}}</button>
        </div>
    </div>
</div>

Answer 4

Check out the demo I put together for you on Stackblitz.

If you want to select items by index and have a default selected item, you can use let i = index. Give it a shot to choose the first item in each group:

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  labelType1: string = "";
  public selectedItem = { year : 0, cash: 0, stock: 0  };
  truthyFalsy: any[] = [true, false];
  public filters = [
    {
      tag: 'Year',
      label: 'year',
      items: [2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020]
    },
    {
      tag: 'Cash On Delivery',
      label: 'cash',
      items: this.truthyFalsy
    },
    {
      tag: 'In stock',
      label: 'stock',
      items: this.truthyFalsy
    }
  ];

  select(index, label){
    this.selectedItem[label] = index;
  }
}
}

app.component.html

<div *ngFor="let filter of filters">
    <p><small>{{filter?.tag}}</small></p>
    <div class="line"></div>
    <div>
        <div class="item" *ngFor="let i=index; let item of filter?.items">
            <button class="btn" [ngClass]="{'btn-active-1': selectedItem[filter.label] === i}" (click)="select(i,filter?.label)">{{item}}</button>
        </div>
    </div>
</div>

Utilize ngClass for every individual section

Answer №1

Answer №2

Similar questions

Implementing asynchronous validation in Angular 2

“What is the process of setting a referenced object to null?”

Instead of modifying the selected class, jQuery generates inline styles

Ways to access nested div children without using identifiers

Adding custom TypeScript classes to an Electron project is a straightforward process that allows developers to enhance their

Ensure chip component (div) dynamically resizes its width to accommodate varying lengths of child text elements

The left border is failing to appear on the Td element

Guide on how to show the index value of an array on the console in Angular 2

forEach was unable to determine the appropriate data types

Enhance your SVG progress circle by simply selecting checkboxes

What are the ideal scenarios for implementing routing in Angular?

The AppModule's CanLoad protector

rendering google charts using jade template

Dealing with multiple validation error messages in Angular Material 2

What could be the reason my dropdown menu is not appearing on hover?

Create animated changes in height for a mdDialog as elements are shown or hidden

The error message "SyntaxError: Cannot use import statement outside a module" popped up while working with discord.js, typescript, heroku

jquery mobile integrated seamlessly between image1 and image2

Angular's two-way binding feature does not seem to be updating the value for date

Choosing all components except for one and its descendants