Getting route param as null in angular 7

Question

I am unable to retrive the route param as null. I am using angular7. Please find the code below

HeaderComponent ts file

    import {Router, ActivatedRoute} from '@angular/router';
    constructor(private httpService: HttpClient, private router: Router, private activatedRoute: ActivatedRoute) {
             this.getNewsSelectedFromRouteParam();
        }
    getNewsSelectedFromRouteParam() {
            alert();
            let id = this.activatedRoute.snapshot.paramMap.get('typeId');
            alert(id);
        }
getNewsByCountry(newsTypeSelected: any) {
        this.router.navigate(['/news',newsTypeSelected]);
        this.getNewsSelectedFromRouteParam();
    }

Header html

<div class=" dropdown-toggle" data-toggle="dropdown">
                XXX
            </div>
            <div class="dropdown-menu">
                <div *ngFor="let cr of country" class="dropdown-item"
                    (click)="getNewsByCountry(cr.value)" >{{cr.name}}</div>
            </div>

app routing ts file

 const routes: Routes = [
        { path: 'news/:typeId', component: XxxComponent },
    { path: '**', component: XxxComponent }
    ];

instead of root param value getting null but i am able to see the change in url. — Madhavi, Jan 22 '19 at 13:09
Since you are taking the snapshot value, it wont dynamically change. You will have to subscribe to get changing typeId values — Dhananjai Pai, Jan 22 '19 at 13:10
You have the in your main app.html? I once forgot to use it and I couldn't find the reason why I dont get the params. — Talg123, Jan 23 '19 at 08:39

Vishnu Singh · Answer 1 · 2019-01-23T08:30:24.810

7

There are two ways of accessing a route parameter.

Statically (One time when page loaded)
Dynamically (Gets updated if param is changed within your app without reloading page by browser)

You can get more reference here: https://angular.io/api/router/ActivatedRouteSnapshot

See following snippet for implementation:

let id = this.activatedRoute.snapshot.params.typeId; // any param name after "params"

or

this.activatedRoute.params.subscribe((params) => {
    let id = params.get('typeId');
});

Make sure you are using above code when component is initialized i.e. in or after ngOnInit().

edited Jan 23 '19 at 08:30

answered Jan 22 '19 at 13:28

Vishnu Singh

431
4
13

I am getting id as"undefined" . I logged params, it showing as empty JSON. Any thoughts on why it is getting empty? – Madhavi Jan 23 '19 at 06:44
1

You should call it in ngOnInit() – Vishnu Singh Jan 23 '19 at 08:28

score 1 · Accepted Answer · answered Jan 23 '19 at 08:50

1

I am trying to get that Params in "HeaderComponent ts" where it should call from "XxxComponent". I added that route param code in XxxComponent ts file now working as expected. I am able to get the route params.

answered Jan 23 '19 at 08:50

Madhavi

474
2
7
20

1

Could you elaborate on what you did? The route wasn't accessible in the sub-component or? – Jeppe Jul 07 '19 at 16:19
After find a lot of answer on StackOverFlow, this answer is the only solve my problem – Hoàng Minh Thông Oct 13 '20 at 03:36

score 1 · Answer 3 · answered Mar 30 '20 at 06:32

1

You can also try

let id = this.activatedRoute.snapshot.queryParams.id

to get the query parameters shared by all the routes

answered Mar 30 '20 at 06:32

Tyutlaeva Ekaterina

63
5

score 0 · Answer 4 · answered Jan 22 '19 at 13:13

0

You call getNewsByCountry in (click), probably cr.value is null, what is cr.value? Is the ID?

answered Jan 22 '19 at 13:13

rikg93

1,101
1
11
21

Getting route param as null in angular 7

4 Answers4