angular-5-popup

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

1. npm i angular-5-popup

2. import { ScModalModule } from './sc-modal/sc-modal.module';

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