Angular Bottom Sheet Component – iamrohit.in

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.

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.

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.

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.

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.

Related