Min Max Angular 12 Popup

Min max popup is an angular 12 floating window modal.

Installation

Use the node package manager npm to install minmax.

This package requires angular2-draggable.

1npm i angular2-draggable
2npm i min-max-popup

Usage

1In your app module : 
2import { MinMaxPopupModule, MinMaxDirective } from 'min-max-popup';
3
4Add MinMaxPopupModule to your imports array: 
5  imports: [
6    .....,
7    MinMaxPopupModule,
8    .....,
9  ],
10
11Add MinMaxDirective to your providers array: 
12  providers: [
13    .....,
14    MinMaxDirective,
15    .....,
16  ],

1In your app component.ts import ViewContainerRef from angular and add to constructor : 
2
3
4  constructor(
5    .....,
6    public viewContainerRef: ViewContainerRef,
7    ......
8  ) {}

1Create a component and wrap your components html with  //TestComponent
2<lib-min-max-popup>......</lib-min-max-popup>

1Add your newly created component to entryComponents array : 
2  entryComponents: [
3    ....,
4    TestComponent
5    ....,
6  ],

1In your new components ts file import Input from angular : //TestComponent
2import { Input } from '@angular/core';

1In your new components ts file add the following in your component class : //TestComponent
2export class TestComponent implements OnInit {
3  @Input() data: any = {}; //add this
4  @Input() parentRef: any; //add this
5  @Input() unique_key: any; //add this

1In your new components class add the following function to close the modal : //TestComponent
2  close() {
3    this.parentRef.remove(this.unique_key)
4  }

1In the component from where you want to open modal do import your modal component (TestComponent) and MinMaxDirective :
2
3import { MinMaxDirective } from 'min-max-popup';
4import { TestComponent } from './test.component'
5
6
7initialize minmaxdirective in constructor : 
8  constructor(
9    private minmaxservice: MinMaxDirective
10  ) {}

1To open modal call 
2    this.minmaxservice.createComponent(TestComponent, data); //TestComponent is your modal component and data is the data you want to pass to modal.

1Modal api reference 

API Referance	Default
headerColor	#0072c6
titleColor	#FFF
iconsColor	#FFF
closeHoverColor	#e81123
buttonHoverColor	rgba(255, 255, 255, 0.1)
width	400px
height	500px
title	New Window
initialX	200
initialY	200
contentBackgroundColor	#FFF
allowOutOfBounds	false

1Full modal wrapper would look like : 
2<lib-min-max-popup headerColor="#000" closeHoverColor="#FFF" buttonHoverColor="#fff" iconsColor="#FFF"  title="TEST" titleColor="#FFF" contentBackgroundColor="#FFF"  width="500px" height="600px" [initialX]="inX" [initialY]="inY">.......</lib-min-max-popup>
3

Code scaffolding

Run ng generate component component-name --project min-max-popup to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project min-max-popup.

Note: Don't forget to add --project min-max-popup or else it will be added to the default project in your angular.json file.

Build

Run ng build min-max-popup to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build min-max-popup, go to the dist folder cd dist/min-max-popup and run npm publish.

Running unit tests

Run ng test min-max-popup to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.