@emintontul/drawer

Basic drawer component for Angular

Usage no npm install needed!

<script type="module">
  import emintontulDrawer from 'https://cdn.skypack.dev/@emintontul/drawer';
</script>

README

Drawer

This is a basic drawer component for angular.

Demo

Installation

npm i @emintontul/drawer

Usage

You'll need to add MetDrawerModule to your application module.

import { MetDrawerModule, MetDrawerService } from '@emintontul/drawer';
...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MetDrawerModule,
    ...
  ],
  providers: [
      MetDrawerService,
      ...
    ],
  bootstrap: [AppComponent]
})

export class AppModule {
}

Add the met-drawer attribute:

import { Button, MetDrawerService } from '@emintontul/drawer';
@Component({
  selector: 'sample',
  template:`
  <met-drawer [isActive]="isDrawerActive" [buttons]="buttonArray" [title]="'Drawer Title'">
    HTML or something goes here...
  </met-drawer>
  `
})
class SampleDrawer {
  isDrawerActive: boolean = false;
  buttonArray: Button[] = new Array<Button>();
  constructor(private drawer: MetDrawerService){
    this.buttonArray.push({text: "Save", class: "btn btn-primary", callFunction: this.someFunction});
  }
  showDrawer(){
      this.drawer.showDrawer();
  }
  someFunction(){
      ...
  }
}

That's it! Now you can use drawer.