How to use ng-bootstrapped Popup Modals within Angular Components

#angular #ngbootstrap #bootstrap #modals

Hello guys, this article is about how to add ng-bootstrapped modals within your components in Angular application. Going through this article, a very beginner can learn how to add and use different bootstrapped gadgets and other stuffs with your Angular application.

I have already created a very simple project but not yet bootstrapped. I just need to add a popup message box when clicking on the button on the page.
Below is how my application looks right now and I have used only app.component.ts and app.component.html files for this.

Initial Web Page

app.component.html

app.component.ts

Now let's begin to add the requirements to continue.

Step 1

Go to the root project folder of your project.

Install ng-bootstrap to your project by running npm install --save @ng-bootstrap/ng-bootstrap

Go to app.module.ts file and import the Ngbmodule inside import array. import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

app.module.ts

Go to index.html and copy the bootstrap CDN code snippent from bootstrap site , within the scope of tags.

( For now, )

Step 2

Go to ng-bootstrap site and find the bootstrap code section for Modal.(Modal-ng-bootstrap)

Section for Modals

Within the section I have circled in , when you click the button with name "</>Code", you can find a code file with the name modal-component.ts with the following code snippet.

Here , in the above code, you can find two classes as NgbdModalContent (squared in red colour) and NgbdModalComponent (squared in purple colour).
Now it's time to copy code from this snippet and paste it into your app.component.ts file.
First, import the modules shown in Section 1 in the above image into your app.component.ts file.
Secondly, Copy the whole code in section two and paste it at the very end of the app.component.ts file.
Thirdly, inject the service into the constructor of your AppComponent class in app.component.ts file ,as shown in section 3 .
And, Lastly, Copy the method "copy()" shown in the section 4 as a netive method of the AppComponent class.
This method can be used in an (click) event within the button in html file now.