How can I update my component with changes when the query parameters of my url change?

Question

I have a child component that is using route.snapshot.queryParamMap.get() to grab query parameters and pass that string to a service which in turn calls a function and populates my parent component. In the child component I have a search feature. After the user makes their selection and clicks search it fires a function that updates the query parameters of the URL. When the user clicks search I would like my parent component to update the data based on the new query parameters passed to the URL.

I've looked at a lot of posts, but I can't get my component to update consistently without hitting refresh. I'm subscribing to router.events. I've tried calling the function in both my constructor and in ngOnit. I see that I'm getting the NavigationEnd object back, but I'm not sure how to take the updated queryParameters to update my component.

How can I update my component without having to hit refresh?

// parent component

export class ResultsComponent implements OnInit {
results: Array<Entity>;
urlQuery: string;

entityConfig: any = {};
providers = PROVIDERS;

constructor(
    private modelService: ModelService,
    private entityService: EntityService,
    private route: ActivatedRoute,
    private router: Router
) {}

ngOnInit() {
    this.urlQuery = this.route.snapshot.queryParamMap.get('entity_type');
    this.entityService.getEntityType(this.urlQuery);
    this.entityService.getEntities(this.entityService.entityConfig.endpoint)
    .subscribe(
        response => {
            this.results = this.modelService.assignModelFromResponse(this.entityService.entityConfig.model, response);
            console.log('results', this.results);
        }
    );

    console.log('router events', !!this.router.events);

    // how can I use router.events to update my component?
    if(!!this.router.events) {
        this.router.events.forEach((event) => {
            if(event instanceof NavigationEnd) {
                console.log('navigation end', event);
                this.entityService.getEntityType(this.urlQuery);
            }
            // NavigationEnd
            // NavigationCancel
            // NavigationError
            // RoutesRecognized
          });
    }

}

}

That's quite a lot of clutter. Can you create a minimal example which highlights what you want to achieve and post it on StackBlitz so we can play around with it? — Lazar Ljubenović
– Lazar Ljubenović, Commented Sep 27, 2018 at 17:21
That would require a lot of overhead. I updated my code above. Basically I just need to know how can I use router.events to update my component? — London804
– London804, Commented Sep 27, 2018 at 17:31
It would certainly be more overhead for us to create the repro and figure it out. — Lazar Ljubenović
– Lazar Ljubenović, Commented Sep 27, 2018 at 17:32

Rémi · Accepted Answer · 2018-09-27 17:48:52Z

3

Instead of using the snapshot, subscribe to this.route.queryParamMap. It is an Observable and you should receive the updated values when the route changes. https://angular.io/api/router/ActivatedRoute#queryParamMap

answered Sep 27, 2018 at 17:48

Rémi

1,0071 gold badge11 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guss · Accepted Answer · 2020-08-30 15:03:48Z

0

I still need to use snapshot, but subscribing to the router.events solved the issue.

    ngOnInit() {
        this.urlQuery = this.route.snapshot.queryParamMap.get('entity_type');
        this.getEntity();

        this.router.events.subscribe((val) => {
            if(val instanceof NavigationEnd) {
                this.urlQuery = this.route.snapshot.queryParamMap.get('entity_type');
                this.getEntity();
            }
        });
    }

    getEntity():void {
        this.entityService.getEntityType(this.urlQuery);
        this.entityService.getEntities(this.entityService.entityConfig.endpoint)
        .subscribe(
            response => {
                this.results = this.modelService.assignModelFromResponse(this.entityService.entityConfig.model, response);

            }
        );
    }

edited Aug 30, 2020 at 15:03

Guss

32.8k20 gold badges117 silver badges143 bronze badges

answered Sep 27, 2018 at 18:05

London804

1,1761 gold badge26 silver badges61 bronze badges

Collectives™ on Stack Overflow

How can I update my component with changes when the query parameters of my url change?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related