CODEWITHSUNDEEP
angularjhipster
JiDiX
JiDiX

Reputation: 11

Passing parameters to popup dialog

I'm passing an id from one component to another and face this error.

“cannot read property ”id" of null"

--> parent route (/order.component)

[routerLink]="['/order/payment'];

--> other route (/order-payment.component) -> not sure how to register this as child routes. I navigate to the order-payment page by using routerLink as shown above

Once, i reach the payment page. I like to pass the order id to the modal dialog to do some processing by clicking on Pay button.

Using routerLink again,

[routerLink]="['/', 'order', { outlets: { popup: order.id + '/payment'} }]"

After clicking on Pay button, this appears in my url:

order/(payment//popup:3/processPayment)

route.ts

export const OrderRoute: Routes = [
{
    path: '',
    component: OrderComponent,
    resolve: {
        pagingParams: JhiResolvePagingParams
    },
    data: {
        authorities: ['ROLE_USER'],
        defaultSort: 'id,asc',
        pageTitle: ''
    },
    canActivate: [UserRouteAccessService]
},
{
    path: ':id/view',
    component: OrderDetailComponent,
    resolve: {
        order: OrderResolve
    },
    data: {
        authorities: ['ROLE_USER'],
        pageTitle: ''
    },
    canActivate: [UserRouteAccessService]
},

{
    path: ':id/processPayment',
    component: PaymentPopupComponent,
    data: {
        authorities: ['ROLE_USER'],
        pageTitle: ''
    },
    canActivate: [UserRouteAccessService],
    outlet: 'popup'
}

Order page

Payment page

Upvotes: 1

Views: 2165

Answers (1)

S. Kuiter
S. Kuiter

Reputation: 99

You can access the :id parameter in the PaymentPopupComponent by using the activated route

constructor(private route: ActivatedRoute) {}
id = this.route.snapshot.url[0].path;
// or
this.route.params.subscribe((param) => {
    this.id = param.id; 
})

Or something similar.

Upvotes: 1

Related Questions