How to call ngOnInit() again in Angular 2?

Question

Please explain in this code, how to call ngOnInit() again when I call another method?

ngOnInit(): void {
  this.route.params.subscribe((params: Params) => {
    this.model = this.userData;
  });
}

update() {
  this.loading = true;
  this.userService.update(this.model).subscribe(
    (data) => {
      alert('Update successful');
    },
    (error) => {
      alert('Not updated');
      this.loading = false;
    },
  );
  this.user_data();
}

What's the purpose? Just move the code to another method and call that method from `ngOnInit()`. `ngOnInit()` is called once for every method. There is no way to make it being called multiple times. — Günter Zöchbauer, Jul 06 '17 at 07:45

score 41 · Accepted Answer · edited Dec 30 '20 at 12:54

There are two options from my point of view:

Calling ngOnInit() from another function scope. But I would suggest to do not adopt this approach given ngOnInitis an angular core method that belongs to OnInit Interface.

    public ngOnInit() {
          this.route.params.subscribe((params: Params) => {
          this.model=this.userData;
      });      
    }
    
    update() {
           this.ngOnInit();
    }

Break your functionality into another function, use ngOnInitto call it and, afterwards, any request can be made from anywhere by calling the function in the following manner: this.<MethodName>();.

    public ngOnInit() {
          this.getRouteData();
    }
    
    update() {
           this.getRouteData(); 
    }

    getRouteData() {
      this.route.params.subscribe((params: Params) => {
          this.model=this.userData;
      }); 
    }

score 18 · Answer 2 · edited Dec 16 '20 at 15:40

18

If the purpose is to trigger ngOnInit() when query param is updated, then do following:

import { Router } from '@angular/router';
constructor(private router: Router) {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}

edited Dec 16 '20 at 15:40

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Mar 19 '19 at 17:18

Hari Das

10,145
7
62
59

This is exactly the solution I was looking for. Big thank you Hari – santu Dec 26 '19 at 12:03
1

But this will affect if you have `routerLink` to go in other routes it will not work. Tested by myself – TheCoderGuy Feb 22 '21 at 16:08

score 4 · Answer 3 · answered Jul 06 '17 at 08:00

ngOnInit called once the component is created. so you can create a function and call the function again. Here is the sample code.

ngOnInit(): void {
    this.callFun();
}    

update() {
    this.callFun();
    // do code
}

private callFun(){
   // do code
}

score 4 · Answer 4 · answered Jul 06 '17 at 08:01

You should not need to call ngOnInit again. So the question remains, what are you really trying to accomplish? Are you having issues retrieving the routing parameter?

 ngOnInit(): void {
      this.route.params.subscribe((params: Params) => {
        this.model=this.userData;
  });

Your code within the subscribe above will AUTOMATICALLY be re-executed every time the route parameters change. So there is no need to manually call ngOnInit again.

score 4 · Answer 5 · answered Jul 06 '17 at 08:02

4

It's just a function ...

ngOnInit() {}

secondMethod() { this.ngOnInit(); }

I've been doing it all the time to reload my data, never had a problem with it.

answered Jul 06 '17 at 08:02

you should not call ngOnInit life cycle from another custom function – Md omer arafat Jan 28 '22 at 15:06
@Mdomerarafat Could you explain why not? – Michiel Jun 02 '23 at 07:17

How to call ngOnInit() again in Angular 2?

5 Answers5

Linked