Git Product home page Git Product logo

ng-window's Introduction

ng-window

first of all : don't forget to copy fonts and css files to your web site assets folder , and import windowStyle.css to your index.html

ng-window allow developer to open and full control multiple windows in single page applications in simple way, No Jquery, No Bootstrap.

Available Configuration

  • Maximize window
  • Minimize window
  • Custom size,
  • Custom position
  • The window is draggable
  • Block parent window or not
  • Center the window or not
  • Pass values to child window
  • Pass values from child window to parent window
  • Listening to closing child window in parent window
  • Listen to resize event with your custom listener
  • Open with maximum size or not
  • Enable and disable window resizing
  • Enable and disable maximization
  • Enable and disable minimization

Examples

constructor(private myInjector: WindowsInjetor)
{ 

}

openForm1()
{ 
this.myInjector.openWindow(Form1);  // Form1 is a commponant that will pupup
}


//with some customization
openForm2()
{ 

var config = new WindowConfig()  //height, width
config.position=new CustomPosition(100, 200)//left,top
config.CenterInsideParent=false;
var temp={}
config.forAny=[temp];//here you can pass anything
config.openAsMaximize=true;
this.myInjector.openWindow( Form2,config).then((the_instance_of_form2:Form2) => {
this.DisabledButtonForm2 = true;//disable that button until From2 closed

the_instance_of_form2.addForm2ClosedListener(this);//by using event listener you can liseten to close window event, in the chiled window you should implements OnDestroy then notifaiy your parent window listener
});
}

the previce two examples the parent window was main wibsite page if you wint to inject window into another window it's easy , pass the ViewContainerRef of your parent window when open new window like this

constructor(private myInjector: WindowsInjetor,private viewContainerRef:ViewContainerRef)
{ 

}
openform()
{ 
this.myInjector.openWindow( Form2,config,this.viewContainerRef)
}

I'd like to give special thanks to

shlomiassaf https://github.com/shlomiassaf/angular2-modal

MarkoCen https://github.com/MarkoCen/ngPopup

ng-window's People

Contributors

bahgatmashaly avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.