Ngv-bottom-sheet NPM

NgvBottomSheet

This project was generated with Angular CLI version 14.2.1.

Why do we must use Ngv Bottom sheet ?

it's open source.
you can open bottom sheet by routes and service that we provided before ...
you can set attributes like clickable back-drop etc .
you don't need to add any component tag in your code .
you will use just a service to work with package and nothing else .
you can swipe down your bottom sheet to close.

How to use ?

npm install ngv-bottom-sheet - to install package in your project.
In your AppModule import the NgvBottomSheetModule
then in your component use NgvBottomSheet to work with that

import { NgvBottomSheetModule } from 'ngv-bottom-sheet';
imports: [
  ...
    NgvBottomSheetModule,
  ...
]

import { NgvBottomSheet } from 'ngv-bottom-sheet';
@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  bottomSheet = inject(NgvBottomSheet);
  openBottomSheet(): void {
    this.bottomSheet.open(MyExampleComponent)
  }
}

you can set some configuration like the below code :
backDropClose - a boolean value , to be able to close bottom sheet by click to backdrop.
space - a number value , the space around bottom sheet and content.
backDropStyle - a string value , could be none for default value , blur and gray.

this.bottomSheet.open(MyExampleComponent, {
  backDropClose: true,
  space: 16,
  backDropStyle: 'blur',
})

as you can see at below code, use can use set a data to use it when bottom sheet opened.

this.bottomSheet.open(MyExampleComponent, {
  data: {
    userData: {
      gitHub: 'https://github.com/wahidwex'
    }
  }
})

you can close bottom sheet by use close('your message') that could be any type and send a message to close subscriber.

this.bottomSheet.open(MyExampleComponent).afterClose().then(closeMessage => {
  // there will got 'my close message could be any type'
})

// and in the MyExampleComponent you can close it
closeAction(): void {
  this.bottomsheet.close('my close message could be any type')
}

import { NgvBottomSheet } from 'ngv-bottom-sheet';
@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class MyExampleComponent implements OnInit {
  bottomSheet = inject(NgvBottomSheet);
  ngOnInit(): void {
    const data = this.bottomSheet.getData();
  ...
  }
}

How to open bottom sheet by routes?

when you want to import the module , which will open your bottom sheet as you want , like below

import { NgvBottomSheetModule } from 'ngv-bottom-sheet';
imports: [
  ...
    NgvBottomSheetModule.setRoutes({
      options : {
        backDropClose: true,
        space: 16,
        backDropStyle: 'blur',
      },
      list: [
        {
          fragment: 'article',
          component: ArticleComponent
        },
        {
          fragment: 'example',
          component: MyExampleComponent
        },
      ],
    }),
  ...
]