Ether

Easy to use & customize - Angular notification feature.

Instalation

Install package in your project: npm install @ziobrowsky/ether

Register EtherModule in your AppModule.

import { EtherModule } from '@ziobrowsky/ether';
...
@NgModule({
  imports: [
    EtherModule // Add this line
  ]
})
export class AppModule { }

Finally add the <ng-ether></ng-ether> tag to your app.component.html file.

How to use?

To create a notification:

• Import EtherService import { EtherService } from '@ziobrowsky/ether';
• Use this import as dependecy injection in the component's constructor where the notification will be launched. constructor(private ether: EtherService) { }
• Launch a default notification with following command: this.ether.launch();

How to customize?

The launch() method takes an optional parameter as object of notification details data to produce custom notification.

  this.ether.launch({
    title: 'Custom title',
    message: 'Desctiption',
    duration: 3000,
    theme: {
      primary: 'gold',
      text: 'black'
    },
    completion: () => { console.log('Notification has been closed'); },
    button: {
      label: 'OK',
      action: () => { console.log('Button has been clicked'); };
    }
  });

So if you want to change only the title of notification then simply specify only title attribute.

  this.ether.launch({ title: 'Success' });

Completion callbacks & events?

There are 2 available events that you can use to dispatch your own methods.

  completion: () => { console.log('This method is executed after the notification hides'); },
  button: {
    action: () => { console.log('This method is executed after button has been clicked'); };
  }

Styling

There is a bunch of ready to use notification themes. To use them - import EtherTheme import { EtherDefaults } from '@ziobrowsky/ether'; and use the predefined theme from it as following:

  this.ether.launch({
    theme: EtherDefaults.Success
  });

Avalable themes:

• Success
• Warning
• Error
• Default

Of course you can aways specify your own colors:

  this.ether.launch({
    theme: {
      primary: 'gold',
      text: 'black'
    }
  });