@lukana/modals

Lukana modals

Modals using only @angular/cdk as dependencies.

Usage

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

• Import ModalsModule as dependency.

• Add modals content component to entryComponents

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

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