Custom Bottom Sheet Component For Angular

Description:

An easy implementation of the bottom sheet on your AngularJS web applications.

Features:

• Light and dark theme
• Custom trigger button
• Custom font/background colors

How to use it:

1. Install and import the Bottom Sheet Component in your Angular project.

# NPM
$ npm install angular-bottom-sheet --save

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularBottomSheetModule } from 'angular-bottom-sheet';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularBottomSheetModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Add the Bottom Sheet together with a toggle button to your template.

<button (click)="openBottomSheet()"></button>
<angular-bottom-sheet [options]="options" #bottomSheet>
  Any Content Here
</angular-bottom-sheet>

3. Declare the options in your component.

import { Component, ViewChild } from '@angular/core';
import { AngularBottomSheetComponent, AngularBottomSheetConfig } from 'angular-bottom-sheet';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('bottomSheet') bottomSheet: AngularBottomSheetComponent;
  options: AngularBottomSheetConfig;
  openBottomSheet() {
    this.bottomSheet.open();
  }
  ngOnInit(){
    this.options = {
      title:"Angular Bottom Sheet",
      backgroundColor: "#ffffff", 
      fontColor: "#363636",
      enableCloseButton: true,
      closeButtonTitle: "close",
      darkTheme: true
    }
  }
}

4. Toggle the Bottom Sheet.

// open
this.bottomSheet.open();
// close
this.bottomSheet.close();
// toggle
this.bottomSheet.toggle();