Ems-web-app-messages NPM

EMS Web Application Components: Growl & Snackbar Messages

The Messages Angular.io module is authored for use within web applications developed by Educational Media Solutions.

Find the web application template source code on GitHub to review implementation in context.

Find a working example of this component here.

This package includes a component and service that can be used to render "Growl" or "Snackbar" style in-app messages.

This library was generated with Angular CLI version 13.2.0.

Usage: Module Import

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MessagesModule, MessagesService } from "ems-web-app-messages";

@NgModule({
  declarations: [
    AppComponent 
  ],
  imports: [
    BrowserModule,
    MessagesModule 
  ],
  providers: [ MessagesService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Usage: Template Implementation

<messages background="rgba(0,0,255, 0.8)" color="white" [transition-speed]="1"></messages>

You can configure background color, text color and transition speed for the incoming/outgoing animations. You can also write whatever styles you deem necessary to override default appearance.

Messages can be "stacked" and will render in the order that they were added to the queue. Only one message renders at a time.

Usage: Component Implementation with Basic Message

import { Component, OnInit } from '@angular/core';
import { MessagesService, MessageType, MessagePosition } from "ems-web-app-messages";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit  {
  constructor(private messageService: MessagesService) { }
  
  ngOnInit() {
  	this.messageService.setCurrentMessage({
      type: MessageType.Growl,
      position: MessagePosition.TopRight,
      message: "Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.",
      duration: 4 //seconds that message will appear before exiting
    })
  }
}

Usage: Component Implementation with Custom Template

import { Component, OnInit } from '@angular/core';
import { MessagesService, MessageType, MessagePosition } from "ems-web-app-messages";

@Component({
  selector: 'app-root',
  template: `<ng-template #customTemplate>
  				<img src="some/graphic.gif"/>
				<p>Custom Template</p>
			</ng-template>`,
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit  {

  @ViewChild("customTemplate") customTemplate!: TemplateRef<any>

  constructor(private messageService: MessagesService) { }
  
  ngOnInit() {
  	this.messageService.setCurrentMessage({
      type: MessageType.Snackbar,
      position: MessagePosition.TopCenter,
      template: customTemplate,
      duration: 4
    })
  }
}

Note: Growl messages can only be positioned at MessagePosition.TopLeft, MessagePosition.TopRight, MessagePosition.BottomLeft and MessagePosition.BottomRight. Snackbar messages can only be positioned at MessagePosition.TopCenter and MessagePosition.BottomCenter.

Enums

export enum MessageType {
	Growl = "growl",
	Snackbar = "snackbar"
}

export enum MessagePosition {
	TopLeft = "top left",
	TopCenter = "top center",
	TopRight = "top right",
	BottomLeft = "bottom left",
	BottomCenter = "bottom center",
	BottomRight = "bottom right"
}