Check out this StackBlitz demonstration that demonstrates how ngStyle is being used to style the h1 element in the following way:
<h1 [ngStyle]="{'background-color': backgroundColor}"
The component named HelloComponent employs the OnPush change detection strategy as shown below:
@Component({
selector: 'hello',
template: `<h1 [ngStyle]="{'background-color': backgroundColor}">Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
After attempting to update the background color to yellow in the ngAfterViewInit() method, it appears that the view does not reflect the change and remains blue.
What steps can be taken to trigger change detection so that the style updates accordingly?
I experimented with using this.cdr.markForCheck() to see if I could manually trigger it.