Create a smart modal popup to display some informatio of any using ngx-smart-modal. To use ngx-smart-modal in your project install it via npm:
npm i ngx-smart-modal --save
Follow next code to apply it in your current project.
component.html:
<button (click)="ngxSmartModalService.getModal('myModal').open()">Open myModal</button>
Modal content:
set the modal code in the below of the component.html.
<ngx-smart-modal #myModal identifier="myModal"> <h1>Title</h1> <p>Some stuff...</p> <button (click)="myModal.close()">Close</button> </ngx-smart-modal>
app.module.ts:
import { NgxSmartModalModule } from 'ngx-smart-modal'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, NgxSmartModalModule.forRoot() ], exports:[RouterModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Page.components.ts: import { NgxSmartModalService } from 'ngx-smart-modal'; export class PageComponent implements OnInit { constructor(public ngxSmartModalService: NgxSmartModalService) { } ngOnInit() { } }
Style.scss:
@import "~ngx-smart-modal/ngx-smart-modal"; @import "app/app.component";
Hope you can create a smart model very quick.
Question and answer is powered by AnsPress.io