Angular2: Custom toaster / notification service using Angular2 Material Snackbar Component

Standard

Since toasters/notifications are essential component for any connected web application, we have couple of toasters component available in market for angular2, I am using Angular Material Snackbar component.

Usage

Since toasters/notifications are used throughout the application, so its better to define as unified service and then consume it throughout application by injecting service in various controllers.

Pre-Step:

  • Install Angular Material components
npm install --save @angular/material
  • Import the Angular Material NgModule in src/app/app.module.ts
import { MaterialModule } from '@angular/material';
// other imports 
@NgModule({
  imports: [MaterialModule],
  ...
})
export class PizzaPartyAppModule { }
  • Some of the components like md-slide-toggle, md-slider, mdTooltip rely on HammerJS for gestures
npm install --save hammerjs

After installing, import HammerJS on your app’s module. src/app/app.module.ts

import 'hammerjs';
  • If your project is using SystemJS for module loading, you will need to add @angular/material to the SystemJS configuration:
System.config({
  // existing configuration options
  map: {
    ...,
    '@angular/material': 'npm:@angular/material/bundles/material.umd.js'
  }
});

Reference

Step 1 : Create angular material toaster service IN toaster.service.ts:

import { Injectable } from '@angular/core';
import { MdSnackBar } from '@angular/material';

@Injectable()
export class ToasterService {

    constructor(private snackBar: MdSnackBar) {
    }

    showToaster(msg: string) {
        this.snackBar.open(msg, null, {
            duration: 3000,
        });
    }
}

A snack-bar can contain either a string message or a given component.

// Simple message.
let snackBarRef = snackBar.open('Message archived');

// Simple message with an action.
let snackBarRef = snackBar.open('Message archived', 'Undo');

// Load the given component into the snack-bar.
let snackBarRef = snackbar.openFromComponent(MessageArchivedComponent);

Step 2: Register toaster service to main module IN app.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { MaterialModule } from '@angular/material';
import 'node_modules/hammerjs/hammer.js';

import { AppComponent } from './app.component';
import { CustomComponent } from './custom.component';
import { ToasterService } from './shared/service/toaster.service';

@NgModule({
    imports: [
        //angular builtin module
        BrowserModule,

        //ui module
        MaterialModule.forRoot()
    ],
    declarations: [
        AppComponent,
        CustomComponent 
    ],
    providers: [
        ToasterService
    ],
    bootstrap: [
        AppComponent
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})

export class AppModule {
}

Step 3: Inject toaster service in controller, let say custom.component.ts:

import { Component, OnInit } from '@angular/core';
import { ToasterService } from '../toaster.service';

@Component({
    selector: 'search-movie',
    templateUrl: '../custom.component.html'
})

export class CustomComponent implements OnInit {

    constructor(
        private toasterService: ToasterService) {
    }

    ngOnInit() {
        this.toasterService.showToaster('Hello World');
    }
}

Output:

 

 

Advertisements

Angular2: Error – md-input-container must contain an mdInput directive. Did you forget to add mdInput to the native input or textarea element?

Standard

Error:

Error at MdInputContainerMissingMdInputError.ZoneAwareError 

md-input-container must contain an mdInput directive. Did you forget to
add mdInput to the native input or textarea element?

screenshot_2

Solution:

<md-input-container style="color: black;" class="pull-xs-left">
       <textarea [(ngModel)]="content" mdInput></textarea>
</md-input-container>

directive md-input needs to replaced with mdInput

Angular2: Step by Step guide of using Angular Material 2 with Angular2 & Typescript for ASP.NET Core in Visual Studio 2015

Standard

Angular Material 2.0.0 has been released recently for Angular 2. In order to integrate Angular Material in project, follow the below steps:

Step 1: Install npm package for angular material, hammerjs, material typing

npm install --save @angular/material hammerjs
npm install --save-dev @types/angular-material @types/hammerjs

screenshot_6

Note:
The slide-toggle and slider components have a dependency on HammerJS.

Step 2: Include hammerjs to the types section of tsconfig.json file

{
  "compilerOptions": {
    "types": [
      "hammerjs"
    ]
  }
}

 

Step 3: Include @angular/material to the SystemJS configuration in case project is SystemJS for module loading

System.config({
  map: {
    ...,
    '@angular/material': 'npm:@angular/material/bundles/material.umd.js'
  }
});

Note:
Actual material 2 website state ‘npm:@angular/material/material.umd.js’ but I am getting error by systemjs, unable to find materialjs file, so simple solution is fix in url: ‘npm:@angular/material/bundles/material.umd.js’

Step 4: Include material css and hammerjs explicitly in _Layout.cshtml

 @{ var lib = "@angular"; }

<environment names="Development">
  <link href="~/node_modules/@lib/material/core/theming/prebuilt/indigo-pink.css" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  http://~/node_modules/hammerjs/hammer.min.js
</environment>

 

Step 5: Import the Angular Material NgModule

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';

import { MaterialModule } from '@angular/material';
import 'node_modules/hammerjs/hammer.js';

import { DashboardMainModule } from './dashboard/dashboard.module';
import { AppComponent } from './app.component';
import { AppRoutingModule  } from './app.routing';
import { APP_PROVIDERS } from './app.provider';

@NgModule({
    imports: [
        //angular builtin module
        BrowserModule,
        HttpModule,

        //ui module
        MaterialModule.forRoot(),

        //application feature module
        DashboardMainModule,
        AppRoutingModule 
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        APP_PROVIDERS
    ],
    bootstrap: [
        AppComponent
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})

export class AppModule {
}

Finally material integration is done and running.

screenshot_7

Angular2: CSS Framework to use with Angular2

Standard

Twitter Bootstrap

There are now 3 projects on GitHub that are trying to provide Bootstrap directives for angular2:

Angular Material 2

High-quality UI components built with Angular 2 and TypeScript, following the Material Design spec. Built by the Angular team to integrate seamlessly with Angular 2.

PrimeNg

You could look into PrimeNg, using their material theme you pretty much have a lot. They have built it using TypeScript and used a bit of jQuery but not for any DOM manipulations

 

Teradata Covalent

An open source UI platform built using Angular 2.0 and Material Design.