Angular 2 Component Router - How to run View code

Question

I'm using the Component Router and the routing part works well. But I can't figure out how to run JS to modify the template once the template has loaded (and not before).

For example, I want to run:

$(window).load(function() {
    "use strict";
    $(".preloader").delay(350).fadeOut('slow');
});

But obviously this can't run until the preloader div is loaded.

What's the best practice for doing this? I fiddled around with OnInit but it felt weird putting UI modifying code in the controller...err...I mean, component.

The best practice is to avoid jQuery if you use Angular: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background/15012542#15012542 — Andrei Zhytkevich, Jul 29 '16 at 17:03
Sure, but in this case I'm using someone else's template so rewriting it without jquery would take a bit of work. — jvhang, Jul 29 '16 at 17:10

score 1 · Accepted Answer · edited May 23 '17 at 11:54

1

I would say, try css animation.

Reference your .preloader using ElementRef:

constructor(private _el: ElementRef) {
   this.preloader = jQuery(this._el.nativeElement).find('.preloader');
}

More details here: How to use jQuery with Angular2?

In AfterViewInit (https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview) do setTimeout for 350 ms and change class to something having transition (details https://stackoverflow.com/a/6943704/1267942)

Update: as of Angular 2 RC4 the Animation is in pretty good shape https://angular.io/docs/ts/latest/guide/animations.html (I haven't tried it yet)

edited May 23 '17 at 11:54

Community

1
1

answered Jul 29 '16 at 17:18

Andrei Zhytkevich

8,039
2
31
45

Thank you. For anyone else having this issue, I went with the jquery reference from within AfterViewInit() for the time being. – jvhang Jul 29 '16 at 17:57

Angular 2 Component Router - How to run View code

1 Answers1