Angular Passing Value to index.html

Question

I am trying to pass a value to index.html , which call app.componenet. I am trying to process the query string tha get passed in my root component before I do a redirect

LINK Goal

http://localhost:4200/index/1

HtML

  <app-root></app-root>

APP.Component

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AppComponentService]
})

export class AppComponent {
 constructor(elm: ElementRef,private _service: AppComponentService, private _rout: ActivatedRoute) {

        this._rout.params.subscribe(params => {

            console.log('id' + params['id']);//value is undefined


        });
}

App Routes

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },

*****************************UPDATE**********************************************************************

My issue should be coming fro the rout..please keep in mind I am trying to hit the app.comonent first to perform some logic before I do redirect to dashboard

I change my rout to

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

@NgModule({
    imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
    exports: [RouterModule]
})

export class AppRoutingModule { }

app.component

constructor(elm: ElementRef,private _service: AppComponentService, private _rout: ActivatedRoute) {

        this._rout.params.subscribe(params => {

            console.log('id' + params['id']);//value is undefined
             //some logic then will redirect to dashboard

        });

Are you thinking something like this might help? stackoverflow.com/questions/41969571/… — blurfus
– blurfus, Commented Mar 27, 2019 at 18:48
If you use a query param (e.g., http://localhost:4200/index/?v=1) you don't need to configure any route and you can obtain it subscribing to queryParams instead of params. — dcg
– dcg, Commented Mar 27, 2019 at 18:50
@dcg I tried this (localhost:4200/index/?id=1) value still null for params['id']....i even tried this.val=elm.nativeElement.getAttribute('id'); — rgoal
– rgoal, Commented Mar 27, 2019 at 18:58
@rgoal You have to use this._rout.queryParams.subscribe(...) — dcg
– dcg, Commented Mar 27, 2019 at 19:00
@rgoal, have you checked out stackoverflow.com/questions/39858471/…? — ABOS
– ABOS, Commented Mar 27, 2019 at 19:42

Venu Duggireddy · Accepted Answer · 2019-03-28 19:32:59Z

Here is how you can get the parameters in app.component.ts based on the URL.

ie., http://localhost:4200/index/1

 export class AppComponent {
      constructor(private router: Router) {
        this.router.events.subscribe( (event: RouterEvent) => {
          if(event.url.startsWith('/index/')){
            console.log("id is %s", event.id);
            this.router.navigate(['/']);
          }

        });
      }

    }

If you want to load static global variables you can pass with the route data object

ex:

{ path: '', redirectTo: '/dashboard', pathMatch: 'full', data : {'one':'1', 'two': '2'} },

Then you can get data object as below

export class AppComponent {

       constructor(private router: Router) {
           this.router.events.subscribe( (event: RouterEvent) => {
             console.log(event['snapshot'].data)      
           });
       }

}

Collectives™ on Stack Overflow

Angular Passing Value to index.html

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related