In side iggrid column template,had a hyperlink instead of href how can i use angular routerlink.
You'll need to use navigate method of the router you're using angular.io/.../router
Thats what my question, angular routing is not working inside ig grid column template
Yes, the reason is that IgniteUI has its own templating(not using the Angular templating). To use the routing into a grid you need to navigate the router on your own. Also in order to access the router you are required to invoke it outside angular, because the grid column template is not into the context of the Angular Component.
I prepared a sample to demonstrate what I'm saying - https://stackblitz.com/edit/angular-nq8kqr-wsehqg
Please review it and let me know if you have further questions.
In your sample,you are not using iggrid right?
I have to use igGrid and inside the grid hyperlink routerlink is not working because it is IgniteUI template.
So is there any way to call angular routing from igGrid column template
Yes, this is igGrid. routerLink is not working inside the template cell. So you have to inject the router and use router.navigate method to go through the different views. The stackblitz sample is demonstating this.
route.navigate also not working. onclick='this.router.navigate(['/overview'])' I am using this inside hyperlink.
Even I am not bale to call any angular related functions.can you give ma an example with iggrid
As previously mentioned this.router will not exist in the context of the grid template because it does not go through Angular’s templating engine.
Since the igGrid is a jQuery based component it uses a custom templating engine which operates outside Angular’s scope.
Have you had the change to open and the previously referenced sample?
More specifically please open the app.component.ts file that contains the grid’s option definition:
https://stackblitz.com/edit/angular-nq8kqr-wsehqg?file=src%2Fapp%2Fapp.component.ts
Please note the column definition:
columns: [
{ key: "name", template: "<button onclick='angularComponentRef.componentFn(\"${name}\")'>${name}</button>" }
]
Please note ‘angularComponentRef’ is a globally defined object so that it can be accessed in the template and the componentFn that is defined inside it calls the router navigate method:
constructor(private router: Router, private zone:NgZone) { window['angularComponentRef'] = { zone: this.zone, componentFn: (value) => this.navigate(value), component: this }; } navigate(val) { this.router.navigate([val]); } }
Please refer to the sample again.
Let me know if you encounter any issues when implementing this approach in your own code or if you have any additional questions or concerns.
Regards,
Maya Kirova