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.

ng new bootstrapmodelExample

Step 2

Open a project in Visual Studio Code using the following commands.

cd bootstrapmodelExample
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.

<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,

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ngxbootstrapemp</title>
<base href="/">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</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.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BsModalService, ModalModule} from 'ngx-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ModelComponent } from './model/model.component';
@NgModule({
declarations: [
AppComponent,
ModelComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ModalModule.forRoot(),
],
providers: [BsModalService],
bootstrap: [AppComponent],
entryComponents: [ModelComponent]
})
export class AppModule { }

app.component.html

In app.component.tml we will write page html.

<button class="btn btn-default" (click)="showmodel()">Show Model</button>
<router-outlet></router-outlet>

app.component.ts

import { Component, Inject } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap';
import { ModelComponent } from './model/model.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ngxbootstrapemp';
constructor( @Inject(BsModalService)
private modalService: BsModalService
) { }
showmodel() {
let modalRef: any = this.modalService.show(ModelComponent, { class: 'modal-lg' });
modalRef.content.title = 'Hello, This is Demo For NXG BootStrap Model.';
}
}

model.component.html

<div class="modal-header">
<h4 class="modal-title pull-left">{{title}}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body pt-1">
<html>Hello This is an Example</html>
</div>

model.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap';
@Component({
selector: 'app-model',
templateUrl: './model.component.html',
styleUrls: ['./model.component.css']
})
export class ModelComponent implements OnInit {
title:string='';
constructor( @Inject(BsModalRef)
public bsModalRef: BsModalRef){}
ngOnInit() {
}
}

Now, run the project using the following command:

ng serve

Summary

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