<file_sep>import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {LayoutModule} from '@angular/cdk/layout';
import { FlexLayoutModule } from '@angular/flex-layout';

import {MainMaterialModule} from '../../main-material.module';
import {StartAppComponent} from './start-app.component';
import {HomeComponent} from '../home/home.component';
import   {START_APP_ROUTES}   from    './routes';
import { LoginComponent } from '../login/login.component';
import { UserDashboardComponent } from '../user-dashboard/user-dashboard.component';
import { RegisterComponent } from '../register/register.component';
import { ForgotPasswordComponent } from '../forgot-password/forgot-password.component';
import { RecipeListComponent } from '../recipe-list/recipe-list.component';
import { PantryComponent } from '../pantry/pantry.component';

import {CalendarModule} from '../../modules/calendar.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild(START_APP_ROUTES),
    MainMaterialModule,
    LayoutModule,
    FlexLayoutModule,
    CalendarModule.forRoot()
  ],
  declarations: [
StartAppComponent,
    HomeComponent,
    LoginComponent,
    UserDashboardComponent,
    RegisterComponent,
    ForgotPasswordComponent,
    RecipeListComponent,
    PantryComponent
  ],
  providers: [
    {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
  ],
  entryComponents: [
    StartAppComponent
  ]
})
export class StartModule { }




<file_sep>import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'pk-recipe-list',
  templateUrl: './recipe-list.component.html',
  styleUrls: ['./recipe-list.component.scss']
})
export class RecipeListComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

recipes: Object[] =
    [
        {title: 'Raddish Meledy', rating: '2', cookTime: '40' , prepTime: '30',name: 'radishes'},
        {title: 'Egg on Toast', rating: '2', cookTime: '40' , prepTime: '30',name: 'egg'},
        {title: 'Veggie Noodles', rating: '2', cookTime: '40' , prepTime: '30',name: 'rice-noodles'},
        {title: 'Pizza', rating: '2', cookTime: '40' , prepTime: '30',name: 'pizza'},
        {title: 'Zander Filet', rating: '2', cookTime: '40' , prepTime: '30',name: 'zander-filet'},
        {title: 'Apple Crisp', rating: '2', cookTime: '40' , prepTime: '30',name: 'apple'},
        {title: 'Egg on Toast', rating: '2', cookTime: '40' , prepTime: '30',name: 'egg'},
        {title: 'Apple Crisp', rating: '2', cookTime: '40' , prepTime: '30',name: 'apple'},
        {title: 'Veggie Noodles', rating: '2', cookTime: '40' , prepTime: '30',name: 'rice-noodles'},
        {title: 'Raddish Meledy', rating: '2', cookTime: '40' , prepTime: '30',name: 'radishes'},
        {title: 'Zander Filet', rating: '2', cookTime: '40' , prepTime: '30',name: 'zander-filet'},
        {title: 'Apple Crisp', rating: '2', cookTime: '40' , prepTime: '30',name: 'pizza'},

    ]

    pokemonGroups = [
      {
        name: 'Grass',
        pokemon: [
          { value: 'bulbasaur-0', viewValue: 'Bulbasaur' },
          { value: 'oddish-1', viewValue: 'Oddish' },
          { value: 'bellsprout-2', viewValue: 'Bellsprout' }
        ]
      },
      {
        name: 'Water',
        pokemon: [
          { value: 'squirtle-3', viewValue: 'Squirtle' },
          { value: 'psyduck-4', viewValue: 'Psyduck' },
          { value: 'horsea-5', viewValue: 'Horsea' }
        ]
      },
      {
        name: 'Fire',
        disabled: true,
        pokemon: [
          { value: 'charmander-6', viewValue: 'Charmander' },
          { value: 'vulpix-7', viewValue: 'Vulpix' },
          { value: 'flareon-8', viewValue: 'Flareon' }
        ]
      },
      {
        name: 'Psychic',
        pokemon: [
          { value: 'mew-9', viewValue: 'Mew' },
          { value: 'mewtwo-10', viewValue: 'Mewtwo' },
        ]
      }
    ];

}
<file_sep>import {
  Component,
  Input,
  Output,
  EventEmitter,
  TemplateRef,
  ViewChild
} from '@angular/core';
import { MonthViewDay, CalendarEvent } from 'calendar-utils';


@Component({
  selector: 'mwl-calendar-month-cell',
  templateUrl: './calendar-month-cell.component.html',
  host: {
    class: 'cal-cell cal-day-cell',
    '[class.cal-past]': 'day.isPast',
    '[class.cal-today]': 'day.isToday',
    '[class.cal-future]': 'day.isFuture',
    '[class.cal-weekend]': 'day.isWeekend',
    '[class.cal-in-month]': 'day.inMonth',
    '[class.cal-out-month]': '!day.inMonth',
    '[class.cal-has-events]': 'day.events.length > 0',
    '[class.cal-open]': 'day === openDay',
    '[style.backgroundColor]': 'day.backgroundColor'
  }
})
export class CalendarMonthCellComponent {
  isWeekRowVisible: boolean = false;
  @Input()rowIndex: number;
@ViewChild('defaultTemplate') defaultTemplate;
hideSelectedWeek: boolean = false;
  @Input() day: MonthViewDay;

  @Input() openDay: MonthViewDay;

  @Input() locale: string;

  @Input() tooltipPlacement: string;

  @Input() tooltipAppendToBody: boolean;

  @Input() customTemplate: TemplateRef<any>;

  @Input() tooltipTemplate: TemplateRef<any>;

  @Output() highlightDay: EventEmitter<any> = new EventEmitter();

  @Output() unhighlightDay: EventEmitter<any> = new EventEmitter();

  @Output()
  eventClicked: EventEmitter<{ event: CalendarEvent }> = new EventEmitter<{
    event: CalendarEvent;
  }>();

@Output()
hideWeekClicked: EventEmitter<any>= new EventEmitter<any>();

  /**
   * @hidden
   */
  onEventClick(mouseEvent: MouseEvent, calendarEvent: CalendarEvent): void {
    if (mouseEvent.stopPropagation) {
      mouseEvent.stopPropagation();
    }
    this.eventClicked.emit({ event: calendarEvent });
  }

  toggleWeekRow(rowNum : number) : void {
    this.isWeekRowVisible =  !this.isWeekRowVisible;
    console.log("child data " + rowNum);
    this.hideWeekClicked.emit(
      {
        isWeekRowVisible: this.isWeekRowVisible,
        rowNum: rowNum
      });
    console.log(this.defaultTemplate);
    this.hideSelectedWeek = true;
    console.log(this.hideSelectedWeek);


  }
}
<file_sep>import {Component,  ViewEncapsulation} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'entry-app',
  template: '<router-outlet></router-outlet>',
  encapsulation: ViewEncapsulation.None,
  preserveWhitespaces: false,
})
export class EntryAppComponent {}<file_sep>import { Component, Input, TemplateRef } from '@angular/core';
import { WeekDay } from 'calendar-utils';

@Component({
  selector: 'mwl-calendar-month-view-header',
  templateUrl:'./calendar-month-view-header.component.html'

})
export class CalendarMonthViewHeaderComponent {
  @Input() days: WeekDay[];

  @Input() locale: string;

  @Input() customTemplate: TemplateRef<any>;
}
<file_sep>import {OverlayContainer} from '@angular/cdk/overlay';
import {Component, ElementRef, Renderer2, ViewEncapsulation} from '@angular/core';
import {Router} from '@angular/router';


@Component({
  moduleId: module.id,
  selector: 'pk-start-app',
  templateUrl: './start-app.component.html',
  styleUrls: ['./start-app.component.scss'],
  encapsulation: ViewEncapsulation.None,
  preserveWhitespaces: false
})
export class StartAppComponent  {
  dark = false;
  navItems =[
    {name: 'User Dashboard', route: '/udash'},
    {name:'All Recipe', route: '/recipe-list'},
    {name: 'Pantry', route: '/pantry'}
]

items = [
  {text: 'Profile'},
  {text: 'Settings'},
  {text: 'Help', disabled: true},
  {text: 'SignOut'}
];

user ={userName: 'ABCD', imageSrc: "../assets/images/cat.jpg"};

    constructor(private _element: ElementRef,
      private _renderer: Renderer2,
      private _overlayContainer: OverlayContainer,
      private router:Router) { }

      toggleFullscreen() {
        let elem = this._element.nativeElement.querySelector('.demo-content');
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.webkitRequestFullScreen) {
          elem.webkitRequestFullScreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.msRequestFullScreen) {
          elem.msRequestFullScreen();
        }
      }

      toggleTheme() {
        const darkThemeClass = 'unicorn-dark-theme';
        this.dark = !this.dark;
        if (this.dark) {
          this._renderer.addClass(this._element.nativeElement, darkThemeClass);
          this._overlayContainer.getContainerElement().classList.add(darkThemeClass);
        } else {
          this._renderer.removeClass(this._element.nativeElement, darkThemeClass);
          this._overlayContainer.getContainerElement().classList.remove(darkThemeClass);
        }
      }

      select(item: string) {
        this.router.navigate(['./login']);
      }

}
<file_sep>export class Recipe {
    // recipeName: string;
    // time: number;

    constructor(public recipeName: string, public time: number){}
  }
  <file_sep>import { Component, Inject, Input, ChangeDetectorRef} from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { AddDishDialog } from './add-dish-dialog';
import { MonthViewDay, MonthView } from 'calendar-utils';
import { Recipe } from './Recipe';

@Component({
  selector: 'cv-calendar-month-meal-view',
  templateUrl: './calendar-month-meal-view.component.html'
  ,
  styleUrls: ['./calendar-month-meal-view.component.scss']
})
export class CalendarMonthMealViewComponent {

  @Input() day: MonthViewDay;
  currentDay: MonthViewDay = this.day;
  recipe: Recipe = new Recipe("Noodles", 30);
  recipeB: Recipe = new Recipe("Cereal", 5);
  recipeL: Recipe = new Recipe("Boda", 30);
  recipeS: Recipe = new Recipe("Banana", 1);
  recipeD: Recipe = new Recipe("Alloo-Eggplant", 30);
   recipeObj : any;
  constructor(public dialog: MatDialog, private cdRef: ChangeDetectorRef) { }

  
  openDialog(MealType: string): void {
    console.log("My Date: " + this.day.date);
    let mydateType = typeof (this.day.date);
    console.log(MealType);
    switch (MealType) {
      case "B":
       this.recipeObj =  { recipeName: this.recipeB.recipeName, recipeTime: this.recipeB.time, currentDay: this.day, recipeType: "B" };
       break;
      case "L":
      this.recipeObj =  { recipeName: this.recipeL.recipeName, recipeTime: this.recipeL.time, currentDay: this.day, recipeType: "L"  };
      break;
      case "S":
      this.recipeObj =  { recipeName: this.recipeS.recipeName, recipeTime: this.recipeS.time, currentDay: this.day, recipeType: "S"  };
      break;
      case "D":
      this.recipeObj =  { recipeName: this.recipeD.recipeName, recipeTime: this.recipeD.time, currentDay: this.day,recipeType: "D"  };
       break;
    }
    console.log(this.recipeObj);
    let dialogRef = this.dialog.open(AddDishDialog, {
      width: '250px',
      data: this.recipeObj
    });



    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      console.log(result);
      if(result != undefined){
      //console.log(this.recipeObj);
        switch (result.mealType) {
        case "B":
         this.recipeB =  { recipeName: result.recipeName, time: result.time};
         break;
        case "L":
        this.recipeL =  { recipeName: result.recipeName, time: result.time};
        break;
        case "S":
        this.recipeS =  { recipeName: result.recipeName, time: result.time};
        break;
        case "D":
        this.recipeD =  { recipeName: result.recipeName, time: result.time};
         break;
      }
    }
      //this.recipeObj.recipeName = result.recipeName;
      this.cdRef.markForCheck();
      //console.log(this.recipeObj);
      //console.log("This recipe name is " + this.recipe.recipeName);
    });
  }


}


<file_sep>import {  Component,  ChangeDetectionStrategy,  ViewChild,  TemplateRef} from '@angular/core';
import {  startOfDay,  endOfDay,  subDays,  addDays,  endOfMonth,  isSameDay,  isSameMonth,  addHours} from 'date-fns';
import { Subject } from 'rxjs/Subject';
import {  CalendarEvent,  CalendarEventAction,  CalendarEventTimesChangedEvent} from '../../modules/calendar.module';


import {DataSource} from '@angular/cdk/collections';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {MatDialog, MatDialogRef,MAT_DIALOG_DATA}  from '@angular/material';


const colors: any = {
  red: {
    primary: '#ad2121',
    secondary: '#FAE3E3'
  },
  blue: {
    primary: '#1e90ff',
    secondary: '#D1E8FF'
  },
  yellow: {
    primary: '#e3bc08',
    secondary: '#FDF1BA'
  }
};

@Component({
  selector: 'pk-user-dashboard',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './user-dashboard.component.html',
  styleUrls: ['./user-dashboard.component.scss']
})
export class UserDashboardComponent {

  constructor() { }

   view: string = 'month';

  viewDate: Date = new Date();

actions: CalendarEventAction[] = [
  {
    label: '<i class="fa fa-fw fa-pencil"></i>',
    onClick: ({ event }: { event: CalendarEvent }): void => {
      //this.handleEvent('Edited', event);
    }
  },
  {
    label: '<i class="fa fa-fw fa-times"></i>',
    onClick: ({ event }: { event: CalendarEvent }): void => {
      this.events = this.events.filter(iEvent => iEvent !== event);
      //this.handleEvent('Deleted', event);
    }
  }
];

refresh: Subject<any> = new Subject();

events: CalendarEvent[] = [];


activeDayIsOpen: boolean = true;



  dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
    if (isSameMonth(date, this.viewDate)) {
      if (
        (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
        events.length === 0
      ) {
        this.activeDayIsOpen = false;
      } else {
        this.activeDayIsOpen = true;
        this.viewDate = date;
      }
    }
  }

  eventTimesChanged({ event, newStart, newEnd }: CalendarEventTimesChangedEvent): void {
    event.start = newStart;
    event.end = newEnd;
    //this.handleEvent('Dropped or resized', event);
    this.refresh.next();
  }


  // handleEvent(actionIn: string, eventIn: CalendarEvent): void {

  //         let dialogRef = this.dialog.open(EventDialogComponent, {
  //           width: 'auto',
  //           data: { event: eventIn, action: actionIn }
  //         });

  //         dialogRef.afterClosed().subscribe(result => {
  //           console.log('The dialog was closed');
  //         });
  //       }

  addEvent(): void {
    this.events.push({
      title: 'New event',
      start: startOfDay(new Date()),
      end: endOfDay(new Date()),
      color: colors.red,
      draggable: true,
      resizable: {
        beforeStart: true,
        afterEnd: true
      }
    });
    this.refresh.next();
  }


}
<file_sep>import { Component} from '@angular/core';

@Component({
  selector: 'pk-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {

  user ={userName: 'cat', imageSrc: "../assets/images/cat.jpg"};
  constructor() { }

}
<file_sep>import { Routes } from '@angular/router';
import { StartAppComponent } from './start-app.component';
import { HomeComponent } from '../home/home.component';
import { LoginComponent } from '../login/login.component';
import { RegisterComponent } from '../register/register.component';
import { ForgotPasswordComponent } from '../forgot-password/forgot-password.component';
import { UserDashboardComponent } from '../user-dashboard/user-dashboard.component';
import { RecipeListComponent } from '../recipe-list/recipe-list.component';
import { PantryComponent } from '../pantry/pantry.component';

export const START_APP_ROUTES: Routes = [
  {
    path: '', component: StartAppComponent, children: [
      { path: '', component: HomeComponent },
      { path: 'login', component: LoginComponent },
      { path: 'item1', component: LoginComponent },
      { path: 'udash', component: UserDashboardComponent },
      { path: 'register', component: RegisterComponent },
      { path: 'forgotPwd', component: ForgotPasswordComponent },
      { path: 'recipe-list', component: RecipeListComponent },
      { path: 'pantry', component: PantryComponent }
    ]
  },

];

export const ALL_ROUTES: Routes = [
  { path: '', component: StartAppComponent, children: START_APP_ROUTES }
];

<file_sep>import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'pk-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  hide:boolean
  constructor(private router:Router) {
    this.hide = true
  }

  ngOnInit() {
  }

  goToRegister() {
    this.router.navigate(['./register']);
  }

  goToForgotPwd() {
    this.router.navigate(['./forgotPwd'])
  }

  signIn() {
    this.router.navigate(['/'])
  }
}
<file_sep>import { Component, OnInit } from '@angular/core';

export interface Unit {
  title: string;
}

export interface Ingredient {
  title: string;
  amount: number;
  unit: Unit;
  isDeleted: boolean;
}

@Component({
  selector: 'pk-pantry',
  templateUrl: './pantry.component.html',
  styleUrls: ['./pantry.component.scss']
})
export class PantryComponent implements OnInit {

units: Unit[] = [
{title: 'ounce'},
{title: 'gallon'},
{title: 'pound'},
{title: 'gram'},
{title: 'cups'},
{title:'tsp'},
{title: 'large'},
{title: 'mL'},
{title: 'large'}
]

ingredients : Ingredient[] = [

  {title:'chilli', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'tomato', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'onion', amount: 2, unit:this.units[8], isDeleted: false},
  {title:'egg', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'carrot', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'asperagus', amount: 400, unit:this.units[3], isDeleted: false},
  {title:'pasta', amount: 600, unit:this.units[3], isDeleted: false},
  {title:'mushroom', amount: 200, unit:this.units[3], isDeleted: false},
  {title:'chickpea', amount: 960, unit:this.units[7], isDeleted: false},
  {title:'spinach', amount: 800, unit:this.units[8], isDeleted: false},
  {title:'salt', amount: 1, unit:this.units[5], isDeleted: false},
  {title:'asperagus', amount: 400, unit:this.units[3], isDeleted: false},
  {title:'tomato', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'pasta', amount: 600, unit:this.units[3], isDeleted: false},
  {title:'egg', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'spinach', amount: 800, unit:this.units[8], isDeleted: false},
  {title:'chilli', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'salt', amount: 1, unit:this.units[5], isDeleted: false},
  {title:'tomato', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'chickpea', amount: 960, unit:this.units[7], isDeleted: false},
  {title:'asperagus', amount: 400, unit:this.units[3], isDeleted: false},
  {title:'egg', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'spinach', amount: 800, unit:this.units[8], isDeleted: false},
  {title:'onion', amount: 2, unit:this.units[8], isDeleted: false},
  {title:'chickpea', amount: 960, unit:this.units[7], isDeleted: false},
  {title:'carrot', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'chilli', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'asperagus', amount: 400, unit:this.units[3], isDeleted: false},
  {title:'tomato', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'pasta', amount: 600, unit:this.units[3], isDeleted: false},
  {title:'egg', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'spinach', amount: 800, unit:this.units[8], isDeleted: false},
  {title:'chilli', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'salt', amount: 1, unit:this.units[5], isDeleted: false},
  {title:'tomato', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'chickpea', amount: 960, unit:this.units[7], isDeleted: false},
  {title:'asperagus', amount: 400, unit:this.units[3], isDeleted: false},
  {title:'egg', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'spinach', amount: 800, unit:this.units[8], isDeleted: false},
  {title:'onion', amount: 2, unit:this.units[8], isDeleted: false},
  {title:'chickpea', amount: 960, unit:this.units[7], isDeleted: false},
  {title:'carrot', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'chilli', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'asperagus', amount: 400, unit:this.units[3], isDeleted: false},
  {title:'tomato', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'pasta', amount: 600, unit:this.units[3], isDeleted: false},
  {title:'egg', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'spinach', amount: 800, unit:this.units[8], isDeleted: false},
  {title:'chilli', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'salt', amount: 1, unit:this.units[5], isDeleted: false},
  {title:'tomato', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'chickpea', amount: 960, unit:this.units[7], isDeleted: false},
  {title:'asperagus', amount: 400, unit:this.units[3], isDeleted: false},
  {title:'egg', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'spinach', amount: 800, unit:this.units[8], isDeleted: false},
  {title:'onion', amount: 2, unit:this.units[8], isDeleted: false},
  {title:'chickpea', amount: 960, unit:this.units[7], isDeleted: false},
  {title:'carrot', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'chilli', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'asperagus', amount: 400, unit:this.units[3], isDeleted: false},
  {title:'tomato', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'pasta', amount: 600, unit:this.units[3], isDeleted: false},
  {title:'egg', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'spinach', amount: 800, unit:this.units[8], isDeleted: false},
  {title:'chilli', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'salt', amount: 1, unit:this.units[5], isDeleted: false},
  {title:'tomato', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'chickpea', amount: 960, unit:this.units[7], isDeleted: false},
  {title:'asperagus', amount: 400, unit:this.units[3], isDeleted: false},
  {title:'egg', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'spinach', amount: 800, unit:this.units[8], isDeleted: false},
  {title:'onion', amount: 2, unit:this.units[8], isDeleted: false},
  {title:'chickpea', amount: 960, unit:this.units[7], isDeleted: false},
  {title:'carrot', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'chilli', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'asperagus', amount: 400, unit:this.units[3], isDeleted: false},
  {title:'tomato', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'pasta', amount: 600, unit:this.units[3], isDeleted: false},
  {title:'egg', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'spinach', amount: 800, unit:this.units[8], isDeleted: false},
  {title:'chilli', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'salt', amount: 1, unit:this.units[5], isDeleted: false},
  {title:'tomato', amount: 4, unit:this.units[6], isDeleted: false},
  {title:'chickpea', amount: 960, unit:this.units[7], isDeleted: false},
  {title:'asperagus', amount: 400, unit:this.units[3], isDeleted: false},
  {title:'egg', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'spinach', amount: 800, unit:this.units[8], isDeleted: false},
  {title:'onion', amount: 2, unit:this.units[8], isDeleted: false},
  {title:'chickpea', amount: 960, unit:this.units[7], isDeleted: false},
  {title:'carrot', amount: 1, unit:this.units[6], isDeleted: false},
  {title:'chilli', amount: 4, unit:this.units[6], isDeleted: false}
]


dogs: Object[] = [
  { name: 'Porter', human: 'Kara' },
  { name: 'Mal', human: 'Jeremy' },
  { name: 'Koby', human: 'Igor' },
  { name: 'Razzle', human: 'Ward' },
  { name: 'Molly', human: 'Rob' },
  { name: 'Husi', human: 'Matias' },
  { name: 'Porter', human: 'Kara' },
  { name: 'Mal', human: 'Jeremy' },
  { name: 'Koby', human: 'Igor' },
  { name: 'Razzle', human: 'Ward' },
  { name: 'Molly', human: 'Rob' },
  { name: 'Husi', human: 'Matias' },
  { name: 'Porter', human: 'Kara' },
  { name: 'Mal', human: 'Jeremy' },
  { name: 'Koby', human: 'Igor' },
  { name: 'Razzle', human: 'Ward' },
  { name: 'Molly', human: 'Rob' },
  { name: 'Husi', human: 'Matias' },
  { name: 'Porter', human: 'Kara' },
  { name: 'Mal', human: 'Jeremy' },
  { name: 'Koby', human: 'Igor' },
  { name: 'Razzle', human: 'Ward' },
  { name: 'Molly', human: 'Rob' },
  { name: 'Husi', human: 'Matias' },
  { name: 'Mal', human: 'Jeremy' },
  { name: 'Koby', human: 'Igor' },
  { name: 'Razzle', human: 'Ward' },
  { name: 'Molly', human: 'Rob' },
  { name: 'Husi', human: 'Matias' },
  { name: 'Porter', human: 'Kara' },
  { name: 'Mal', human: 'Jeremy' },
  { name: 'Koby', human: 'Igor' },
  { name: 'Razzle', human: 'Ward' },
  { name: 'Molly', human: 'Rob' },
  { name: 'Husi', human: 'Matias' },
  { name: 'Mal', human: 'Jeremy' },
  { name: 'Koby', human: 'Igor' },
  { name: 'Razzle', human: 'Ward' },
  { name: 'Molly', human: 'Rob' },
  { name: 'Husi', human: 'Matias' },
  { name: 'Porter', human: 'Kara' },
  { name: 'Mal', human: 'Jeremy' },
  { name: 'Koby', human: 'Igor' },
  { name: 'Razzle', human: 'Ward' },
  { name: 'Molly', human: 'Rob' },
  { name: 'Husi', human: 'Matias' }
];

pokemonGroups = [
  {
    name: 'Grass',
    pokemon: [
      { value: 'bulbasaur-0', viewValue: 'Bulbasaur' },
      { value: 'oddish-1', viewValue: 'Oddish' },
      { value: 'bellsprout-2', viewValue: 'Bellsprout' }
    ]
  },
  {
    name: 'Water',
    pokemon: [
      { value: 'squirtle-3', viewValue: 'Squirtle' },
      { value: 'psyduck-4', viewValue: 'Psyduck' },
      { value: 'horsea-5', viewValue: 'Horsea' }
    ]
  },
  {
    name: 'Fire',
    disabled: true,
    pokemon: [
      { value: 'charmander-6', viewValue: 'Charmander' },
      { value: 'vulpix-7', viewValue: 'Vulpix' },
      { value: 'flareon-8', viewValue: 'Flareon' }
    ]
  },
  {
    name: 'Psychic',
    pokemon: [
      { value: 'mew-9', viewValue: 'Mew' },
      { value: 'mewtwo-10', viewValue: 'Mewtwo' },
    ]
  }
];
  constructor() { }

  ngOnInit() {
  }

}
<file_sep>import {Component,Inject,Input} from  '@angular/core';
import {MatDialog, MatDialogRef,MAT_DIALOG_DATA} from '@angular/material';
import { MonthViewDay } from 'calendar-utils';
import { FormControl } from '@angular/forms';
import  'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
import {Recipe} from  './Recipe';

@Component({
  selector: 'add-dish-dialog',
  templateUrl: 'add-dish-dialog.html',
})
export class AddDishDialog {
  recipeCtrl: FormControl;
  recipes:Recipe[] =[
    {recipeName: "Matar Paneer", time: 30},
    {recipeName: "Sambhar", time: 40},
    {recipeName: "Asperagus-Spaghetti", time: 60},
    {recipeName: "Noodles", time: 30},
    {recipeName: "MixDal", time: 30},
    {recipeName: "Alloo-Eggplant", time: 30},
    {recipeName: "Boda", time: 30},
    {recipeName: "Bread-Omelette", time: 30},
    {recipeName: "Cereal", time: 5},
    {recipeName: "Sabu-Vada", time: 30},
    {recipeName: "Banana", time: 1}
 ]

 reactiveRecipes: any;
 dialogResult : any;

  constructor(
    public dialogRef: MatDialogRef<AddDishDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any) {

      this.recipeCtrl = new FormControl({recipeName: data.recipeName, time: data.time});
        this.reactiveRecipes = this.recipeCtrl.valueChanges
        .startWith(this.recipeCtrl.value)
        .map(val => this.displayFn(val))
        .map(recipeName => this.filterRecipes(recipeName));
     }
  
     onClick(mealType: string ): void {
       this.dialogResult = {recipeName: this.recipeCtrl.value.recipeName, mealType: mealType }
      this.dialogRef.close(this.dialogResult);
    }
  
  onNoClick(): void {
    this.dialogRef.close();
  }


  displayFn(value: any): string {
    return value && typeof value === 'object' ? value.recipeName : value;
  }
  filterRecipes(val: string) {
    return val ? this._filter(this.recipes, val) : this.recipes;
  }

  private _filter(recipes: Recipe[], val: string) {
    const filterValue = val.toLowerCase();
    return recipes.filter(recipe => recipe.recipeName.toLowerCase().startsWith(filterValue));
  }
}
<file_sep>import {
  Component,
  Input,
  Output,
  EventEmitter,
  TemplateRef
} from '@angular/core';
import { trigger, style, transition, animate } from '@angular/animations';
import { CalendarEvent } from 'calendar-utils';

@Component({
  selector: 'mwl-calendar-open-day-events',
  templateUrl:'./calendar-open-day-events.component.html',
  animations: [
    trigger('collapse', [
      transition('void => *', [
        style({ height: 0, overflow: 'hidden' }),
        animate('150ms', style({ height: '*' }))
      ]),
      transition('* => void', [
        style({ height: '*', overflow: 'hidden' }),
        animate('150ms', style({ height: 0 }))
      ])
    ])
  ]
})
export class CalendarOpenDayEventsComponent {
  @Input() isOpen: boolean = false;

  @Input() events: CalendarEvent[];

  @Input() customTemplate: TemplateRef<any>;

  @Input() eventTitleTemplate: TemplateRef<any>;

  @Output()
  eventClicked: EventEmitter<{ event: CalendarEvent }> = new EventEmitter<{
    event: CalendarEvent;
  }>();
}
