Capture route parameter value in angular

Question

I am using VS 2017 (framework 2.7) and Angular 5 to develop my application. I want to get the parameter value from url. I have written the following in app.module.ts:

RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'create-strings', component: CreateStringsComponent },
      { path: 'strings/edit/:id', component: CreateStringsComponent },
      { path: 'fetch-strings/:prop', component: StringsComponent },
      { path: 'fetch-strings/:prop', component: StringsComponent },
      { path: 'fetch-strings/:prop', component: StringsComponent }

      //{ path: '**', redirectTo: 'home' }  
    ])
  ],

The nav-menu.component.html menu file is like:

<li [routerLinkActive]='["link-active"]'>
              <a [routerLink]="['/fetch-strings']" [queryParams]="{prop: 'loc'}" (click)='collapse()'>
                <span class='glyphicon glyphicon-th-list'></span> Strings
              </a>
            </li>
            <!--https://stackoverflow.com/questions/37880876/how-to-pass-query-parameters-with-a-routerlink-in-the-new-router-v-3-alpha-vlad-->
            <li [routerLinkActive]='["link-active"]'>
              <a [routerLink]="['/fetch-strings']" [queryParams]="{prop: 'dep'}" (click)='collapse()'>
                <span class='glyphicon glyphicon-th-list'></span> Department
              </a>
            </li>
            <li [routerLinkActive]='["link-active"]'>
              <a [routerLink]="['/fetch-strings']" [queryParams]="{prop: 'des'}" (click)='collapse()'>
                <span class='glyphicon glyphicon-th-list'></span> Designation
              </a>
            </li>

I want to capture the parameter value and change the and title of the page accordingly. For that purpose I have written the following code in the Strings.Component.ts file:

 constructor(public http: Http, private _router: Router, private _stringsService: StringsService, private _activeRoute: ActivatedRoute) {
        this.getStrings();
    }

    //https://stackoverflow.com/questions/45309131/angular-2-4-how-to-get-route-parameters-in-app-component
    ngOnInit() {
        debugger;
        //console.log(this._activeRoute.snapshot.params['prop']);

        //this.var1 = this._activeRoute.snapshot.params['prop'];
        //this.var2 = this._activeRoute.params.subscribe(params => { this.var1 = params['prop']; });

        this._activeRoute.queryParams.subscribe((prop: Params) => {
            console.log(prop);
        });

        if (this.var1 == "loc") {
            this.title = "Location";
        }
        else if (this.var1 == "dep") {
            this.title = "Department";
        }
        else if (this.var1 == "des") {
            this.title = "Designation";
        }
    }

The code:

this._activeRoute.queryParams.subscribe((prop: Params) => {
            console.log(prop);
        });

is showing the parameter value properly. 1) But how can I store the parameter value in a variable so that I can use it to change the title dynamically.

this.var1 = this._activeRoute.snapshot.params['prop'];

is not working.

2) Second problem, When I click on the other links (nav-menu.component.html file), the first menu always remains selected.

Any clue?

Thanks

Partha

Chellappan வ · Answer 1 · 2018-08-15T17:44:17.530

0

Remove input property binding from routerLinkActive Directive

  <li routerLinkActive='["link-active"]'>
                  <a [routerLink]="['/fetch-strings']" [queryParams]="{prop: 'loc'}" (click)='collapse()'>
                    <span class='glyphicon glyphicon-th-list'></span> Strings
                  </a>
                </li>
                <!--https://stackoverflow.com/questions/37880876/how-to-pass-query-parameters-with-a-routerlink-in-the-new-router-v-3-alpha-vlad-->
                <li routerLinkActive='["link-active"]'>
                  <a [routerLink]="['/fetch-strings']" [queryParams]="{prop: 'dep'}" (click)='collapse()'>
                    <span class='glyphicon glyphicon-th-list'></span> Department
                  </a>
                </li>
                <li routerLinkActive='["link-active"]'>
                  <a [routerLink]="['/fetch-strings']" [queryParams]="{prop: 'des'}" (click)='collapse()'>
                    <span class='glyphicon glyphicon-th-list'></span> Designation
                  </a>
                </li>

If you want to get prop value from params then you have to be in that url otherwise you will data undefined or null

this._activeRoute.snapshot.params['prop'];

If you want to get queryParams use snapshot.queryParams

this._activeRoute.snapshot.queryParams['prop']

edited Aug 15 '18 at 17:44

answered Aug 15 '18 at 14:56

Chellappan வ

23,645
3
29
60

My question was how could I store value of parameter in var1 variable? – Partha Aug 15 '18 at 16:26
define variable var1 and store – Chellappan வ Aug 15 '18 at 16:28
I did it. But this.var1 = this._activeRoute.snapshot.params['prop']; statement is not working. – Partha Aug 15 '18 at 16:29
if you use qureyParms.subscribe are you getting data? – Chellappan வ Aug 15 '18 at 16:51
this._activeRoute.snapshot.queryParams['prop'] ---> Showing 'var1 :undefined' – Partha Aug 15 '18 at 18:06
check this example https://stackblitz.com/edit/angular-queryparams-example-h4qhdw – Chellappan வ Aug 15 '18 at 18:08
I can log the value. But can't store it in a variable like --> this.var1 = his._activeRoute.snapshot.queryParams['prop'] – Partha Aug 15 '18 at 18:11
can you create stackblitz – Chellappan வ Aug 15 '18 at 18:13
is there any specific reason to not using queryParams.subscribe? – Chellappan வ Aug 15 '18 at 18:14
I can log the value like -> this._activeRoute.queryParams.subscribe((prm: Params) => { console.log(prm); . But how can I store value from it? – Partha Aug 15 '18 at 18:31
this._activeRoute.queryParams.subscribe((prm: Params) => { this.var1=prm} – Chellappan வ Aug 15 '18 at 18:33
It is giving two errors 1) this.var1 ->Type 'Params' is not assigned to type 'string'. and 2) It is expecting ')' – Partha Aug 15 '18 at 18:41
this._activeRoute.queryParams.subscribe((prm: Params) => { let var1=prm} try this – Chellappan வ Aug 15 '18 at 18:44
It is saying variable 'undefined'. – Partha Aug 15 '18 at 19:11

Sanoj_V · Answer 2 · 2018-08-27T13:14:58.210

0

This might be helpful.

this.var1 = this._activeRoute.snapshot.paramMap.get('prop');

Reference angular.io

Hope this help you!!

edited Aug 27 '18 at 13:14

answered Aug 15 '18 at 16:43

Sanoj_V

2,936
1
12
28

I have tried this.var1 = this._activeRoute.snapshot.paramMap.get('prop');. But it is returning null. – Partha Aug 15 '18 at 16:51
@Partha console this `this._activeRoute.snapshot.params`. Check the params what it gives in console. – Sanoj_V Aug 15 '18 at 17:24
this._activeRoute.snapshot.queryParams['prop'] ---> Showing 'var1 :undefined' but I can log the value like: this._activeRoute.queryParams.subscribe((prm: Params) => { console.log(prm); }); – Partha Aug 15 '18 at 18:08

score 0 · Answer 3 · answered Aug 16 '18 at 14:26

0

The following code has solved my problem:

this.var1 = this._activeRoute.snapshot.queryParams.prm;

prm -> is name of the parameter.

Thanks

answered Aug 16 '18 at 14:26

Partha

469
2
14
32

Capture route parameter value in angular

3 Answers3