Welcome folks today in this blog post we will be using the ngx-smart-modal
library to show popup
modal windows containing the sample data
and close buttons in typescript in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new sampleproject
cd sampleproject
npm i ngx-smart-modal
And after that you will see the below directory
structure of the angular app as shown below
And now we need to go to app.module.ts
file and import the below modules
and services
and add it inside the imports
and providers
array as shown below
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { NgxSmartModalModule, NgxSmartModalService } from 'ngx-smart-modal'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, NgxSmartModalModule.forRoot() ], providers: [ NgxSmartModalService ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
And now we need to copy paste the below html
code inside the app.component.html
file as shown below
app.component.html
1 2 3 4 5 6 7 |
<ngx-smart-modal #popupOne [identifier]="'popupOne'"> <h1>Title 1</h1> <p>Hello</p> <button (click)="popupOne.close()">Close</button> </ngx-smart-modal> <button (click)="ngxSmartModalService.getModal('popupOne').open()">Open myModal 1</button> |
As you can see in the above html. code we have the ngx-smart-modal
directive and we have attached the reference
of the modal window and then we have passed the identifier
property. And then we have provided the data inside the modal
window. And then we have the button to close
the popup window. And lastly we have the button to toggle
the visibility of the popup window.
And now we need to go to app.component.ts
file and copy paste the below code
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { AfterViewInit, Component } from '@angular/core'; import { NgxSmartModalService } from 'ngx-smart-modal'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements AfterViewInit { constructor(public ngxSmartModalService: NgxSmartModalService) { } ngAfterViewInit() { const pen: Object = { prop1: 'test', prop2: true, prop3: [{ a: 'a', b: 'b' }, { c: 'c', d: 'd' }], prop4: 327652175423 }; this.ngxSmartModalService.setModalData(pen, 'popupOne'); } } |
As you can see in the above typescript
code we have passed the service
of the ngx-smart-modal
inside the constructor of the component. And then we have defined the data
that needs to be passed inside the lifecycle
method of angular component.