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.

https://i.sstatic.net/hxJQr.png

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

Error encountered in React component: TypeScript TS2339 states that the property 'xyz' is not found on type 'IntrinsicAttributes...'

Steps for sending data from Angular2 or Angular4 to a Node.js server and saving it in a MySQL database:1. In your

Observer function simulated by SinonStub

Arrangement of items in Angular 2 array

I am interested in creating a design where two DIVs are layered on top of each other with one having transparency, allowing visibility through to the background DIV. This can be achieved using a combination of

What is the best way to implement switchMap when dealing with a login form submission?

Looking for a way to add a CSS effect that reveals another image or text when hovering over an image?

Neglecting to review the CSS - embracing ejs layouts in Express

Is the second parameter of the function being used as a condition?

Integrating Angular with Django using the REST framework

What is the best way to eliminate unwanted white space at the top of the page?

Struggling to concentrate on the branding

Bypass URL Routing for a specific route in Angular 8 and Apache

Issue with CSS transition bug in Offcanvas on Android version 4.1.x

Exploring the intricacies of defining Vue component props in TypeScript using Vue.extend()

Struggling to format boxes or display images on your WordPress website?

Displaying a child component as a standalone page rather than integrating it within the parent component's body

When the next button is clicked, the button content disappears

What are the steps to fix the error stating that 'loginError.data' is an unknown type?

Steps to validate the execution of the ngCopy function in an Angular 6 unit test