How convert jQuery addClass code to Angular

Question

I have the following jQuery code that is used for adding some animations to a Signup form when clicking on the submit button.

        setTimeout(() => {
            $('#new-user-layout').addClass('animate__fadeOut')
        }, 1000)
        setTimeout(() => {
            $('#new-user-layout').addClass('hidden')
        }, 1300)
        setTimeout(() => {
            $('#new-user-layout').removeClass('animate__fadeOut')
            $('.app-login_form-layout').css({ 'height': '28rem', 'width': '25rem' })
        }, 1600)
        setTimeout(() => {
            $('#user_credentials').removeClass('hidden')
            $('#user_credentials').addClass('animate__fadeIn')
        }, 2000)
        setTimeout(() => {
            $('#user_credentials').removeClass('animate__fadeIn')
        }, 2300)

Now this is with the HTML template that I need to convert to Angular code. How can I add these animation classes in Angular way ?

I tried using [ngClass], but it is not working properly.

Hien Nguyen · Accepted Answer · 2020-06-25 09:54:24Z

1

You can use ViewChild, ElementRef and Renderer2 as below

@ViewChild("newuserlayout") newuserlayout: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    setTimeout(() => {
      debugger;
      this.renderer.addClass(
        this.newuserlayout.nativeElement,
        "animate__fadeOut"
      );
    }, 1000);
  }

Demo https://stackblitz.com/edit/angular-viewchild-elementref-render2

answered Jun 25, 2020 at 9:54

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Happy Coder Over a year ago

Elegant. You are awesome !!! Thanks a lot. This is the perfect solution.

MikeOne Over a year ago

Meh.. why not use Angular animations for this?

Happy Coder Over a year ago

@MikeOne how that can be used ?

MikeOne Over a year ago

Maybe this helps? angular.io/guide/animations

Collectives™ on Stack Overflow

How convert jQuery addClass code to Angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related