Introduction

In this article, I am going to explain how to use the bootstrap model. I am also creating a demo project for better understanding. Furthermore, in this article, I will explain how to open a component as a model.
The Bootstrap Model is a popup window that is displayed on top of the current page. It is a lightweight, but powerful & multipurpose popup.
In this article we will learn how to display a particular component on top of the current page. We will also discuss how to share information on that component.
Prerequisites
  • Angular 7
  • HTML/Bootstrap
For this article, I have created an Angular project using Angular 7. For creating an Angular project, we need to follow the following steps:
Step 1
I have created a project using the following command in the Command Prompt.
  1. ng new bootstrapmodelExample
Step 2
Open a project in Visual Studio Code using the following commands.
  1. cd bootstrapmodelExample
  2. code.
Step 3
Now, we need to install ngx bootstrap in our project using the following command in the terminal.
npm install ngx-bootstrap --save
Step 4
After installing bootstrap, we should import bootstrap css in index.html.
  1. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Index.html will look as below,
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Ngxbootstrapemp</title>
  6. <base href="/">
  7. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <link rel="icon" type="image/x-icon" href="favicon.ico">
  10. </head>
  11. <body>
  12. <app-root></app-root>
  13. </body>
  14. </html>
App.module.ts
In App.module.ts we will import all modules and components.
Note
We should declare as entrycomponent those components that are displayed as a model.
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { BsModalService, ModalModule} from 'ngx-bootstrap';
  4. import { AppRoutingModule } from './app-routing.module';
  5. import { AppComponent } from './app.component';
  6. import { ModelComponent } from './model/model.component';
  8. @NgModule({
  9. declarations: [
  10. AppComponent,
  11. ModelComponent
  12. ],
  13. imports: [
  14. BrowserModule,
  15. AppRoutingModule,
  16. ModalModule.forRoot(),
  17. ],
  18. providers: [BsModalService],
  19. bootstrap: [AppComponent],
  20. entryComponents: [ModelComponent]
  21. })
  22. export class AppModule { }
app.component.html
In app.component.tml we will write page html.
  1. <button class="btn btn-default" (click)="showmodel()">Show Model</button>
  2. <router-outlet></router-outlet>
app.component.ts
  1. import { Component, Inject } from '@angular/core';
  2. import { BsModalService } from 'ngx-bootstrap';
  3. import { ModelComponent } from './model/model.component';
  4. @Component({
  5. selector: 'app-root',
  6. templateUrl: './app.component.html',
  7. styleUrls: ['./app.component.css']
  8. })
  9. export class AppComponent {
  10. title = 'ngxbootstrapemp';
  11. constructor( @Inject(BsModalService)
  12. private modalService: BsModalService
  13. ) { }
  14. showmodel() {
  15. let modalRef: any = this.modalService.show(ModelComponent, { class: 'modal-lg' });
  16. modalRef.content.title = 'Hello, This is Demo For NXG BootStrap Model.';
  17. }
  18. }
model.component.html
  1. <div class="modal-header">
  2. <h4 class="modal-title pull-left">{{title}}</h4>
  3. <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
  4. <span aria-hidden="true">×</span>
  5. </button>
  6. </div>
  7. <div class="modal-body pt-1">
  8. <html>Hello This is an Example</html>
  9. </div>
model.component.ts
  1. import { Component, OnInit, Inject } from '@angular/core';
  2. import { BsModalService, BsModalRef } from 'ngx-bootstrap';
  3. @Component({
  4. selector: 'app-model',
  5. templateUrl: './model.component.html',
  6. styleUrls: ['./model.component.css']
  7. })
  8. export class ModelComponent implements OnInit {
  9. title:string='';
  10. constructor( @Inject(BsModalRef)
  11. public bsModalRef: BsModalRef){}
  12. ngOnInit() {
  13. }
  14. }
Now, run the project using the following command:
  1. ng serve
Bootstrap Model In Angular 7
Bootstrap Model In Angular 7

Summary

In this article, I have discussed how to use the bootstrap model in Angular 7.