Dynamic ListView templates based on device in Angular

12 Sep 202513 minutes to read
The Syncfusion^® Essential^® JS2 components are designed to be fully responsive across desktop and mobile devices. The ListView component supports dynamic template switching based on the device type, allowing you to provide optimized layouts for different screen sizes.
Integration

In the ListView component, template support is being used. In some cases, the component wrapper is always responsive across all devices, but the template contents are dynamically changed with unspecified (sample side) dimensions. CSS customization is also needed in sample-side to align template content responsively in both mobile and desktop modes. Here, two templates have been loaded for mobile and desktop modes. To check the device mode, a browser module has been imported from the ej2-base package.
app.component.ts
styles.css
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'
import { Component } from '@angular/core';
import { Browser } from '@syncfusion/ej2-base';

@Component({
    imports: [
        ListViewModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `<ejs-listview id='List' [dataSource]='dataSource' [template]='templatecheck ? mob_template : win_template' headerTitle='Syncfusion Blog' [showHeader]='true'>
        <ng-template #mob_template let-dataSource="">
    <div class="settings">
        <div id="postContainer">
            <div id="postImg">
                <img src= /></div>
            <div id="content">
                <div id="info">
                    <div id="logo">
                        <div id="share">
                            <span class="share"></span> </div>
                        <div id="comments"> <span class="comments"></span> </div>
                        <div id="bookmark"> <span class="bookmark"></span> </div>
                    </div>
                </div>
                <div class="name"></div>
                <div class="description"></div>
                <div class="timeStamp"> </div>
            </div>
        </div>
    </div>
</ng-template>
<ng-template #win_template let-dataSource="">
    <div class="settings">
        <div id="postContainer">
            <div id="postImg">
                <img src= /></div>
            <div id="content">
                <div class="name"></div>
                <div class="description"></div>
                <div id="info">
                    <div id="logo">
                        <div id="share">
                            <span class="share"></span> </div>
                        <div id="comments"> <span class="comments"></span> </div>
                        <div id="bookmark"> <span class="bookmark"></span> </div>
                    </div>
                    <div class="timeStamp"> </div>
                </div>
            </div>
        </div>
    </div>
</ng-template></ejs-listview>`
})

export class AppComponent {
    //Define an array of JSON data
    public dataSource: any = [
        { Name: 'IBM Open-Sources Web Sphere Liberty Code', content: 'In September, IBM announced that it would be open-sourcing the code for WebSphere...', id: '1', image: 'https://ej2.syncfusion.com/demos/src/listview/images/1.png', timeStamp: 'Syncfusion Blog - October 19, 2017' },
        { Name: 'Must Reads: 5 Big Data E-books to upend your development', content: 'Our first e-book was published in May 2012-jQuery Succinctly was the start of over...', id: '2', image: 'https://ej2.syncfusion.com/demos/src/listview/images/2.png', timeStamp: 'Syncfusion Blog - October 18, 2017' },
        { Name: 'The Syncfusion Global License: Your Questions, Answered ', content: 'Syncfusion recently hosted a webinar to cover the ins and outs of the Syncfusion global...', id: '4', image: 'https://ej2.syncfusion.com/demos/src/listview/images/3.png', timeStamp: 'Syncfusion Blog - October 18, 2017' },
        { Name: 'Know: What is Coming from Microsoft this Fall ', content: 'On October 17, Microsoft will release its Fall Creators Update for the Windows 10 platform...', id: '5', image: 'https://ej2.syncfusion.com/demos/src/listview/images/6.png', timeStamp: 'Syncfusion Blog - October 17, 2017' }
    ];
    public fields: Object = { text: 'Name' };
    public templatecheck?: boolean;
    constructor() {
        this.templatecheck = Browser.isDevice;
    }
}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';

#sample-list {
    display: block;
    max-width: 400px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

#List img {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    border: 1px solid #ccc;
}

#List {
    display: block;
    max-width: 400px;
    margin: auto;
    border: 1px solid;
    border-color: #c3c3c3;
    border-color: rgba(0, 0, 0, 0.12);
}

#List .settings {
    height: 170px;
    line-height: 70px;
    margin-left: 16px;
    margin-right: 16px;
}

#List .e-list-item {
    height: 170px;
    line-height: 70px;
    padding: 0;
    cursor: pointer;
    border-bottom: 0.8px solid #ddd;
}

#time {
    line-height: 23px;
    margin-top: 13px;
    padding-left: 10px;
    width: 191px;
}

#img {
    float: left;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 20px;
}

#info {
    padding-top: 3px;
}

#List .e-list-header {
    color: white;
    height: 57px;
    background-color: #56697f;
    padding-left: 15px;
    position: relative;
    top: -1px;
}

.bootstrap #List .e-list-header .e-text {
    line-height: 18px;
}

#List .e-list-header .e-text {
    font-family: sans-serif;
    font-size: 18px;
    line-height: 26px;
}

#List .category {
    font-family: "serif";
    font-weight: 600;
    font-size: 19px;
}

#List .name {
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
}

#List .content {
    line-height: 19px;
    font-size: 13px;
    font-weight: 200;
}

#List .e-hover {
    transition: 0.5s;
}

.timeStamp {
    font-size: small;
    margin-bottom: 1px;
    margin-top: -17px;
}

.bookmark::before {
    color: grey;
    float: right;
    line-height: 0;
    margin-bottom: 1px;
    font-family: "Bookmarks";
    content: "\e700";
    margin-left: 3px;
    margin-right: 3px;
    font-size: 16px;
    padding-top: 19px;
    padding-bottom: 5px;
}

.share::before {
    color: grey;
    float: right;
    line-height: 0;
    margin-bottom: 1px;
    font-family: "Bookmarks";
    content: "\e701";
    margin-left: 3px;
    margin-right: 3px;
    font-size: 13px;
    padding-top: 19px;
    padding-bottom: 5px;
}

.comments::before {
    color: grey;
    float: right;
    line-height: 0;
    margin-bottom: 1px;
    font-family: "Bookmarks";
    content: "\e703";
    margin-left: 3px;
    margin-right: 3px;
    font-size: 15px;
    padding-top: 19px;
    padding-bottom: 5px;
}

.bookmark {
    cursor: pointer;
}

.share {
    cursor: pointer;
}

.comments {
    cursor: pointer;
}

.description {
    color: grey;
    line-height: 20px;
    font-size: 15px;
    font-weight: 200;
    text-align: justify;
}

/* csslint ignore:start */

@font-face {
    font-family: 'Bookmarks';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRgAAAEoAAAAVmNtYXDOI85qAAABkAAAAEJnbHlmRXCi8wAAAeAAAAFkaGVhZA8SahsAAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQDwAIAAAAHUAAAACm1heHABEQAyAAABCAAAACBuYW1lFuNPLwAAA0QAAAI9cG9zdLaVZAwAAAWEAAAAXQABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAGHTc9V8PPPUACwPoAAAAANYFEqYAAAAA1gUSpgAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAAEACYAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAwNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQALgAAAAYABAABAALnAecD//8AAOcA5wP//wAAAAAAAQAGAAgAAAABAAIAAwAAAAAAAAA+AIAAsgAAAAMAAAAAAxwD6gANABkAJQAAExE3FxEHLgEnNDcjDgElMxUzFSMVIzUjNTMHHgEXPgE3LgEnDgHQ190MWXcCCWU0RAGWKFBQKFBQlQJdRkZdAQFdRkZdAwn8+fn5AnMBAndZHx0BRWhQKFBQKA5GXQICXUZGXQEBXQAAAAABAAAAAAPqA+oAJAAACQEuASMOAQceARcyNjcBHgEXPgE3LgIHCQEWMz4BNy4BJw4BArn+QxM1HD5WAgJTQRwyEwHGC1I5P1UBAVOCKf5YAbUmND5WAQFWPkFUA2T+7hESAko3OUwBEQ7+6zJAAgJLOTpLASUBBgEMHAFLOTpLAQFLAAACAAAAAAPqA4EADwAcAAABHgEXMjcXJz4BNS4BJw4BBTMVNzMnJjU+ATc1IQIOA4ZlFROGLzM8AoZmZYb98YWBygIRBLOG/QYBvGWHAgRmhyBpQGWGAwOG0sLCBzA2h7MDiAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAJAAEAAQAAAAAAAgAHAAoAAQAAAAAAAwAJABEAAQAAAAAABAAJABoAAQAAAAAABQALACMAAQAAAAAABgAJAC4AAQAAAAAACgAsADcAAQAAAAAACwASAGMAAwABBAkAAAACAHUAAwABBAkAAQASAHcAAwABBAkAAgAOAIkAAwABBAkAAwASAJcAAwABBAkABAASAKkAAwABBAkABQAWALsAAwABBAkABgASANEAAwABBAkACgBYAOMAAwABBAkACwAkATsgQm9va21hcmtzUmVndWxhckJvb2ttYXJrc0Jvb2ttYXJrc1ZlcnNpb24gMS4wQm9va21hcmtzRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABCAG8AbwBrAG0AYQByAGsAcwBSAGUAZwB1AGwAYQByAEIAbwBvAGsAbQBhAHIAawBzAEIAbwBvAGsAbQBhAHIAawBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABCAG8AbwBrAG0AYQByAGsAcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAQIBAwEEAQUADGJvb2ttYXJrLWFkZApzaGFyZS0tLTAxF21lc3NhZ2VzLWluZm9ybWF0aW9uLTAxAAAAAAA=) format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* csslint ignore:end */

#postImg {
    margin-right: 25px;
    margin-top: 30px;
}

#postContainer {
    width: inherit;
    margin-top: 10px;
    display: inline-flex;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Search docs

Ask HelpBot

Search docs

Ask HelpBot

Dynamic ListView templates based on device in Angular

Integration
