Re: trying to pass data in params using router

[Tito]

have you declared your routes? You are asking to go to this towns route but there is no exit sign ;)

const routes: Routes = [
        {
            path: '',
            component: DashboardComponent,
        },
    ];

On Monday, February 11, 2019 at 7:26:59 AM UTC-8, John Biddulph wrote:

I am following this tutorial: https://alligator.io/angular/query-parameters/

here is my code: 

townClicked($event) {

this.router.navigate(['/pubs'], { queryParams: { town: $event } });

}

and so I get the error

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'pubs'

and when I am trying to get the town that is clicked, here is my code: 

// tslint:disable-next-line:use-life-cycle-interface

ngOnInit() {

this.route.queryParams

.filter(params => params.town)

.subscribe(params => {

console.log(params); // {order: "popular"}

this.selectedTown = params.town;

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

});

}

[John Biddulph]

hmm, 

I have imported Router import { Router } from '@angular/router';

and I have set it in the constructor: private router: Router

not sure what you are suggesting to do with the following:

[John Biddulph]

Ah sorry, I get it, I have declared it in my ap.routing.module.ts file but I am still getting the error?!

I am trying to pass data onto my service file 

[John Biddulph]

So I have the towns being passed into my query in my URL bar in my browser but now I need to get this out into my services file but I put in my PubComponent

and here I have this code:

this.router.queryParams.subscribe((data) => {

this.selectedTown = data['town'];

});

and I am now getting the following error:

AppComponent.html:3 ERROR TypeError: Cannot read property 'subscribe' of undefined

    at new PubsComponent (pubs.component.ts:22)

[Tito]

so 1 step at a time. did your original issue get fixed? :)

[John Michael Biddulph]

Ok so Step 1

I am now passing data into the query string as a parameter of town and when I click on a different town, this changes

Localhost:4200?town=Brighton

Localhost:4200?town=Oxford

Localhost:4200?town=Manchester

Great! 

STEP 2 

I’m stuck, I need to be able to pass this into my pub.service.ts file so I can change the URL of my JSON 

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/IKCTEjp6KlM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Sent from Gmail Mobile

[Tito]

1. what happens when you call this endpoint from curl or postman tool?
   Localhost:4200/?town=Brighton
2. you might want to also look at this sample project
   https://stackblitz.com/angular/mxkjlkldpgj

[John Biddulph]

I made up that URL to get the towns!

I just need to be able to update this URL in my pubs.service.ts file: 

private _pubsintownurl = 'http://www.mypubspace.com/pubsmobile/gettownpubs.php?rsTown=Worthing';

[Tito]

woohoo! congrats

nothing like seeing the data come through

[John Biddulph]

no no, i can't get it out into the pubs.service.ts file, I need help here.

when I click on a town name, it shows in the URL, it's just I am not sure how to pass it onto the service

[John Biddulph]

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 } });

this.router.queryParams

.filter(params => params.town)

.subscribe(params => {

console.log('params: ', params); //

this.pubService.selectedTown = params.town;

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: 

<h2>Pubs in {{this.pubService.selectedTown}}</h2>

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';

@Injectable({

providedIn: 'root'

})

export class PubsService {

public selectedTown: string;

private _pubsintownurl = 'http://www.mypubspace.com/pubsmobile/gettownpubs.php?rsTown={{selectedTown}}';

private _townurl = 'http://www.mypubspace.com/pubsmobile/towns.php';

constructor(private http: HttpClient, private townService: TownsService, private route: ActivatedRoute) {

}

getPubs(): Observable<object> {

return this.http.get(this._pubsintownurl);

}

handleError(error: Response) {

return Observable.throw(error.statusText);

}

}