Executing a function on page load, ANGULAR 2

Question

I have a simple function, checking the width of the window and according to that value it stretches the content. But when I resize the page and reload the site, nothing happens until I resize the window. How do I call a function on page load in angular2?

My whole app.component.ts file:

import { Component } from '@angular/core';

@Component({
  templateUrl: './app.component.html'
})
export class appComponent {

  private checkScreenWidth() {
    if (window.innerWidth < 1000 && window.innerWidth > 499) {
      ...
    } else if (window.innerWidth < 500) {
      ...
    } else {
      ...
    }
  }
}

Call it in ngOnInit or ngAfterViewInit? Have you read up on the lifecycle hooks? What have you tried? — jonrsharpe
– jonrsharpe, Commented Nov 26, 2016 at 22:35
@jonrsharpe I just tried to call it in component, but didn't work as it supposed to. I will check on google ngOnInit and will let u know bout the progress. — J. Doe
– J. Doe, Commented Nov 26, 2016 at 22:36

Vishal · Accepted Answer · 2016-11-27 06:16:31Z

2

You may import and implement the OnInit interface of angular2 core library and define its ngOnInit method after implementing the interface in the class. I guess it will do the job.

export class appComponent implements OnInit {
  private checkScreenWidth() {
    if (window.innerWidth < 1000 && window.innerWidth > 499) {
      ...
    } else if (window.innerWidth < 500) {
      ...
    } else {
      ...
    }
  }
  ngOnInit() {
    this.checkScreenWidth();
  }

}

answered Nov 27, 2016 at 6:16

Vishal

11k22 gold badges90 silver badges136 bronze badges

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

2 Comments

Dhiresh Budhiraja Over a year ago

on init function runs during page loads

Vishal Over a year ago

@DhireshBudhiraja That's what he needs: 'How do I call a function on page load in angular2?' Read the question. Your downvote is unjust!

Codiee · Accepted Answer · 2017-12-05 10:17:29Z

0

First of all import OnInit from '@angular/core'module and then call a method inside ngOnInit which you want to call on load its like ng-init from angularjs.

import  { Component, OnInit } from '@angular/core';

 ngOnInit() {
    this.checkScreenWidth();
  }

answered Dec 5, 2017 at 10:17

Codiee

3,2552 gold badges19 silver badges19 bronze badges

Collectives™ on Stack Overflow

Executing a function on page load, ANGULAR 2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related