Angular Discussion Forums

There's no such thing as a stupid question. Ask. Discuss. Learn.

forum subscription

Wanna help programmers by answering latest Angular questions?

We will email you whenever a new question is posted in Angular section. Max 2 emails per week.

How can I get params into service

In my pubs.coponent.ts I am calling a function when I click on a town:

townClicked($event) {
// this.pubService.selectedTown = $event;
// console.log('selected Town:', this.pubService.selectedTown);
this.router1.navigate(['/pubs'], { queryParams: { town: $event } });
.filter(params =>
.subscribe(params => {
console.log('params: ', params); //

    this.pubService.selectedTown =;
console.log(this.pubService.selectedTown); // popular


this is my console log:

pubs.component.ts:37 params: {town: "Woodbridge"}
pubs.component.ts:40 Woodbridge
pubs.component.ts:37 params: {town: "Woodbridge"}
pubs.component.ts:40 Woodbridge

this is good! I can also print out the town in my HTML page by using:

The problem I have, I need to now pass this onto a service so I can pass the town into a URL path to change my JSON

here is my pubs.service.ts file:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { pubs } from '../interface/pub';
import { Observable } from 'rxjs';
import { TownsService } from './towns.service';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';

providedIn: 'root'
export class PubsService {

public selectedTown: string;

private _pubsintownurl = '{{selectedTown}}';
private _townurl = '';
constructor(private http: HttpClient, private townService: TownsService, private route: ActivatedRoute) {

getPubs(): Observable {
return this.http.get(this._pubsintownurl);
handleError(error: Response) {
return Observable.throw(error.statusText);


John Biddulph 2 months ago
  • Whitelisted Links