How to route to another component with the particular selected data

Question

When i click on a particular card it is routing to another component but i want along with the data of that particular card should also pass to the another component. Here is the stackblitz DEMO.

Answer 1

You can achieve solution using shared service

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

@Injectable()
export class DataService {

  selectedCard;
  constructor() { }

  public setSelectedCard(data) {
    this.selectedCard = data;
  }

  public getSelectedCard() : any {
    return this.selectedCard;
  }

}

home.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService} from '../data.service'

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

  contact
  constructor(private dataService: DataService) { }

  ngOnInit() {

    this.contact = this.dataService.getSelectedCard();
  }

}

list.component.ts

export class ListComponent implements OnInit {
  contacts = [];
  constructor(private myService: ContactService, private router : Router, private dataService: DataService) {}

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

  onCardClick(index) {

    this.dataService.setSelectedCard(this.contacts[index]);
    this.router.navigate(['/home']);
  }

}

list.component.html Call the onCardClick() with index

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

Here is forked stackblitz solution