Angular Bottom Sheet Demo
Requires Angular 7.x
npm i angular-bottom-sheet
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"
}
}
}
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 |
-
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()"
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent