Angular Badge Component: Responsive Notification Badge

<div class="col-lg-12 control-section">
    <div class="sample_container badge-list">
        <ejs-listview id='lists' [dataSource]='dataSource' [fields]='fields' headerTitle='Inbox' [showHeader]='true' (actionComplete)="onActionComplete()">
            <ng-template #template let-dataSource="">
                <div class="listWrapper" style="width: inherit;height: inherit;">
                    <span class=" list_svg">&nbsp;</span>
                    <span class="list_text"> </span>
                    <span class=""></span>
                </div>
            </ng-template>
        </ejs-listview>
    </div>
</div>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import * as dataSource from './dataSource.json';
/**
 *  Sample for CSS Basic Layout Badge
 */
@Component({
    selector: 'control-content',
    templateUrl: 'list-view.html',
    styleUrls: ['list-view.css'],
    encapsulation: ViewEncapsulation.None
})

export class ListviewController {
    // Data source for listview, badge field is the class data for Badges
    public dataSource: { [key: string]: Object }[] = (dataSource as any).listdata;

    // Map fields
    public fields: object = { groupBy: 'type' };

    public onActionComplete() {
        let list: HTMLElement = document.getElementById('lists').getElementsByClassName('e-list-group-item')[0] as HTMLElement;
        list.style.display = 'none';
    }
}