Angular Bottom Sheet Component

In this post I am going to share a simple Angular Bottom Sheet Component. you can display a button sliding popup with some content on your website. it support multiple theme as well.
Angular Bottom Sheet Component

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

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()

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by rahul051296. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.