venkateshwarv

import { Injectable } from '@angular/core';
import { MdSnackBar, MdSnackBarRef, MdSnackBarContainer, Overlay, LiveAnnouncer, ComponentPortal, ComponentRef, OverlayRef, OverlayState } from '@angular/material';
import { SnackbarContainerComponent } from './snackbar-container/snackbar-container.component';
import { SnackbarComponent} from './snackbar/snackbar.component';

@Injectable()
export class CcSnackBarService extends MdSnackBar {

  constructor(
        private _overlay : Overlay,

venkateshwarv

  private _createOverlay(): OverlayRef {
    let state = new OverlayState();
    state.positionStrategy = this._overlay.position().global()
        .centerHorizontally()
        .top('0');
    return this._overlay.create(state);
  }

venkateshwarv

import { 
  Component,
  OnInit,
  ViewChild,
  NgZone,
  trigger,
  state,
  style,
  transition,
  animate,

venkateshwarv

<template cdkPortalHost></template>

venkateshwarv

// MdSnackBar service
 /**
   * Attaches the snack bar container component to the overlay.
   */
  private _attachSnackBarContainer(overlayRef: OverlayRef,
                                   config: MdSnackBarConfig): MdSnackBarContainer {
    let containerPortal = new ComponentPortal(MdSnackBarContainer, config.viewContainerRef);
    let containerRef: ComponentRef<MdSnackBarContainer> = overlayRef.attach(containerPortal);
    containerRef.instance.snackBarConfig = config;

venkateshwarv

import { Component, OnInit } from '@angular/core';
import { MdSnackBarRef } from '@angular/material'

@Component({
  selector: 'cc-snackbar',
  templateUrl: './snackbar.component.html',
  styles: [
    `md-icon{
    cursor: pointer;
    position: relative;

venkateshwarv

<div class="outer-container">
    <div class="message">
        <span class="md-simple-snackbar-message" [innerHtml]="message"></span>
    </div>
    <div class="controls">
        <button md-button class="md-simple-snackbar-action"
                *ngIf="hasAction" (click)="dismiss()">{{action}}</button>
        <md-icon fontSet="fa" *ngIf="!hasAction" fontIcon="fa-times" (click)="dismiss()"></md-icon>
    </div>
 </div>       

venkateshwarv

// MdSnackBar Service
  /**
   * Places a new component as the content of the snack bar container.
   */
  private _attachSnackbarContent<T>(component: ComponentType<T>,
                                    container: MdSnackBarContainer,
                                    overlayRef: OverlayRef): MdSnackBarRef<T> {
    let portal = new ComponentPortal(component);
    let contentRef = container.attachComponentPortal(portal);
    return new MdSnackBarRef(contentRef.instance, container, overlayRef);

venkateshwarv

import { Injectable } from '@angular/core';
import { MdSnackBar, MdSnackBarRef, MdSnackBarContainer, Overlay, LiveAnnouncer, ComponentPortal, ComponentRef, OverlayRef, OverlayState } from '@angular/material';
import { SnackbarContainerComponent } from './snackbar-container/snackbar-container.component';
import { SnackbarComponent} from './snackbar/snackbar.component';

@Injectable()
export class CcSnackBarService extends MdSnackBar {

  constructor(private _overlay : Overlay, private liveAnnouncer : LiveAnnouncer, private mdSnackBar : MdSnackBar) { 
    super(

venkateshwarv

export UseCustomSnackBar{
  constructor(private ccSnackBar: CcSnackBarService){}
  
  showSnackBar(){
    this.ccSnackBar.open('I am a Cc-Snack-bar', {duration: 1500} );
  }
}