Passing function as a condition inside [ngClass] - Angular 7

Question

I want to bind a result of a function inside my [ngClass] condition, but it's simply not doing anything.

HTML

<div [ngClass]="{hover': check(token.ids)}" *ngFor="let tokens of info.data">

I trying to return a boolean from the function and nothing happens, but When I log it inside the console I receiving true or false value depending on the passed elements.

check(tokens) {
    tokens.forEach(token => {
      if (token.id === this.currentToken) {
        return true
      }
    });
  }

`return true` returns true from the function passed to `forEach`, not the `check` function. Instead return the result of calling `some` on `tokens`. — Heretic Monkey, May 13 '19 at 14:48
Possible duplicate of [What does \`return\` keyword mean inside \`forEach\` function?](https://stackoverflow.com/questions/34653612/what-does-return-keyword-mean-inside-foreach-function) — Heretic Monkey, May 13 '19 at 14:49
as @HereticMonkey said, but you also need to check your variable names : the loop declares a `tokens` while you pass in a `token`. — , May 13 '19 at 14:49
@HereticMonkey Can you please write a small example. Thank you — Igor.ro, May 13 '19 at 14:50
Please read the answers to the duplicate, and the answers to [Can forEach in JavaScript make a return?](https://stackoverflow.com/q/32041912/215552) — Heretic Monkey, May 13 '19 at 14:52
Possible duplicate of [Short circuit Array.forEach like calling break](https://stackoverflow.com/questions/2641347/short-circuit-array-foreach-like-calling-break) — Friso Hoekstra, May 13 '19 at 15:02

hafridi · Answer 1 · 2019-05-13T14:53:00.540

1

 check(tokens) {
    let res = false;
    tokens.forEach(token => {
       if (token.id === this.currentToken) {
         res = true
       }
    });
    return res;
 }

Your check function is not returning a value and it will return undefined as a value. So you could do it this way where you are returning back value by declaring it in the function..

edited May 13 '19 at 14:53

answered May 13 '19 at 14:51

hafridi

258
3
9

1

Kindred spirit :-) – Friso Hoekstra May 13 '19 at 14:52

Friso Hoekstra · Accepted Answer · 2019-05-13T15:08:50.163

0

Short circuit Array.forEach like calling break

Try this

  check(tokens) {
      const match = false;
      tokens.forEach(token => {
        if (token.id === this.currentToken) {
          match = true
        }
      });
      return match;
   }

edited May 13 '19 at 15:08

answered May 13 '19 at 14:51

Friso Hoekstra

845
2
9
24

Your code works, but I'm a bit puzzled about the stackoverflow link you posted. Your solution won't short circuit, it will iterate through all tokens even if a match is found. It's better to use `match = tokens.some(token => token.id === this.currentToken)` performance-wise (although marginally if there are few tokens). – ShamPooSham May 14 '19 at 13:21
The point I am trying to make that OP’s function doesn’t return anything because return inside a forEach loop doesn’t actually break the loop. – Friso Hoekstra May 14 '19 at 13:34

Passing function as a condition inside [ngClass] - Angular 7

2 Answers2