Modal
Usage
The <go-modal> component should be the only instance of a modal in the app.
Bindings
closeWithBackdrop?: boolean = false;
modalTitle: string = '';
modalSize: 'lg' | 'xl' = 'lg';
noContentPadding?: boolean = false;
showCloseIcon?: boolean = true;
modalTitle
modalTitle sets the title for the modal.
modalSize
modalSize defines the width of the modal. Currently defaulted to lg.
noContentPadding
noContentPadding determines whether or not to render padding on the modal content. Defaults to false.
Setup
To use the modal anywhere in the app, you must first add it to the app level. This should only be done once per application.
Import the
GoModalModuleintoapp.module.tsimport { GoModalModule } from '@tangoe/goponents'; ({ declarations: [ AppComponent, ], imports: [ GoModalModule ], bootstrap: [AppComponent] }) export class AppModule { }Add the
<go-modal>element toapp.component.html.
Using the Modal service
For this example, the component we want to render in the modal is ModalTestComponent. This component lives in the UiKitModule. To make use of the modal in our component:
In the module that imports your component, import the
GoModalModuleand add theGoModalServiceto the providers.import { GoModalModule, GoModalService } from '@tangoe/goponents'; import { ModalDocsComponent } from './components/modal-docs/modal-docs.component'; import { ModalTestComponent } from './components/modal-test/modal-test.component'; ({ imports: [ GoModalModule ], declarations: [ ModalDocsComponent, ModalTestComponent ], providers: [ GoModalService ] }) export class UiKitModule { }In the component that is telling the modal to open, import the
GoModalService, and the component that is being rendered inside the modal.import { GoModalService } from '@tangoe/goponents'; import { ModalTestComponent } from '../modal-test/modal-test.component'; constructor(private goModalService: GoModalService) { }To open the modal, use the service to call
openModal. This method takes the component type (ModalTestComponent in our case), and the bindings for that component as an object.openModal() { this.goModalService.openModal(ModalTestComponent, { content: 'This is a modal!' }, { modalTitle: 'Example Title' }; }Lastly, the button that triggers the openModal method.
component.html
<go-button (handleClick)="openModal()">Click Me</go-button>View
Modal Backdrop
By default clicking on the backdrop behind the modal will not close the modal. If you wish to enable closing the modal by clicking on the backdrop the closeWithBackdrop binding can be used to enable it.
Code
this.goModalService.openModal(ModalTestComponent, {
content: 'You can close this modal by clicking on the page outside of the modal'
}, {
modalTitle: 'Close With Backdrop Example',
closeWithBackdrop: true
});
View
Modal Close Icon
By default there is a close icon in the upper right corner of a modal. In certain cases where a response is required by a user we might want to remove this icon to force a user to make a decision between a set of choices. This icon can be disabled through the showCloseIcon binding.
Code
this.goModalService.openModal(ModalTestComponent, {
content: 'The only way to close this modal is by clicking outside of the modal on the backdrop'
}, {
modalTitle: 'Close With Backdrop Example',
closeWithBackdrop: true,
showCloseIcon: false
});
View
Modal Sizes
LG Code (Default)
this.goModalService.openModal(ModalTestComponent, {
content: 'This is a lg modal'
}, {
modalTitle: 'LG Modal (Default)'
});
LG View
XL Code
this.goModalService.openModal(ModalTestComponent, {
content: 'This is a xl modal'
}, {
modalTitle: 'XL Modal',
modalSize: 'xl'
});
XL View
Modal Padding
Code
this.goModalService.openModal(ModalTestComponent, {
content: 'This area has no padding'
}, {
modalTitle: 'No Padding Example',
noContentPadding: true
});