@lukana/modals

Modals using only `@angular/cdk` as dependencies.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@lukana/modals
Minified + gzip package size for @lukana/modals in KB

Readme

Lukana modals

Modals using only @angular/cdk as dependencies.

Usage

  1. Add @lukana/modals/scss/modal to Your style.scss file or use Your own styles.

  2. Import ModalsModule as dependency.

  3. Add modals content component to entryComponents

  4. Inject ModalService as dependency in You component, and open modal with command ModalService.open(YourComponent):

    @Component({
      selector: 'app-page',
      templateUrl: './app-page.component.html'
    })
    export class AppPageComponent implements OnInit {
    
      constructor(private modalService: ModalService) {
      }
    
      ngOnInit() {
      }
    
      onOpenModal() {
        const dataPassedDoComponent = {name: 'Hello'};
        this.modalService.open(ModalContentComponent, dataPassedDoComponent)
          .subscribe(resp => console.log('returned', resp));
      }
    }
    
  5. In modal component You can Inject ModalService and close modal with return value like this:

    
    @Component({
      selector: 'lukana-modal-content',
      templateUrl: './modal-content.component.html',
      styleUrls: ['./modal-content.component.css']
    })
    export class ModalContentComponent implements OnInit {
      name: string;
      constructor(private modalService: ModalService) {
      }
    
      ngOnInit() {
      }
    
      onClose() {
        this.modalService.close('returnValue');
      }
    }
    

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.