how to pass a particular data from array in clickevent from component to component via routerlink-CodePudding

i have a component which recieves jsonobject data from API and i converted that data into array and displayed in html via ngfor loop. now i want to apply a click on html element to pass the particular data into another component, as soon as the the particular html element from ngfor has been clicked it need to transfer the data which it is getting from array, the code for that is given below

this is the stackblitz link given below https://stackblitz.com/edit/angular-ivy-1h6mku?file=src/app/home/home.component.ts

i want to transfer particular solution id to customer component for e.g. if i clicked on "Demand Sensing and Inventory Optimization" it should pass 118 if i clicked on "content management" it should pass 183 to the customer component i am noob in angular so i dont know much about it.

CodePudding user response：

You can pass params as router params in angular routes: path: 'app-customer-details/:id'

 const routes: Routes = [
  {path: 'home' , component: HomeComponent},
  {path: 'app-customer-details/:id' , component: CustomerDetailsComponent},
  { path: '',  redirectTo: '/home', pathMatch: 'full' }
];

and update you home component template with router navigations. You can use routerLink here:

 <a style="text-decoration: none;"><div>
    <ng-container *ngFor="let element of this.myArray">
      <div
        *ngFor="let content of element['Sector: Public Sector[14]']"
        [routerLink]="['/app-customer-details', content?.solutionId]"
      >
        <div>
          <button ></button>
          <span ></span>
        </div>
        <span> {{ content.solutionDetails.title }} <br /> </span>
        {{ content.solutionDetails.views }} <br />
        {{ content.solutionId }} <br />
        <div >
          <hr  />
        </div>
      </div>
    </ng-container>
  </div>
  </a>

After that, you can access router params in CustomerDetailsComponent by using the ActivatedRoute

 constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.params.subscribe((params) => {
      this.mydata = params;
      console.log(params);
    });
  }