Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
min-max-popup
Advanced tools
Readme
Min max popup is an angular 12 floating window modal.
Use the node package manager npm to install minmax.
This package requires angular2-draggable.
npm i angular2-draggable
npm i min-max-popup
In your app module :
import { MinMaxPopupModule, MinMaxDirective } from 'min-max-popup';
Add MinMaxPopupModule to your imports array:
imports: [
.....,
MinMaxPopupModule,
.....,
],
Add MinMaxDirective to your providers array:
providers: [
.....,
MinMaxDirective,
.....,
],
In your app component.ts import ViewContainerRef from angular and add to constructor :
constructor(
.....,
public viewContainerRef: ViewContainerRef,
......
) {}
Create a component and wrap your components html with //TestComponent
<lib-min-max-popup>......</lib-min-max-popup>
Add your newly created component to entryComponents array :
entryComponents: [
....,
TestComponent
....,
],
In your new components ts file import Input from angular : //TestComponent
import { Input } from '@angular/core';
In your new components ts file add the following in your component class : //TestComponent
export class TestComponent implements OnInit {
@Input() data: any = {}; //add this
@Input() parentRef: any; //add this
@Input() unique_key: any; //add this
In your new components class add the following function to close the modal : //TestComponent
close() {
this.parentRef.remove(this.unique_key)
}
In the component from where you want to open modal do import your modal component (TestComponent) and MinMaxDirective :
import { MinMaxDirective } from 'min-max-popup';
import { TestComponent } from './test.component'
initialize minmaxdirective in constructor :
constructor(
private minmaxservice: MinMaxDirective
) {}
To open modal call
this.minmaxservice.createComponent(TestComponent, data); //TestComponent is your modal component and data is the data you want to pass to modal.
Modal 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 |
Full modal wrapper would look like :
<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>
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 yourangular.json
file.
Run ng build min-max-popup
to build the project. The build artifacts will be stored in the dist/
directory.
After building your library with ng build min-max-popup
, go to the dist folder cd dist/min-max-popup
and run npm publish
.
Run ng test min-max-popup
to execute the unit tests via Karma.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.
FAQs
Min max popup is an angular 12 floating window modal.
The npm package min-max-popup receives a total of 4 weekly downloads. As such, min-max-popup popularity was classified as not popular.
We found that min-max-popup demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.