Render listview with hyper link navigation in Angular Listview component
27 Sep 20232 minutes to read
We can use anchor
tag along with href
attribute in our ListView template
property for navigation.
<ng-template #template let-data="">
<a target='_blank' href=""></a>
</ng-template>
In the below sample, we have rendered ListView
with search engines URL.
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div id="sample">
<ejs-listview id='List' [dataSource]='data' headerTitle='Search engines' showHeader='true'>
<ng-template #template let-data="">
<a target='_blank' href=""></a>
</ng-template>
</ejs-listview>
</div>
`,
})
export class AppComponent {
public data=[
{name: 'Google', url: 'https://www.google.com'},
{name: 'Bing', url: 'https://www.bing.com' },
{name: 'Yahoo', url: 'https://www.yahoo.com'},
{name: 'Ask.com', url: 'https://www.ask.com'},
{name: 'AOL.com', url: 'https://www.aol.com'},
];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ListViewModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);