Hyper link navigation in EJ2 TypeScript ListView control

28 Jan 20254 minutes to read

You can utilize the anchor tag along with the href attribute in the ListView’s template property for enabling navigation links.

let anchor_template: string = "<a target='_blank' href='${url}'>${name}</a>";

In the example below, a ListView is rendered with hyperlinks to different search engines. The links open in a new tab or window as specified by the target='_blank' attribute.

import { ListView } from '@syncfusion/ej2-lists';

//Define an array of JSON data
let dataSource: { [key: string]: Object }[] = [
    { 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' }
];
let anchor_template: string = "<a target='_blank' href='${url}'>${name}</a>";

// Initialize ListView control
let listObj: ListView = new ListView({

    //Set defined data to dataSource property
    dataSource: dataSource,

    //Set header title
    headerTitle: 'Search engines',

    //Set true to show header title
    showHeader: true,

    template: anchor_template

});

//Render initialized ListView control
listObj.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for ListView </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for ListView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
    <style>
        #element {
            display: block;
            max-width: 350px;
            margin: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }

        #element a {
            text-decoration: none;
        }

        #element .e-list-header {
            background: rgb(2, 120, 215);
            color: white;
            font-size: 19px;
            font-weight: 500;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}