window.location.href vs angular2 router.navigate

Question

I am new to Angular (Today 9th-March-18 marks day 8 ).

I have a jquery method which needs to execute on window load event. From my angular component when I do this.router.navigate(['/student-consent']) or click navigation button on browser to visit the url /student-consent window load event is not triggering, as a result my methods are not running.

However, when I am doing window.location.href = '/student-consent', my methods are running.

I have done some research on this, and I found out in Angular route navigation or browser navigation(in Angular app with routing) doesn't loads window,rather it loads the concerned html(component) in router-outlet.

On the contrary refreshing the page or hitting the url directly in browser executes the methods as for these cases window load event does occurs.

My question: Is there any way to execute my methods on route change or triggering window load event on route change?

Update: Having jquery methods execute with in onAfterViewInit or any Component life cycle hook is not allowed in my organization as per design constraints.

Window load event handler in js -

$(window).on("load", function () {
    $(".preloader").fadeOut(1000);
});

Relevant Html code in my component -

<div class="preloader"></div>

Component -

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as $ from 'jquery';

@Component({
  selector: 'app-student-login-creation',
  templateUrl: './student-login-creation.component.html',
  styleUrls: ['./student-login-creation.component.css']
})
export class StudentLoginCreationComponent implements  OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
    //$(window).trigger('routeChange');
  }

  createId() {
    console.log('student login');
    // window.location.href = '/student-consent';
    this.router.navigate(['/student-consent']);
  }

}

Answer 1

You're right, Angular doesn't trigger window loading on route change. Those are two different things.

Speaking of different things, JQuery And Angular are too. You should not use JQuery with Angular : when using Angular, you should not manipulate directly the DOM, you should use the framework to do that. And JQuery isn't part of this framework ...

But if you want to keep doing this, then you need to update your trigger function. I guess that right now you have something like

window.onload = () => {...}

Right ? Well, if you want to listen to route changes in Angular, then you need to subscribe to router events.

Start by injecting the router into your component, then listen to route change events :

constructor(private router:Router) {
  router.events.subscribe(events => {
    console.log('Angular has changed route');
  });
}

Keep in mind that if you put this in a routed component, then it will be destroyed as soon as you change route though.