ngx-side-template v0.1.7

NgxSideTemplate

https://www.npmjs.com/package/ngx-side-template

npm i ngx-side-template

Sample Code

<lib-ngx-side-template [items]="items" [divContent]="templateText"></lib-ngx-side-template>

app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import {NgxSideTemplateModule} from 'ngx-side-template';
  imports: [
    NgxSideTemplateModule
  ],
  schemas: [    
    NO_ERRORS_SCHEMA
  ]

app.component.html

<lib-ngx-side-template [items]="items" [divContent]="templateText" (changeActiveLink)="updateItemList($event)"></lib-ngx-side-template>

app.component.ts

  templateText:any=` <h2>Responsive Surlebar Example</h2>
  <p>This example use media queries to transform the surlebar to a top navigation bar when the screen size is 700px or less.</p>
  <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
  <h3>Resize the browser window to see the effect.</h3>`;
  items = [
    {url: 1, name:'Superman'},
    {url: 2, name:'Batman'},
    {url: 5, name:'BatGirl'},
    {url: 3, name:'Robin'},
    {url: 4, name:'Flash'}
];

  updateItemList(items: Array<any>){
    this.items = items;
  }