CODEWITHSUNDEEP
javascriptangularjsangular
Sukumar MS
Sukumar MS

Reputation: 748

how can i call a function when a template loads in angular2?

I am new to angular2. I have a requirement to call a function when a template loads/initializes. I know how to do this in angular1.x., but I am not able to find out how it can be done in angular-2.

This is how I tried in angular1.x

In html

<div ng-init="getItems()">
//some logic to get my items
</div>

In controller

getItems = function(){
console.log('in the getitems function call');
//logic to get my items from db/localStorage
}

This is how I used ng-init in angular1.x, but there is no ng-init in angular-2?Please help me on this issue.

Upvotes: 3

Views: 4352

Answers (3)

Kunso Solutions
Kunso Solutions

Reputation: 7630

In angular2 you can use component phase ngOnInit it is equal to on-init in angularJS. Here is more information about lifecycle in angular.

Example:

export class PeekABoo implements OnInit {
 constructor(private logger: LoggerService) { }

 // implement OnInit's `ngOnInit` method
 ngOnInit() { 
  this.logIt(`OnInit`); 
 }

 protected logIt(msg: string) {
  this.logger.log(`#${nextId++} ${msg}`);
 }
}

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657348

@Component({
 ...
})
class MyComponent {
  constructor() {
    // when component class instance is created
  }

  ngOnChanges(...) {
    // when inputs are updated
  }

  ngOnInit() {
    // after `ngOnChanges()` was called the first time
  }

  ngAfterViewInit() {
    // after the view was created
  }

  ngAfterContentInit() {
    // after content was projected
  }
}

See also https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#hooks-overview for the full list

Upvotes: 2

kit
kit

Reputation: 4920

Check lifecycle events of a component https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html . From what you are saying you probably needs ngAfterViewInit

Upvotes: 1

Related Questions