@lukana/modals
TypeScript icon, indicating that this package has built-in type declarations

2.0.2 • Public • Published

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');
      }
    }

Package Sidebar

Install

npm i @lukana/modals

Weekly Downloads

3

Version

2.0.2

License

none

Unpacked Size

96.2 kB

Total Files

29

Last publish

Collaborators

  • piernik