Facing Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

Question

I am trying to assign a random color to the div background using the below example

Random Color

But facing below error:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

You can check-in console of created stackblitz.

I have already tried the below answers:

How to manage Angular2 "expression has changed after it was checked" exception when a component property depends on current datetime
Expression ___ has changed after it was checked

But no luck! Can anyone please look into this and help?

Enea Jahollari · Accepted Answer · 2020-03-18T11:45:02.017

2

One solution for this is to use a directive.

So I created a directive called appRandomColor

Here's the code for it.

import {Directive, ElementRef, Input, OnInit} from '@angular/core';

@Directive({
  selector: '[appRandomColor]'
})
export class RandomColorDirective implements OnInit {

  constructor(private element: ElementRef) { }

  ngOnInit() {
      this.element.nativeElement.style.color = this.getRandomColor();
  }

  getRandomColor() {
    var color = Math.floor(0x1000000 * Math.random()).toString(16);
    return '#' + ('000000' + color).slice(-6);
  }
}

And added it to declarations in AppModule

Then I applied it to the *ngFor loop. And no errors.

<ul>
    <li class="hero" *ngFor="let hero of heroes" appRandomColor>
      {{ hero }}
    </li>
</ul>

I suggest reading more about Angular Change Detection because it will help you understand these errors more. Here are some articles that I find very helpful

Edit

On Component.ts

colorsArray = ['#FF5733', '#DA4323', '#FFB1A0', '#BB523C', '#BB2505', '#DE4922'];

On Component.html

 <li class="hero" *ngFor="let hero of heroes" [appRandomColor]="colorsArray">
      {{ hero }}
 </li>

To add predefined colors array to directive


@Input('appRandomColor') colors: string[]; 

ngOnInit() {
   this.element.nativeElement.style.color = colors[Math.floor(Math.random() * colors.length)]; 
}

edited Mar 18 '20 at 11:45

answered Mar 18 '20 at 08:55

Enea Jahollari

148
2
4

Let me try your answer. – Pathik Vejani Mar 18 '20 at 09:25
Is there any way to assign random color from pre-defined array of colors? – Pathik Vejani Mar 18 '20 at 09:45
Yes, You can do this: ``` js @Input('appRandomColor') color: string; ngOnInit() { // if you want to add random color make if statement here to check if the user has // put color on Input this.element.nativeElement.style.color = color; } ``` on template.html ``` html [appRandomColor]=" 'red' " // or can be the variable ``` – Enea Jahollari Mar 18 '20 at 10:21
Or you can add the pre-defined array of color to appRandomColor directive function . – Enea Jahollari Mar 18 '20 at 10:27
can you pls give me an example to add pre-defined array to directive? – Pathik Vejani Mar 18 '20 at 10:42
I have 6 pre-defined colors, I want to assign from those only – Pathik Vejani Mar 18 '20 at 10:46
Give me the colors, and I edit the answer to your needs. – Enea Jahollari Mar 18 '20 at 10:47
#FF5733, #DA4323, #FFB1A0, #BB523C, #BB2505, #DE4922 – Pathik Vejani Mar 18 '20 at 11:08
any luck for this? – Pathik Vejani Mar 18 '20 at 11:34
getting error: Can't bind to 'appRandomColor' since it isn't a known property of 'div'. (" – Pathik Vejani Mar 18 '20 at 12:15
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/209869/discussion-between-enea-jahollari-and-pathik-vejani). – Enea Jahollari Mar 18 '20 at 17:26

Facing Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

1 Answers1

Edit