In this article, I discuss how to add Modal in our Angular application. First, we need to add below line in our app.module.ts file.
.................
//we need to import the first TimepickerModule From Bootstrap.
import { ModalModule } from 'ngx-bootstrap';
...................
@NgModule({
.........
imports: [
ModalModule.forRoot(),
...
]
})
export class AppModule(){}
After adding ModalModule in the app module file. Now we can use these module in any component.
1) Open modal using service
First, we need to “BsModalService” import in our constructor. It has mainly two methods.
1) Show(): this method is used for the open modal. It mainly 2 arguments. First argument passing “TemplateRef” or a component and the second argument is a config object it an optionally argument.
2) hide(): To close open modal.
Let’s create a Basic code for the modal elements.
1) Using Template Modal Open & Close
2) Using Component Modal Open & Close
Next article we discuss on how to open nested modal in our angular application.