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.
ngx-cool-dialogs
Advanced tools
Readme
Easily create astounding alert, confirm and prompt dialogs for Angular. Think of window.alert
or window.confirm
, but more angularish and way cooler.
Demo: https://ngx-cool-dialogs.carlosroso.com/
npm i ngx-cool-dialogs
NgxCoolDialogsModule
to your core module (e.g. app.module.ts
). You can optionally
pass a config object as the parameter of the forRoot
method.import { NgxCoolDialogsModule } from 'ngx-cool-dialogs';
@NgModule({
...,
imports: [
...,
NgxCoolDialogsModule.forRoot(globalConfig)
],
...
})
export class MyCoreModule { }
NgxCoolDialogsService
as a dependency of your component.constructor(private coolDialogs: NgxCoolDialogsService) {}
BrowserAnimationsModule
imported in your root module (e.g. app.module.ts
).import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
declarations: [ ... ],
imports: [
...,
BrowserAnimationsModule,
...
],
providers: [ ... ],
bootstrap: [AppComponent]
})
alert
, confirm
, prompt
.// Alert
this.coolDialogs.alert('Whoa boy, be careful!');
// Confirm
this.coolDialogs.confirm('Do you blindly accept our conditions?')
.subscribe(res => {
if (res) {
console.log('You clicked OK. You dumb.');
} else {
console.log('You clicked Cancel. You smart.');
}
});
// Prompt. Callback param has the following form:
// { result: boolean, value: string }
this.coolDialogs.prompt('Please type your email below.')
.subscribe(res => {
if (res.result) {
console.log('Thanks, now we have your email:', res.value);
}
});
You can globally configure all your dialogs for properties like titles, texts and colors. Do this
by passing a config object in the forRoot
module declaration (see step 1).
NgxCoolDialogsModule.forRoot(globalConfig: NgxCoolDialogsGlobalConfig)
NgxCoolDialogsGlobalConfig
Find below an example of a global config object. Please note that all these properties are optional. Please check out the SOURCE for full descriptions of all properties and its allowed and default values.
NgxCoolDialogsModule.forRoot({
theme: 'material', // available themes: 'default' | 'material' | 'dark'
okButtonText: 'Yes',
cancelButtonText: 'No',
color: '#8030c3',
titles: {
alert: 'Danger!',
confirm: 'Confirmation',
prompt: 'Website asks...'
}
});
You can also pass a configuration object to the methods alert()
, confirm()
and prompt()
as the
second argument. Any property set here will obviously override the corresponding global configuration.
NgxCoolDialogsLocalConfig
The configuration example below applies for any of the three main methods. Please check out the SOURCE for full descriptions of all properties and its allowed and default values.
this.coolDialogs.confirm('Do you agree to follow Barça?', {
theme: 'dark',
okButtonText: 'Yes, I do',
cancelButtonText: 'Nope',
color: 'red',
title: 'Wait, think twice'
});
Note: When using prompt
, you can also set the defaultText
property which will be used to
autofill the text input.
Feel free to open issues, shoot PRs, reach out on twitter, etc.
This is really just a good ol' Angular CLI project. Feel free to clone the project and play around if you
feel like adding new features or fixing bugs. All the library code lies inside ./app/lib/src
.
MIT
Shameless self promotion: This library was created using ng-lib-schematics, which is a Schematic I built to create Angular libraries.
FAQs
Easily create astounding **alert, confirm and prompt dialogs** for Angular. Think of `window.alert` or `window.confirm`, but more angularish and way cooler.
The npm package ngx-cool-dialogs receives a total of 29 weekly downloads. As such, ngx-cool-dialogs popularity was classified as not popular.
We found that ngx-cool-dialogs 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.