Angular ngOnit () {} is not working as expected

Question

I am new to Angular and I am working angular8. I have a component "header" which has some menu with some category. After clicking the category below header component, all products should use API. The problem is after first click ngOnIt method is triggering as expected but when I choose another category nothing happens.

Header.component.html

<ul>
<li class="nav-item">
  <a class="nav-link text-white" (click)="movetolist(4)">FITNESS &
                      SUPPLIMENTS</a>
</li>
<li class="nav-item">
  <a class="nav-link text-white" (click)="movetolist(5)">HEALTH CONDITIONS</a>
</li>
<li class="nav-item">
  <a class="nav-link text-white" (click)="movetolist(6)">HEALTHCARE DEVICES</a>
</li>
<li class="nav-item">
  <a class="nav-link text-white" (click)="movetolist(9)">PERSONAL CARE</a>
</li>
<li class="nav-item">
  <a class="nav-link text-white" (click)="getMedicine(8,'BABY PRODUCT')">BABY PRODUCT</a>
</li>
</ul>

Header.component.ts

movetolist(id) {
  console.log(id);
  this.rout.navigate(['/medicines', id]);
}

List.component.html

<app-header></app-header>

<div class="row listpage">
  <div class="col-lg-3 col-md-3 col-sm-3" *ngFor="let product of ayurvedic" (click)="movetodetails(product.id)">
    <div class="box" align="center">
      <h6 style="text-align: right">ADD</h6>
      <a>
        <img src="{{product.medicine_photo}}" class="img-fluid">

        <div style="color: none">
          {{product.medicine_name}}</div>
        <div>
          MRP: &#8377;{{product.medicine_price}}</div>
      </a>
    </div>
  </div>

List.component.ts

ngOnInit() {

this.id = this.routs.snapshot.paramMap.get("id");
console.log(this.id);
    this.service.categories(this.id, this.from, this.to).subscribe(res => {
      if (res['status'] == 1) {
        this.ayurvedic = res['data'];
        console.log(this.ayurvedic);
     }
  });
}

App.routing.module.ts

const routes: Routes = [
  {path: 'medicines/:id', component: ListComponent},
];

Possible duplicate of [Angular2 : Call method/ngoninit when parameter of route changes](https://stackoverflow.com/questions/41300793/angular2-call-method-ngoninit-when-parameter-of-route-changes) — Andrew Allen, Oct 23 '19 at 11:43

Krishna Rathore · Accepted Answer · 2019-10-23T13:06:35.957

0

subscribe route.params

import { ActivatedRoute } from '@angular/router';


export class ListComponent implements OnInit {
    constructor(
        private route: ActivatedRoute
    ) { }

    ngOnInit(){
        this.route.params.subscribe((params: Params) => {
            console.log(params.get('id'));    
        });
    }
}

edited Oct 23 '19 at 13:06

answered Oct 23 '19 at 11:44

Krishna Rathore

9,389
5
24
48

score 0 · Answer 2 · answered Oct 23 '19 at 12:01

0

add ActivatedRoute service in your constructor:

constructor(private route: ActivatedRoute) {
...
}

and then use:

route.params

answered Oct 23 '19 at 12:01

Hamid.R Gharahzadeh

11
1
1

score 0 · Answer 3 · answered Oct 23 '19 at 13:05

If you navigate from one component to the same component Angular won't create and initialise this component again (so ngOnInit isn't called again). In those cases you should work with Observables that emit a new value when the Component should display new data.

ngOnInit() {
  this.route.paramMap.pipe(
    tap(params => this.id = params.get("id")),
    switchMap(params => this.service.categories(params.get("id"), this.from, this.to))
  ).subscribe(res => {
    if (res['status'] == 1) {
      this.ayurvedic = res['data'];
      console.log(this.ayurvedic);
    }
  });
}

Angular ngOnit () {} is not working as expected

3 Answers3