Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Angular 14 ngx-smart-modal Example to Show Popup Modal Window With Data & Close Button in TS

Posted on February 10, 2023

 

 

Welcome folks today in this blog post we will be using the ngx-smart-modal library to show popupmodal 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

 

 

TypeScript
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

 

 

TypeScript
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.

 

 

 

Recent Posts

  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Android Java Project to Download Random Image From Unsplash Using OkHttp & Picasso Library & Display it
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme