Ways to navigate to a different component while passing along the specific chosen information

Question

Ways to navigate to a different component while passing along the specific chosen information

After clicking on a specific card, it routes to a different component, but I also want to pass the data of that card to the new component. You can check out a working demo on StackBlitz here.

angular typescript angular-services angular7

Answer 1

Answer №1

To find the solution, consider utilizing a shared service

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

@Injectable()
export class SharedService {

  selectedData;
  constructor() { }

  public setSelectedData(data) {
    this.selectedData = data;
  }

  public getSelectedData(): any {
    return this.selectedData;
  }

}

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { SharedService} from '../shared.service'

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  item;
  constructor(private sharedService: SharedService) { }

  ngOnInit() {

    this.item = this.sharedService.getSelectedData();
  }

}

table.component.ts

export class TableComponent implements OnInit {
  items = [];
  constructor(private myService: DataService, private router : Router, private sharedService: SharedService) {}

   ngOnInit() {
    this.myService.getItems()
      .subscribe((res :[]) => this.items = res);
  }

  onItemClick(index) {

    this.sharedService.setSelectedData(this.items[index]);
    this.router.navigate(['/dashboard']);
  }

}

table.component.html Invoke the onItemClick() with index

<mat-card (click)="onItemClick(i)" >

Check out this modified stackblitz demo

Answer 2

To find the solution, consider utilizing a shared service

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

@Injectable()
export class SharedService {

  selectedData;
  constructor() { }

  public setSelectedData(data) {
    this.selectedData = data;
  }

  public getSelectedData(): any {
    return this.selectedData;
  }

}

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { SharedService} from '../shared.service'

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  item;
  constructor(private sharedService: SharedService) { }

  ngOnInit() {

    this.item = this.sharedService.getSelectedData();
  }

}

table.component.ts

export class TableComponent implements OnInit {
  items = [];
  constructor(private myService: DataService, private router : Router, private sharedService: SharedService) {}

   ngOnInit() {
    this.myService.getItems()
      .subscribe((res :[]) => this.items = res);
  }

  onItemClick(index) {

    this.sharedService.setSelectedData(this.items[index]);
    this.router.navigate(['/dashboard']);
  }

}

table.component.html Invoke the onItemClick() with index

<mat-card (click)="onItemClick(i)" >

Check out this modified stackblitz demo

Answer 3

Answer №2

To securely share data across components, it is essential to utilize a shared service that allows for communication through setters and getters or observables.

Start by creating a dedicated shared service
When the card is clicked, store the data in the shared service
Upon navigating to a different component, retrieve the data from the shared service either by using a getter method or subscribing to an observable

If only the ID needs to be transferred, consider utilizing path parameters or query parameters. However, avoid passing excessive information through the URL to enhance security.

Implementation of SharedService:

export class SharedService {
  public $cardDataSubject;

  constructor() {
    this.$cardDataSubject = new Subject();
  }

  setCardDetails(cardDetails) {
    this.$cardDataSubject.next(cardDetails);
  }
}

In the child component, subscribe to the shared service:

constructor(private sharedService: SharedServic) {
    this.$cardDataSubject.subscribe(cardDetails => this.cardDetails = cardDetails);
}

Answer 4

To securely share data across components, it is essential to utilize a shared service that allows for communication through setters and getters or observables.

Start by creating a dedicated shared service
When the card is clicked, store the data in the shared service
Upon navigating to a different component, retrieve the data from the shared service either by using a getter method or subscribing to an observable

If only the ID needs to be transferred, consider utilizing path parameters or query parameters. However, avoid passing excessive information through the URL to enhance security.

Implementation of SharedService:

export class SharedService {
  public $cardDataSubject;

  constructor() {
    this.$cardDataSubject = new Subject();
  }

  setCardDetails(cardDetails) {
    this.$cardDataSubject.next(cardDetails);
  }
}

In the child component, subscribe to the shared service:

constructor(private sharedService: SharedServic) {
    this.$cardDataSubject.subscribe(cardDetails => this.cardDetails = cardDetails);
}

Answer 5

Answer №3

Looking for a solution? Check out this link: How to pass data to Angular routed components?

Best Solution: implement the 3rd approach which involves using a service.

Answer 6

Looking for a solution? Check out this link: How to pass data to Angular routed components?

Best Solution: implement the 3rd approach which involves using a service.

Ways to navigate to a different component while passing along the specific chosen information

Answer №1

Answer №2

Answer №3

Similar questions

I am looking to display data in Angular based on their corresponding ids

Utilizing Variables in TypeScript to Enhance String Literal Types

Unable to see Next.js page in the browser window

Achieving selective exclusion of specific keys/values while iterating through an array and rendering them on a table using Angular

The parameter cannot be assigned the readonly type 'X' in this context

What distinctions can be made between extends and mixins in the context of the vue-class-component library?

Encountering an error on Ionic 4, Angular 8: Unable to access property 'subscribe' of undefined

Unable to modify the text in the input field as the input element cannot be located, despite its presence

What measures can I take to protect the use of React components that may not be present?

Uploading Files to the Server with Angular 2 and ExpressJS

Reactivity in Angular Autocomplete with API Integration

error TS2559: The type 'BookInterface[]' does not share any properties with the type 'BookInterface'

What is the best way to obtain the variable value?

Heroku error: unable to locate tsc despite exhaustive troubleshooting efforts

Determine the types of values for an object through the use of Generics

Exploring the benefits of using TypeScript with Angular2 for HTTP

Troubleshooting Challenges with Installing Angular 5, Node.js, and N

Encountering a 404 (Not Found) error while trying to access a null resource in Angular at http://localhost

"Learn how to pass around shared state among reducers in React using hooks, all without the need for Redux

Upgrading Angular causes issues with fileReplacements not functioning properly for assets