CODEWITHSUNDEEP
angularcomponentsangular2-directivesangular2-servicesangular-components
S M Abrar Jahin
S M Abrar Jahin

Reputation: 14588

Angular 2 - Lifecycle event after Constructor Called

I am trying to do a simple work with Angular 2.

I want to catch event after component's constructor's call is finished. I am making a network call in the constructor like this-

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { Profile } from '../../dataModel/Profile.ts';   //Data Model

@Component({
    selector: 'profile-list',
    template: require('./profileList.component.html'),
    styles: [require('./profileList.component.css')]
})

export class ProfileListComponent
{
    public profiles: Profile[];         //Can be accessed in view
    public loadingMessage: string = "Loading Data ..";

    constructor(http: Http)
    {
        http.get('/api/Profile/Get?currentPageNo=1&pageSize=20').subscribe(result =>
        {
            this.profiles = result.json();
            console.log(result);
        });
    }

    ngOnInit()
    {
        this.loadingMessage = "No Data Found !!!";
    }
}

So, I am not sure when constructor call is ended.

I want to catch the event when constructor call is completed.

From this 2 links-

  1. http://learnangular2.com/lifecycle/

  2. http://learnangular2.com/lifecycle/

I came to know this-

export class App implements OnInit{
  constructor(){
     //called first time before the ngOnInit()
  }

  ngOnInit(){
     //called after the constructor and called  after the first ngOnChanges() 
  }
}

So, is it right that onInit is called after my constructor call is finished?

Please help me.

Thanks in advance for helping.

Upvotes: 0

Views: 1969

Answers (3)

Ryann Galea
Ryann Galea

Reputation: 307

If you want data to be available on load you will need to look further into resolving the data in the route, which can http load and return the payload before the route loads that contains your component.

Upvotes: 0

VadimB
VadimB

Reputation: 5711

Can this be a solution to you if you use routers to render defined component? https://angular.io/docs/ts/latest/guide/router.html#!#guards

You can use router capability to prefetch data before initialization your component.

At the moment, any user can navigate anywhere in the application anytime.

That's not always the right thing to do.

  • Perhaps the user is not authorized to navigate to the target component.
  • Maybe the user must login (authenticate) first.
  • Maybe we should fetch some data before we display the target component.
  • We might want to save pending changes before leaving a component.
  • We might ask the user if it's OK to discard pending changes rather than save them.
import { Injectable }             from '@angular/core';
import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router';

@Injectable()
export class ComponentRouteResolve implements Resolve<ComponentName> {
  constructor(private router: Router) {}
  resolve(route: ActivatedRouteSnapshot): Promise<boolean>|boolean {
    return this.myService().then(data => {
        return true;
    });
  }
}

Upvotes: 1

ranakrunal9
ranakrunal9

Reputation: 13558

As per Service documentation its advisable to call service inside ngOnInit. Check all Life Cycle hook at this documentation and as per its OnInit documentation you should use ngOnInit for two main reasons:

  1. to perform complex initializations shortly after construction
  2. to set up the component after Angular sets the input properties

So your component should be like as below :

export class ProfileListComponent
{
    public profiles: Profile[];         //Can be accessed in view
    public loadingMessage: string = "Loading Data ..";

    constructor(private http: Http) {        
    }

    ngOnInit()
    {
        this.http.get('/api/Profile/Get?currentPageNo=1&pageSize=20').subscribe(result =>
        {
            this.profiles = result.json();
            console.log(result);
        });        
    }
}

Upvotes: 0

Related Questions