angular-5-popup
v0.0.6
Published
Angular 5+ modal popup, angular modal popup, angular2 modal popup
Downloads
28
Readme
DialogLog
This project was generated with Angular CLI version 1.7.3.
Development server
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
How to use
npm i angular-5-popup
import { ScModalModule } from './sc-modal/sc-modal.module';
Add ScModalModule in imports section in your root module. create new component;
example code in component
In your component file past this code:
import { ModalService } from './sc-modal/modal.service';
export class AppComponent implements OnInit {
@ViewChild("modal") modal: ModalComponent;
constructor(
private ms:ModalService
){
}
openModal(id){
this.modal.openModal(id);
}
closeModal(id){
this.modal.closeModal(id);
}
ngOnInit(){
}
}
in the view file example: app.component.html
<sc-modal id="modal-1" class="default" #modal>
<div class="modal">
<div class="modal-header">
This my title
<button class="sc-modal-close" (click)="closeModal('modal-1');"><i class="fa fa-times-circle fa-2x" aria-hidden="true"></i></button>
</div>
<div class="modal-body">
<h1>A Custom Modal Name</h1>
<p>
Home page text: <input type="text" />
</p>
</div>
</div>
<div class="modal-background"></div>
</sc-modal>
for icons
import font-awsome style sheet file into your style.css file. Example Add below line in your style.css/scss
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'
Build
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.