angular-flash-message

Angular 2-4 Flash Messages

Quick links

GitHub: https://github.com/anatoliikarpiuk/angular-flash-message

NPM: https://www.npmjs.com/package/angular-flash-message

Issues: https://github.com/anatoliikarpiuk/angular-flash-message/issues

Changelog: https://github.com/anatoliikarpiuk/angular-flash-message/blob/master/changelog.md

Installation:

• The latest release of angular--flash-message can be installed from npm

	npm install angular-flash-message --save

Setup

• Import FlashMessageModule

	import {FlashMessageModule} from 'angular-flash-message';

	@NgModule({
		imports: [
			FlashMessageModule
		]
	})

	export class AppModule { }

• Use component selector in a template:

	@Component({
    	selector: 'app-component',
    	template: '
    	    ...
    	    <flash-messages></flash-messages>

    	    <router-outlet></router-outlet>
    	'
	})

	export class AppComponent { }

Usage

• Use FlashMessage for call flash message

	import {FlashMessage} from 'angular-flash-message';

	export class ExampleComponent {
		constructor(private flashMessage: FlashMessage) {}

		onShowSuccess() {
			this.flashMessage.success('Success message');
		}

		onShowInfo() {
			this.flashMessage.info('Info message');
		}

		onShowWarning() {
			this.flashMessage.warning('Info message');
		}

		onShowSuccess() {
			this.flashMessage.danger('Danger message');
		}
	}

You can paste params object when call flash message:

	this.flashMessage.success('Message', {
		dalay: 2000, <number>
		generalClass: 'success-class', <strigng>
		close: true, <boolean>
		closeBtnClass: 'class1 class2', <string>
		navigate: 'you-url', <string>
	});

• delay - delay for message -> by default is 1500
• generalClass - class will be paste to message container else container will be have bootstrap styles;
• close - boolean param for on/off custom close message -> by default is false;
• closeBtnClass - string param for close message button -> by default btn will be pulled to right and have no any styles;
• navigate - this param will be navigate to url which you paste;

note: If you want to call navigate param, you must import RouterModule to you app imports

note: If you paste to params object 'delay' time and turn on 'close' - message will be showed according to you delay time and close btn will be active also

You can paste params to flash message component selector in a template

	<flash-messages [delay]="2000"
			[successClass]="'success-class'"
			[infoClass]="'success-class'"
			[warningClass]="'warning-class'"
			[dangerClass]="'danger-class'"
			[close]="true/false"
			[closeBtnClass]="'some-class1 some-class2'"
	></flash-messages>

! Important - this params will be replaced if you paste the same param to options object when you call the flash message