cc_snack_bar_container.ts

import { 
  Component,
  OnInit,
  ViewChild,
  NgZone,
  trigger,
  state,
  style,
  transition,
  animate,
  AnimationTransitionEvent } from '@angular/core';
import {
  MdSnackBarContainer,
  PortalHostDirective
} from '@angular/material';


// Necassary properties from the super class


export type SnackBarState = 'initial' | 'visible' | 'complete' | 'void';

// TODO(jelbourn): we can't use constants from animation.ts here because you can't use
// a text interpolation in anything that is analyzed statically with ngc (for AoT compile).
export const SHOW_ANIMATION = '225ms cubic-bezier(0.4,0.0,1,1)';
export const HIDE_ANIMATION = '195ms cubic-bezier(0.0,0.0,0.2,1)';



@Component({
  selector: 'app-snackbar-container',
  templateUrl: './snackbar-container.component.html',
  styles: [`
    @import 'node_modules/@angular/material/snack-bar/snack-bar-container.scss';

    :host{
        background: #C2272F;
        color: #ffffff;
        transform: translateY(-100%);
        height: auto;
        max-width: 640px;
    }
    cc-snackbar{
        position: relative;
        top: -2px;;
    }
  `],
   host: {
    'role': 'alert',
    '[@state]': 'animationState',
    '(@state.done)': 'onAnimationEnd($event)'
  },
  animations: [
    trigger('state', [
      state('initial', style({transform: 'translateY(-100%)'})),
      state('visible', style({transform: 'translateY(0%)'})),
      state('complete', style({transform: 'translateY(-100%)'})),
      transition('visible => complete', animate(HIDE_ANIMATION)),
      transition('initial => visible, void => visible', animate(SHOW_ANIMATION)),
    ])
  ],
})
export class SnackbarContainerComponent extends MdSnackBarContainer {
  @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective;
  constructor(private ngZone : NgZone) {
    super(ngZone);
   }
}