Angular Bottom Sheet

Angular Bottom Sheet Demo

Requires Angular 7.x

Install

npm i angular-bottom-sheet

Usage

First, import AngularBottomSheetModule to your module

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 { }

Add the following component tag in you template.

<button (click)="openBottomSheet()"></button><!-- Toggle bottom sheet -->

<angular-bottom-sheet [options]="options" #bottomSheet>
    <!-- Your content goes here -->
</angular-bottom-sheet>

Declare the options in your component where you want to consume the bottom sheet 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" 
    }
  }
}

Screenshot

Settings

The following list of settings are supported by the component. Configure the options to meet your requirement.

| Setting |Type | Description | Default Value | |:--- |:--- |:--- |:--- | | title | String | To set the title for the bottom sheet component. | "" | | backgroundColor | String | To set the background color of the bottom sheet component. | "#fff" | | fontColor | String | To set the font color of the bottom sheet component. | "#363636" | | enableCloseButton | Boolean | To enable the close button in bottom sheet component. | false | | closeButtonTitle | String | To set the value for close button in bottom sheet component. | "Close" | | darkTheme | Boolean | To enable the dark theme in the bottom sheet component. | false |

Events

• open() - opens the bottom sheet component.

  Example : this.bottomSheet.open()"

• close() - closes the bottom sheet component.

  Example : this.bottomSheet.close()"

• toggle() - toggles the bottom sheet component between open and close states.

  Example : this.bottomSheet.toggle()"