implementing relevant life cycle hook

Question

I am confused on using relevant lifecycle hook in my angular app. I have two components where i am trying to navigate between this two components.I am able to navigate from first component to second. but when i am trying to navigate from second to first component. It does not work properly. please guide me on this.

I want to send "golbalvaue" variable from secondComponent to FirstComponent and implement a method as soon as "globalvalue" is transfered to the FirstComponent. To acoomplish that which lifecycle hook has to be implemented. I am able to navigate from SecondComponent to FirstComonent. Note: I am able to navigate it to FirstComponent from SecondComponent. The problem is i am not able to access the variable. SecodComponent is intiated only when the an event in the FirstComponent is triggered. After initiation of SecodComponent i want to trigger an event which navigates to the FirstComponent. In which lifecyclehook can i access the variable

First Component

import {Router} from '@angular/router';
globalvalue: string;
testvalue: string;

export class FirstComponent implements OnInit, AfterViewInit {

constructor(private route: Router){}


 ngAfterViewInit() {
    this.globalvalue = this.route.getCurrentNavigation().extras.state.globalvalue;
    this.source.addFilter({field: 'test', search: this.globalvalue});
  }

onChange(event) {
    const testdata = event.data.testdata;
      this.route.navigate(['/components/SecondComponent'], {state: {testvalue: testvalue},  fragment: 'testing'});
  }
 }

Second Component

globalvalue: string;
testvalue: string;

export class FirstComponent implements OnInit, AfterViewInit {

constructor(private route: Router){
this.testvalue = this.router.getCurrentNavigation().extras.state.testvalue;
}

  ngAfterViewInit() {
    this.searchService.onSearchSubmit()
      .subscribe((data: any) => {
        this.globalvalue = data.term;
        this.route.navigate(['/components/First-component'], {state: {globalvalue: this.globalvalue}});
      });
  }

}

Yours is not the correct approach. There are multiple ways to solve this depending on your needs. Can you share yours routes and module code also and any specific need in this regard. — abhay tripathi

Sivakumar Tadisetti Sivakumar Tadisetti · Accepted Answer · 2020-07-16T06:20:23

You can pass {state: {globalvalue: this.globalvalue}} in route url array itself as second value

this.route.navigate(['/components/First-component', {state: {globalvalue: this.globalvalue}}]);

And then you can access the route parameters from either constructor or ngOninit or your wish ;)

Component from where globalValue will be sent to other route

export class ThirdComponent {
  constructor(
    private router: Router,
  ) {
    this.returnItem();
  }

  returnItem() {
    setTimeout(() => {
      let globalValue = 'Test'
      this.router.navigate(['second', {
        globalValue
      }])
    }, 2000);
  }
}

The component that catches the param value

export class SecondComponent {
  constructor(private route: ActivatedRoute) {
    this.route.params.subscribe(data => {
      this.logValue(data)
    });
  }

  logValue(data) {
    console.log(data);
  }

}

Working stackblitz

Check second and third components in the provided stackblitz

implementing relevant life cycle hook

1 Answers