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.