Display data based on routing on the first component from the second component

Question

I have 2 components on my app: filters-component and card-component. On the filters-component I added a routing method for data filtering based on country selector anchor.

Filters-component:

import { Component, OnInit } from '@angular/core';
import { TestimonialsDataService } from '../../services/testimonials-data.service';
import { Router,  ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-filters',
  templateUrl: './filters.component.html',
  styleUrls: ['./filters.component.scss']
})
export class FiltersComponent implements OnInit {
  public filters = [];
  public filterId;

  selectedIndex: number = null;

  constructor(private router: Router, private route: ActivatedRoute, private _testimonialsService: TestimonialsDataService) { }

  ngOnInit(): void {
    this._testimonialsService.getData().subscribe(data => this.filters = data);
    this.route.paramMap.subscribe((params: ParamMap) => {
      let id = parseInt(params.get('id'));
      this.filterId = id;
    });
  }

  onSelect(country) {
    this.router.navigate(['/country', country.id]);
  }
}

<div class="container filters">
  <p>{{filters["filtersTitle"]}}</p>

  <ul class="filter-wrap" *ngIf="filters['filtersData']">
    <li class="filter-item" *ngFor="let filter of filters['filtersData']" (click)="onSelect(filter)">
      <a id="{{filter.id}}" class="filter">
        <span class="flag flag-{{filter.id}}"></span>
        <span class="flag-text">{{filter.id}}</span>
      </a>
    </li>
  </ul>
</div>

Card component:

import { Component, OnInit } from '@angular/core';
import { TestimonialsDataService } from '../../services/testimonials-data.service';
import { Router,  ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss']
})
export class CardComponent implements OnInit {
  public authors: Object = {};
  public pageList: number = 1;

  constructor(private _testimonialsService: TestimonialsDataService) { }

  ngOnInit(): void {
    this._testimonialsService.getData().subscribe(data => this.authors = data);
  }
}

<div class="container">
  <div class="content">
    <div class="card" *ngFor="let author of authors['user'] | paginate: {id: 'list-pagination', itemsPerPage: 9, currentPage: pageList}">
      <div class="card-content">
        <img class="image" src="{{author.image}}"/>
        <p class="author">{{author.name}}</p>
        <p class="job">{{author.job}}</p>
        <p class="company"><a href="https://www.materahub.com/">{{author.company}}</a></p>
        <p class="country"><span class="flag flag-{{author.country}}"></span><span class="country">{{author.country}}</span></p>
      </div>
    </div>
  </div>

  <pagination-controls id="list-pagination" previousLabel="" nextLabel="" class="list-pagination" directionLinks="true" (pageChange)="pageList = $event"></pagination-controls>
</div>

Basically what I want to achieve here is this: Click on the <li class="filter-item" *ngFor="let filter of filters['filtersData']" (click)="onSelect(filter)"> the url goes like: country/DE or country/IT

on the card component I want to display the data that matches the /DE or /IT based on the card

I load all the cards at page start but I have to be able to filter them based on the country selector

Image:

If I understand what you're trying to achieve, then `this.route.paramMap.subscribe...` should be in `CardComponent`. And then show only the entries in `authors['user']` with the country code (DE, IT, ...) matching the URL. Is this your objective? — Benny Halperin, Apr 25 '20 at 18:00
Hello sir. Yes that is correct. Can you please tell me the way I can achieve this ? — TudorPopescu, Apr 26 '20 at 06:11
See my answer below. I did not try it myself though. Hope it works. — Benny Halperin, Apr 26 '20 at 06:41

score 0 · Answer 1 · answered Apr 26 '20 at 06:40

Check if this works. I did not run it myself.

Card component HTML

<div class="container">
  <div class="content">
    <div class="card" *ngFor="let author of authors | paginate: {id: 'list-pagination', itemsPerPage: 9, currentPage: pageList}">
      <div class="card-content">
        <img class="image" src="{{author.image}}"/>
        <p class="author">{{author.name}}</p>
        <p class="job">{{author.job}}</p>
        <p class="company"><a href="https://www.materahub.com/">{{author.company}}</a></p>
        <p class="country"><span class="flag flag-{{author.country}}"></span><span class="country">{{author.country}}</span></p>
      </div>
    </div>
  </div>

  <pagination-controls id="list-pagination" previousLabel="" nextLabel="" class="list-pagination" directionLinks="true" (pageChange)="pageList = $event"></pagination-controls>
</div>

Card component TS

import { Component, OnInit } from '@angular/core';
import { TestimonialsDataService } from '../../services/testimonials-data.service';
import { Router,  ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss']
})
export class CardComponent implements OnInit {
  public data: Object = {};
  public authors: any[] = [];
  public pageList: number = 1;

  constructor(private _testimonialsService: TestimonialsDataService) { }

  ngOnInit(): void {
    this._testimonialsService.getData().subscribe(data => this.data = data);
    this.route.paramMap.subscribe((params: ParamMap) => {
      let id = parseInt(params.get('id'));
      this.authors = this.data['user'].filter(o => o.country === id);
    });
  }
}

In filters component you can remove this.route.paramMap.subscribe part from ngOnInit.

Display data based on routing on the first component from the second component

1 Answers1