Initialize the sidebar listview in Angular Sidebar component
6 Sep 20222 minutes to read
Any HTML element can be placed in the Sidebar content area. Sidebar supports all types of HTML structures like TreeView
, ListView
, etc.
In the following example, Sidebar has been rendered with ListView component in its content area.
import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
@ViewChild('sidebar') sidebar: SidebarComponent;
public width: string = '100%';
public type: string = 'Over';
public data: Object[] = [
{ text: 'Home', id: 'list-02' },
{ text: 'Offers', id: 'list-03' },
{ text: 'Support', id: 'list-04' },
{ text: 'Logout', id: 'list-06' }
];
toggleClick() {
this.sidebar.toggle();
}
closeClick() {
this.sidebar.hide();
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SidebarModule } from '@syncfusion/ej2-angular-navigations';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
import { AppComponent } from './app.component';
@NgModule({
imports: [SidebarModule, ListViewModule, BrowserModule],
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);