Ionic select list of cards

Ionic Framework Ionic Angular
1

I’m trying to select a list of categories on clicking. When I click, the background color must change and if I click another time on the same, the background must return to default color. I need to be able to have a list of all categories if I have not select any categories OR have a list of selected categories

My code for now work like this: if I click on card, the background color change to PINK and if I click another time, it does not change and I can only select one item

page.html

  <ion-grid>
    <ion-row>
        <ion-card
        *ngFor="let tag of tags; index as i;"
        [ngClass]="{ 'use-pink-background': currentSelected == i}"
        (click)="handleClick(i, tag.id)">
          <ion-card-header >
            <ion-item lines="none">
              <p>{{ tag.name_it }}</p>
              <span>{{ tag.id }}</span>
            </ion-item>
          </ion-card-header>
        </ion-card>
    </ion-row>
  </ion-grid>

page.scss

.use-pink-background{
    --ion-background-color: pink;
  }

page.ts

  constructor(private _mysrvTags: TagsService) { }

  ngOnInit() {
    this.loadTags();
  }

   loadTags(){
    this._mysrvTags.getTags().subscribe({
      next: (data:any)=>{
        this.tags = data.taglist
      }
    })
  }


  public currentSelected: Number = null;
  handleClick(i, tag) {
      this.currentSelected = i;
  }

I want to make something like this:

list-categories
list-categories1080×721 47.9 KB

2

Not sure if I fully understood what you said but if you want to just change the background color the only thing you need to do is set currentSelected to null/undefined if it is already selected:

  handleClick(i, tag) {
      this.currentSelected = i === this.currentSelected ? null : i;
  }
3

I solved by doing this way:

page.html :

  <ion-grid>
    <ion-row>
        <ion-card
        *ngFor="let tag of tags; index as i;"
        [ngClass]="{ 'use-pink-background': currentSelected[i]}"
        (click)="handleClick(i, tag.id)">
          <ion-card-header >
            <ion-item lines="none">
              <p>{{ tag.name_it }}</p>
              <span>{{ tag.id }}</span>
            </ion-item>
          </ion-card-header>
        </ion-card>
    </ion-row>
  </ion-grid>

page.ts:

  public tags: any
  loadTags(){
    this._mysrvTags.getTags().subscribe({
      next: (data:any)=>{
        this.tags = data.taglist;
        this.currentSelected = new Array(this.tags.length);
        
      }
    })
  }

  handleClick(index, tag) {
    this.currentSelected[index] = !!!this.currentSelected[index];
  }
4

This solves the problem alright, but it can be costy having to manipulate two arrays in case the number of categories increases. What is the !!! for? Wouldn’t a single bang solve the case?