Toggle Angular Component CSS Class based on Array Values

Question

I'm new to Angular, working on my first app in Angular 8 and I want to toggle a component css class based on an objects array values.

The object is a post (test-data/posts.ts) with an array of likes

export const posts = [{
    id: 1,
    author: {},
    type: 'image',
    media: '',
    repost: 0,
    comments: [],
    likes: [ 1, 2, 3, 4]
}];

So my component typescript is this, to add and remove a like on the post, this is working

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

import { user } from '../test-data/user';
import { posts } from '../test-data/posts';

@Component({
    selector: 'app-feed',
    templateUrl: './feed.component.html',
    styleUrls: ['./feed.component.css'],
})
export class FeedComponent {
    posts = posts;
    user = user;

    liked = false;

    likePost(post) {
        // If post is liked, remove like
        if (this.isLiked(post)) {
            for (let i = 0; i < post.likes.length; i++) {
                if (post.likes[i] === user.id) { post.likes.splice(i, 1); }
            }
        // If not liked add a new like
        } else {
            post.likes.push(user.id);
        }
        // DEBUG: Log post data
        console.log(post);
    }

    isLiked(post) {
        return post.likes.includes(user.id);
    }
}

I can retrieve the object, add/remove likes with the component, but how do I check the array to determine is the post should display as liked or unliked?

My current html template is this, I'd like the to have an extra class "feed-icon-red" if the user id (user.id) appears in the posts like array (post.likes)

<div *ngIf="posts.length">
    <div *ngFor="let post of posts">
        <mat-list>
            <!-- Post Media -->
            <img class="feed-image" [src]="post.media" (dblclick)="likePost(post)"/>

            <!-- Interaction Button Row -->
            <mat-list-item>
                <span>
                    <mat-icon mat-list-icon class="ti-heart" [class.feed-icon-red]="" (dblclick)="likePost(post)"></mat-icon>
                </span>
            </mat-list-item>
        </mat-list>
    </div>
</div>

EDIT: I'd like to check for a specific value within the array to set the class. e.g. if (post.likes.includes(1)) set the icon class to 'feed-icon-red'

@PrashantPimpale no I don't want to display count, I just want to add a class to change the color to red — Arran, Jul 14 '19 at 06:52
use [`ngClass`](https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html) as demonstrated [here](https://stackoverflow.com/questions/37090877/dynamic-classname-inside-ngclass-in-angular-2/37091329) — Yaelet, Jul 14 '19 at 06:53
@Musa Okay then check ngClass. Try and let us know working or not — Prashant Pimpale, Jul 14 '19 at 06:57
I can use ngClass to check for keys and array length (post.likes) but I need to check for a specific value within the array which I can't find a way to do. post.likes.includes(user.id) results in "Cannot read property includes of undefined", how else can I check for a value within the array @Yaelet — Arran, Jul 14 '19 at 06:59
Check this:https://stackblitz.com/edit/angular-darfno-kurfmj — Prashant Pimpale, Jul 14 '19 at 07:02
you are getting an error saying that `likes` is undefined. Could it be that one of your posts doesn't have a `likes` member? if so, consider using a more complex query `post.likes && post.likes.includes(user.id)`. — Yaelet, Jul 14 '19 at 07:05
Thanks @PrashantPimpale I implemented [class.feed-icon-red]="isLiked(post)" within my html and it works — Arran, Jul 14 '19 at 07:11
@Yaelet there was one post class with a likes array missing, thanks for the tip — Arran, Jul 14 '19 at 07:16

score 1 · Accepted Answer · answered Jul 14 '19 at 07:11

You can use ngClass:

[ngClass]="isLiked(post) ? 'feed-icon-red' : ''"

Or even this is also working:

[class.feed-icon-red]="isLiked(post)"

HTML Code:

<div *ngIf="posts.length">
    <div *ngFor="let post of posts">
        <mat-list>
            <!-- Post Media -->
            <img  width=300 class="feed-image" [src]="post.media" (dblclick)="likePost(post)"/>
            <!-- Interaction Button Row -->
            <mat-list-item>
              {{isLiked(post)}}
                <span [ngClass]="isLiked(post)? 'feed-icon-red': ''"> Test
                    <mat-icon mat-list-icon class="ti-heart"  (dblclick)="likePost(post)"></mat-icon>
                </span>
            </mat-list-item>
        </mat-list>
    </div>
</div>

Working-Demo

score 0 · Answer 2 · answered Jul 14 '19 at 07:17

There seems to be an issue with your logic to determine whether a post has been liked or not.

Here, give this a try:

import { Component } from '@angular/core';
import { user } from './test-data/user';
import { posts } from './test-data/posts';

/**
 * @title Basic list
 */
@Component({
  selector: 'list-overview-example',
  templateUrl: 'list-overview-example.html',
  styleUrls: ['list-overview-example.css'],
})
export class ListOverviewExample {
  posts = posts;
  user = user;

  liked = false;

  likePost(post) {
    // If post is liked, remove like
    if (this.isLiked(post)) {
      post.likes.splice(post.likes.indexOf(this.user.id), 1);
      // If not liked add a new like
    } else {
      post.likes.push(this.user.id);
    }
    // DEBUG: Log post data
    console.log(post);
  }

  isLiked(post) {
    return post.likes.includes(this.user.id);
  }
}

And in your template:

<div *ngIf="posts.length">
    <ul>
    <li *ngFor="let post of posts">
        <!-- Post Media -->
        <img class="feed-image" [src]="post.media" (dblclick)="likePost(post)"/>
    <!-- Interaction Button Row -->
    <span [class.feed-icon-red]="post.likes.includes(user.id)" (dblclick)="likePost(post)">❤</span>
    </li>
  </ul>
</div>

Here's a Working Sample StackBlitz for your ref.

Toggle Angular Component CSS Class based on Array Values

2 Answers2