How to use ng-bootstrapped Popup Modals within Angular Components
Tags: angular, ngbootstrap, bootstrap, modals
Published: 2019-09-21 03:49:58



  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
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p1f4wwz37lzs5o70f17q.JPG)

app.component.html
 ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tf6be9gwomb8o6e1w8nh.JPG)


app.component.ts
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ul9skddwxq2kscgp53i8.JPG)

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

<b><u>Step 1</u></b>

<li>Go to the root project folder of your project.</li>

<li>Install ng-bootstrap to your project by running 
                                    <code>npm install --save @ng-bootstrap/ng-bootstrap</code></li>

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

app.module.ts
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/g9e0sjbpidyzrt34yxlb.JPG)


<li>Go to *index.html* and copy the <a href="https://getbootstrap.com/docs/4.3/getting-started/introduction/">bootstrap CDN </a>code snippent from bootstrap site , within the scope of <head></head> tags.</li>
                            ( For now,    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> )


<b><u>Step 2</u></b>

<ul>
<li>Go to ng-bootstrap site and find the bootstrap code section for Modal.(<a href="https://ng-bootstrap.github.io/#/components/modal/examples">Modal-ng-bootstrap</a>) </li>
   

Section for Modals
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qi26n717oyv1e4qhybkl.JPG)
  <br>   
<li>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.</li>


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nbwr7uci1hmuse4xcksp.png)


<li>Here , in the above code, you can find two classes as NgbdModalContent (squared in red colour) and NgbdModalComponent (squared in purple colour).</li> 

<li>Now it's time to copy code from this snippet and paste it into your app.component.ts file. </li>

<li>First, import the modules shown in Section 1 in the above image into your app.component.ts file.</li>

<li>Secondly, Copy the whole code in section two and paste it at the very end of   the app.component.ts file.</li>

<li>Thirdly, inject the service into the constructor of your AppComponent class in app.component.ts file ,as shown in section 3 .</li>

<li>And, Lastly, Copy the method "copy()" shown in the section 4 as a netive method of  the AppComponent class.</li>

<li>This method can be used in an (click) event within the button in html file now.</li>



<b><u>Step 3</u></b>

<li>Enter NgbdModalContent class  in declarations array as well as an entryComponent in app.module.ts file.  </li>     

app.module.ts
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/c7cw9ms1sexvf1j1f4oq.JPG)

<br>
<b><u>Finally</u></b>

This is my app.component.ts file and html file .

app.component.ts
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/u7udaqzejmatw6jcz93b.JPG)


app.component.html
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tdtaqpic7p0wjzrryvxb.JPG)

Final View when clicked on the button on the page,
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qyln2uad6bbq13pnyf6t.JPG)



<br>
Enjoy bootstrap!!!