@lukana/modals

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