Post
Ask Question

Bootstrap Model in Angular 7

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';    
  7.     
  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.


Similar Articles