angular-modal-simple v0.2.2

Angular Modal

Provides a simple, minimal configuration modal implementation.

Installation

npm install angular-modal-simple

Version Support

Angular 10.1+

Use

Import AngularModalModule into your application:

@NgModule({
    ...
    imports: [
        AngularModalModule.forRoot()
    ]
    ...
})

Import ModalService to display ModalComponents.

@Injectable()
public class TestService {
    constructor(private modalService: ModalService) {}
    displayTest(): void {
        this.modalService.display(TestComponent);
    }
}

Configuration Options

ModalOptions configuration options include:

ModalService.setDefaultOptions() can be used to define the default ModalOptions for all Modal instances.

ModalService:

Example:

TestComponent:

@Component()
public class TestComponent {
    @Input() inputA: string;
    @Input() inputB: number;
}

TestService:

@Injectable()
public class TestService {
    constructor(private modalService: ModalService) {}
    displayTest(): void {
        this.modalService.display(TestComponent, {
            data: {
                inputA: 'test',
                inputB: 3
            },
            dismissableMask: false,
            styles: {
                backgroundColor: '#eee'
            }
        });
    }
}