ngx-magic-modal
This is simple modal plugin for your latest angular project. Very easy to setup and integrate to your angular project.
Last updated 2 years ago by subhojit1992 .
MIT · Original npm · Tarball · package.json
$ cnpm install ngx-magic-modal 
SYNC missed versions from official npm registry.

NGX Magic Modal

This is simple modal plugin for your latest angular project. Very easy to setup and integrate to your angular project.

>> IMPORTANT: Required angular 5 in your local dependency. Because file uses Renderer2 in the core.

Demo

Installation

npm install ngx-magic-modal

or

yarn add ngx-magic-modal

In your "AppModule" file add this plugin

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
// ngx-magic modal added
import { MagicModalModule } from 'ngx-magic-modal';

@NgModule({
  imports:      [ BrowserModule, FormsModule, MagicModalModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Call the plugin from your component

app.component.html

<magic-modal [(visible)]="display">
    <button (click)="closeDisplay();" style="position: absolute; top: 10px; right: 10px;">X</button>
    Test One
</magic-modal>
<button (click)="changeDisplay();">modal1</button>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  display: boolean = false;

  changeDisplay(){
    this.display = true;
  }

  closeDisplay(){
    this.display = false; 
  }

}

As per "display" property change boolean value change popup will toggle show hide state.

Version

Current - v0.1.1

Note

You feel free to contribute or find issue.

Chanege the popup as per your application ui and do fun :)

Current Tags

  • 0.1.2                                ...           latest (2 years ago)

3 Versions

  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |