Angular 8 add class after page load Error: ExpressionChangedAfterItHasBeenCheckedError

Question

As the title suggests, I am trying to add a class to a div element after the page is load! I have a condition isTrue, and the angular function ngAfterViewInit() that executes after the page is loaded making isTrue value to be true, then adding the class hideOnLoad. Of course I could use standard javascript or jquery, but I must do it the angular way. Essentially the end result should be that, the div.index-logo-wrapper fades out slowly after the page is load. My idea was to add a class once its loaded that gradually decreases the opacity You input is much appreciated.

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

@Component({

  selector: 'app-index-section',

  templateUrl: './index-section.component.html',

  styleUrls: ['./index-section.component.scss']

})

export class IndexSectionComponent implements OnInit {

  isTrue: boolean = false;

  public innerWidth: any;

  constructor() { }

  ngOnInit() {

  }

  ngAfterViewInit() {

    this.innerWidth = window.innerWidth;

    if (this.innerWidth < 1000) {

      this.isTrue = true;

      alert(this.isTrue);

    }

  }

}

<section class="index-section">

  <div class="index-logo-wrapper" [class.hideOnLoad]="isTrue">

    <figure>

      <img src="assets/icons/logo_mobile.svg" alt="urbanwheels logo">

    </figure>

  </div>

  <div class="index-media-wrapper">

    <div class="media-container">

      <iframe src="https://player.vimeo.com/video/128014070?autoplay=1&color=ffffff&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

      <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque contra est, ac dicitis; Duo Reges: constructio interrete. Videsne quam sit magna dissensio?

      </p>

    </div>

  </div>

</section>

Answer 1

You can add class dynamically using ternary operator ?. If isTrue then add hideOnLoad, otherwise class is empty:

<div class="index-logo-wrapper" [ngClass]="isTrue ? 'hideOnLoad' : ''">

Wish to learn Angular and master it? Enroll in good quality Angular Training from Intellipaat, to get yourself practically skilled.