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="{{data.url}}">{{data.name}}</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="{{data.url}}">{{data.name}}</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';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);