Lukana modals
Modals using only @angular/cdk
as dependencies.
Usage
-
Add
@lukana/modals/scss/modal
to Yourstyle.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 commandModalService.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'); } }