How to Activate Animation Post-Page Load in Angular 8, Overcoming ExpressionChangedAfterItHasBeenCheckedError

Question

How to Activate Animation Post-Page Load in Angular 8, Overcoming ExpressionChangedAfterItHasBeenCheckedError

Trying to solve a crucial question concerning animating an element after the page has fully loaded. Despite extensive research, I have yet to find a simple and efficient solution. Can anyone offer some advice? Once the mobile page is loaded, I want the logo to smoothly move towards the top-right corner while simultaneously decreasing in size.

I am seeking the Angular equivalent of $(document).ready(function() {}

Although I tried using ngAfterViewInit(), nothing seems to be working as intended.

Here's the content of index-section.component.html

<section class="index-section">
  <div [@logoMoveResize]="load_completed ? 'initial' : 'end'" 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>
    </div>
    <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>
</section>

As for the index-section.component.ts

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { trigger, state, animate, style, group, query, transition } from '@angular/animations';

@Component({
  selector: 'app-index-section',
  templateUrl: './index-section.component.html',
  styleUrls: ['./index-section.component.scss'],
  animations: [
    trigger('logoMoveResize', [
      state('initial', style({
        transform: 'translateX(0%) translateY(0%) scale(1)',
      })),
      state('end', style({
        transform: 'translateX(25%) translateY(-25%) scale(.3)',
      })),
      transition('initial <=> end', [animate('1s')]),
    ])
  ]
})
export class IndexSectionComponent implements OnInit {

  load_completed = true;
  innerWidth: any;

  ngOnInit() {
    this.innerWidth = window.innerWidth;
  }

  ngAfterViewInit() {
    if ( this.innerWidth < 1000 ) {
     this.load_completed = false;
    }
  }
}

Encountering an error message:

https://i.sstatic.net/DjtjA.png

css angular typescript angular8

Answer 1

Answer №1

assign a value to a variable in component.ts file

@Component({
  selector: 'app-some',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.scss'],
  animations: [
    trigger('fadeInOut', [
      state('void', style({
        opacity: 0
      })),
      transition('void <=> *', animate(1000)),
    ]),
    trigger('EnterLeave', [
      state('flyIn', style({ transform: 'translateX(0)' })),
      transition(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('0.5s 300ms ease-in')
      ]),
      transition(':leave', [
        animate('0.3s ease-out', style({ transform: 'translateX(100%)' }))
      ])
    ])
  ]
})

export class SomeComponent implements OnInit {

    completed_loading = false;

    ngOnInit(){
    }

    ngAfterViewInit(){
      completed_loading = true;
    }

}

Add the following code snippet in your component.html file

<div [@fadeInOut]="completed_loading"> element you want to animate goes here</div>

By following the example above, you can easily apply animation effects based on certain conditions when needed.

Answer 2

assign a value to a variable in component.ts file

@Component({
  selector: 'app-some',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.scss'],
  animations: [
    trigger('fadeInOut', [
      state('void', style({
        opacity: 0
      })),
      transition('void <=> *', animate(1000)),
    ]),
    trigger('EnterLeave', [
      state('flyIn', style({ transform: 'translateX(0)' })),
      transition(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('0.5s 300ms ease-in')
      ]),
      transition(':leave', [
        animate('0.3s ease-out', style({ transform: 'translateX(100%)' }))
      ])
    ])
  ]
})

export class SomeComponent implements OnInit {

    completed_loading = false;

    ngOnInit(){
    }

    ngAfterViewInit(){
      completed_loading = true;
    }

}

Add the following code snippet in your component.html file

<div [@fadeInOut]="completed_loading"> element you want to animate goes here</div>

By following the example above, you can easily apply animation effects based on certain conditions when needed.

Answer 3

Answer №2

This response has given me the information I needed concerning the query at hand. As per the suggestion of @Kevin LeStarge, my workaround was:

setTimeout(()=> {
    this.load_completed = true;
}, 0);

Alternatively, following @Lijo's advice, using the AfterContentChecked lifecycle hook is another option:

import { ChangeDetectorRef, AfterContentChecked } from '@angular/core';

constructor(
private cdref: ChangeDetectorRef) { }

ngAfterContentChecked() {
this.cdref.detectChanges();
this.load_completed = true;
}

Answer 4

This response has given me the information I needed concerning the query at hand. As per the suggestion of @Kevin LeStarge, my workaround was:

setTimeout(()=> {
    this.load_completed = true;
}, 0);

Alternatively, following @Lijo's advice, using the AfterContentChecked lifecycle hook is another option:

import { ChangeDetectorRef, AfterContentChecked } from '@angular/core';

constructor(
private cdref: ChangeDetectorRef) { }

ngAfterContentChecked() {
this.cdref.detectChanges();
this.load_completed = true;
}

Answer 5

Answer №3

Implementing animation on an element in Angular can be achieved by utilizing the ngAfterViewInit hook.

Answer 6

Implementing animation on an element in Angular can be achieved by utilizing the ngAfterViewInit hook.

Answer 7

Answer №4

I am searching for the Angular version of $(document).ready(function() {}

the similar code snippet in Angular would be

constructor(private zone: NgZone) {
  this.zone.onStable.pipe(
    // ensure one-time execution
    first()
  ).subscribe(() => /* perform actions when zone is stable */)
}

Answer 8

I am searching for the Angular version of $(document).ready(function() {}

the similar code snippet in Angular would be

constructor(private zone: NgZone) {
  this.zone.onStable.pipe(
    // ensure one-time execution
    first()
  ).subscribe(() => /* perform actions when zone is stable */)
}

Answer 9

Answer №5

Utilizing Angular Resolve means implementing an interface that allows classes to act as data providers. These data provider classes can assist the router in resolving data while navigating through the application. By defining a resolve() method within the interface, this method will be called at the start of navigation, ensuring that the router waits for the data to be resolved before activating the route.

For more in-depth information, you can visit - https://angular.io/api/router/Resolve

Answer 10

Utilizing Angular Resolve means implementing an interface that allows classes to act as data providers. These data provider classes can assist the router in resolving data while navigating through the application. By defining a resolve() method within the interface, this method will be called at the start of navigation, ensuring that the router waits for the data to be resolved before activating the route.

For more in-depth information, you can visit - https://angular.io/api/router/Resolve

How to Activate Animation Post-Page Load in Angular 8, Overcoming ExpressionChangedAfterItHasBeenCheckedError

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Selecting items with checkboxes in a Bootstrap dropdown menu

Trying to customize the appearance of vaadin-date-picker's text input

What could be causing TypeScript to raise an issue when a /// reference comes after the 'use strict' statement?

How about utilizing React's conditional rendering feature?

The Angular Component I've created is displaying a single set of data on each mat-tab screen

Are there any React-UI libraries that come with a stylish green color scheme?

Aligning labels vertically with inputs

Sync HTML Videos

Retrieving information as the user navigates to the next page

The compilation fails when using TestUtils findRenderedComponentWithType with a Component<Props> definition

What is the most effective way to organize a collection according to the specific order specified in another array?

Stop removing event triggers when the close button on toastr is clicked

The mobile menu is not responding to the click event

Angular encountering issue with HTTP service not functioning as expected

What could cause my arguments to "not align with any signature" of console.log?

Managing API responses using Redux and Typescript

The NativeScript Angular side drawer is mysteriously missing, no error messages to be found

The incorrect child output is causing the observable to trigger erroneously, resulting in the observable receiving inaccurate

The alignment of flexNav.js submenus is not consistent

Tips on how to efficiently wrap content within a column layout, and to seamlessly shrink it if necessary