title: Angular 6 Calendar Template parse errors: Can't bind to 'view' since it isn't a known property of 'div'
body: <p>Here i am trying to build an app that use this angular calendar: <a href="https://mattlewis92.github.io/angular-calendar/#/kitchen-sink" rel="noreferrer">https://mattlewis92.github.io/angular-calendar/#/kitchen-sink</a>
  Is very popular i guess you know it. I am using Angular 6 with AngularFire2 and Firebase. </p>
  
  <p>Here is my app.module.ts </p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AngularFireModule } from 'angularfire2';
  import { environment } from '../environments/environment';
  import { NgModel, FormsModule } from '@angular/forms';
  import { DragAndDropModule } from 'angular-draggable-droppable';
  import { ResizeEvent } from 'angular-resizable-element';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  // tslint:disable-next-line:max-line-length
  import {MatButtonModule, MatCheckboxModule, MatToolbarModule, MatSidenavModule, MatIconModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule} from '@angular/material';
  import {LayoutModule} from '@angular/cdk/layout';
  import { SidenavComponent } from './sidenav/sidenav.component';
  import { RouterModule, Routes } from '@angular/router';
  import { DashboardComponent } from './dashboard/dashboard.component';
  import { TableComponent } from './table/table.component';
  import { AngularFirestoreModule } from 'angularfire2/firestore';
  import { AngularFireStorageModule } from 'angularfire2/storage';
  import { AngularFireAuthModule } from 'angularfire2/auth';
  import { CoreModule } from './core/core.module';
  import { UserProfileComponent } from './user-profile/user-profile.component';
  import { CalendarComponent } from './calendar/calendar.component';
  import { ResizableModule } from 'angular-resizable-element';
  
  @NgModule({
    declarations: [
      AppComponent,
      SidenavComponent,
      DashboardComponent,
      TableComponent,
      UserProfileComponent,
      CalendarComponent,
    ],
    imports: [
      ResizableModule,
      [DragAndDropModule.forRoot()],
      BrowserModule,
      AppRoutingModule,
      CoreModule,
      AngularFireModule.initializeApp(environment.firebase),
      AngularFirestoreModule, // imports firebase/firestore, only needed for database features
      AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
      AngularFireStorageModule, // imports firebase/storage only needed for storage features
      AppRoutingModule,
      [MatButtonModule, MatCheckboxModule],
      [BrowserAnimationsModule],
      LayoutModule,
      BrowserAnimationsModule,
      MatToolbarModule,
      MatButtonModule,
      MatSidenavModule,
      MatIconModule,
      MatListModule,
      MatGridListModule,
      MatCardModule,
      MatMenuModule,
      MatTableModule,
      MatPaginatorModule,
      MatSortModule,
    ],
    exports: [ RouterModule ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Ok here is my calendar.component.ts </p>
  
  <pre><code>import {
    Component,
    ChangeDetectionStrategy,
    ViewChild,
    TemplateRef
  } from '@angular/core';
  import {
    startOfDay,
    endOfDay,
    subDays,
    addDays,
    endOfMonth,
    isSameDay,
    isSameMonth,
    addHours
  } from 'date-fns';
  import { Subject } from 'rxjs';
  import {
    CalendarEvent,
    CalendarEventAction,
    CalendarEventTimesChangedEvent
  } from 'angular-calendar';
  import { NgbModal } from '../../../node_modules/@ng-bootstrap/ng-bootstrap';
  
  const colors: any = {
    red: {
      primary: '#ad2121',
      secondary: '#FAE3E3'
    },
    blue: {
      primary: '#1e90ff',
      secondary: '#D1E8FF'
    },
    yellow: {
      primary: '#e3bc08',
      secondary: '#FDF1BA'
    }
  };
  
  @Component({
    selector: 'app-calendar',
    changeDetection: ChangeDetectionStrategy.OnPush,
    styleUrls: ['calendar.component.css'],
    templateUrl: 'calendar.component.html'
  })
  export class CalendarComponent {
    @ViewChild('modalContent') modalContent: TemplateRef&lt;any&gt;;
  
    view = 'month';
  
    viewDate: Date = new Date();
  
    modalData: {
      action: string;
      event: CalendarEvent;
    };
  
    actions: CalendarEventAction[] = [
      {
        label: '&lt;i class="fa fa-fw fa-pencil"&gt;&lt;/i&gt;',
        onClick: ({ event }: { event: CalendarEvent }): void =&gt; {
          this.handleEvent('Edited', event);
        }
      },
      {
        label: '&lt;i class="fa fa-fw fa-times"&gt;&lt;/i&gt;',
        onClick: ({ event }: { event: CalendarEvent }): void =&gt; {
          this.events = this.events.filter(iEvent =&gt; iEvent !== event);
          this.handleEvent('Deleted', event);
        }
      }
    ];
  
    refresh: Subject&lt;any&gt; = new Subject();
  
    events: CalendarEvent[] = [
      {
        start: subDays(startOfDay(new Date()), 1),
        end: addDays(new Date(), 1),
        title: 'A 3 day event',
        color: colors.red,
        actions: this.actions
      },
      {
        start: startOfDay(new Date()),
        title: 'An event with no end date',
        color: colors.yellow,
        actions: this.actions
      },
      {
        start: subDays(endOfMonth(new Date()), 3),
        end: addDays(endOfMonth(new Date()), 3),
        title: 'A long event that spans 2 months',
        color: colors.blue
      },
      {
        start: addHours(startOfDay(new Date()), 2),
        end: new Date(),
        title: 'A draggable and resizable event',
        color: colors.yellow,
        actions: this.actions,
        resizable: {
          beforeStart: true,
          afterEnd: true
        },
        draggable: true
      }
    ];
  
    activeDayIsOpen = true;
  
    constructor(private modal: NgbModal) {}
  
    dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
      if (isSameMonth(date, this.viewDate)) {
        this.viewDate = date;
        if (
          (isSameDay(this.viewDate, date) &amp;&amp; this.activeDayIsOpen === true) ||
          events.length === 0
        ) {
          this.activeDayIsOpen = false;
        } else {
          this.activeDayIsOpen = true;
        }
      }
    }
  
    eventTimesChanged({
      event,
      newStart,
      newEnd
    }: CalendarEventTimesChangedEvent): void {
      event.start = newStart;
      event.end = newEnd;
      this.handleEvent('Dropped or resized', event);
      this.refresh.next();
    }
  
    handleEvent(action: string, event: CalendarEvent): void {
      this.modalData = { event, action };
      this.modal.open(this.modalContent, { size: 'lg' });
    }
  
    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();
    }
  }
  </code></pre>
  
  <p>calendar.component.html </p>
  
  <pre><code>    &lt;ng-template #modalContent let-close="close"&gt;
    &lt;div class="modal-header"&gt;
      &lt;h5 class="modal-title"&gt;Event action occurred&lt;/h5&gt;
      &lt;button type="button" class="close" (click)="close()"&gt;
        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;div&gt;
        Action:
        &lt;pre&gt;{{ modalData?.action }}&lt;/pre&gt;
      &lt;/div&gt;
      &lt;div&gt;
        Event:
        &lt;pre&gt;{{ modalData?.event | json }}&lt;/pre&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button type="button" class="btn btn-outline-secondary" (click)="close()"&gt;OK&lt;/button&gt;
    &lt;/div&gt;
  &lt;/ng-template&gt;
  
  &lt;div class="row text-center"&gt;
    &lt;div class="col-md-4"&gt;
      &lt;div class="btn-group"&gt;
        &lt;div
          class="btn btn-primary"
          mwlCalendarPreviousView
          [view]="view"
          [(viewDate)]="viewDate"
          (viewDateChange)="activeDayIsOpen = false"&gt;
          Previous
        &lt;/div&gt;
        &lt;div
          class="btn btn-outline-secondary"
          mwlCalendarToday
          [(viewDate)]="viewDate"&gt;
          Today
        &lt;/div&gt;
        &lt;div
          class="btn btn-primary"
          mwlCalendarNextView
          [view]="view"
          [(viewDate)]="viewDate"
          (viewDateChange)="activeDayIsOpen = false"&gt;
          Next
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
      &lt;h3&gt;{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
      &lt;div class="btn-group"&gt;
        &lt;div
          class="btn btn-primary"
          (click)="view = 'month'"
          [class.active]="view === 'month'"&gt;
          Month
        &lt;/div&gt;
        &lt;div
          class="btn btn-primary"
          (click)="view = 'week'"
          [class.active]="view === 'week'"&gt;
          Week
        &lt;/div&gt;
        &lt;div
          class="btn btn-primary"
          (click)="view = 'day'"
          [class.active]="view === 'day'"&gt;
          Day
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div [ngSwitch]="view"&gt;
    &lt;mwl-calendar-month-view
      *ngSwitchCase="'month'"
      [viewDate]="viewDate"
      [events]="events"
      [refresh]="refresh"
      [activeDayIsOpen]="activeDayIsOpen"
      (dayClicked)="dayClicked($event.day)"
      (eventClicked)="handleEvent('Clicked', $event.event)"
      (eventTimesChanged)="eventTimesChanged($event)"&gt;
    &lt;/mwl-calendar-month-view&gt;
    &lt;mwl-calendar-week-view
      *ngSwitchCase="'week'"
      [viewDate]="viewDate"
      [events]="events"
      [refresh]="refresh"
      (eventClicked)="handleEvent('Clicked', $event.event)"
      (eventTimesChanged)="eventTimesChanged($event)"&gt;
    &lt;/mwl-calendar-week-view&gt;
    &lt;mwl-calendar-day-view
      *ngSwitchCase="'day'"
      [viewDate]="viewDate"
      [events]="events"
      [refresh]="refresh"
      (eventClicked)="handleEvent('Clicked', $event.event)"
      (eventTimesChanged)="eventTimesChanged($event)"&gt;
    &lt;/mwl-calendar-day-view&gt;
  &lt;/div&gt;
  
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;h3&gt;
    Edit events
    &lt;button
      class="btn btn-primary pull-right"
      (click)="addEvent()"&gt;
      Add new
    &lt;/button&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/h3&gt;
  
  &lt;table class="table table-bordered"&gt;
  
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Title&lt;/th&gt;
        &lt;th&gt;Primary color&lt;/th&gt;
        &lt;th&gt;Secondary color&lt;/th&gt;
        &lt;th&gt;Starts at&lt;/th&gt;
        &lt;th&gt;Ends at&lt;/th&gt;
        &lt;th&gt;Remove&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tbody&gt;
      &lt;tr *ngFor="let event of events; let index = index"&gt;
        &lt;td&gt;
          &lt;input
            type="text"
            class="form-control"
            [(ngModel)]="event.title"
            (keyup)="refresh.next()"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input
            type="color"
            [(ngModel)]="event.color.primary"
            (change)="refresh.next()"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input
            type="color"
            [(ngModel)]="event.color.secondary"
            (change)="refresh.next()"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input
            class="form-control"
            type="text"
            mwlFlatpickr
            [(ngModel)]="event.start"
            (ngModelChange)="refresh.next()"
            [altInput]="true"
            [convertModelValue]="true"
            [enableTime]="true"
            dateFormat="Y-m-dTH:i"
            altFormat="F j, Y H:i"
            placeholder="Not set"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input
            class="form-control"
            type="text"
            mwlFlatpickr
            [(ngModel)]="event.end"
            (ngModelChange)="refresh.next()"
            [altInput]="true"
            [convertModelValue]="true"
            [enableTime]="true"
            dateFormat="Y-m-dTH:i"
            altFormat="F j, Y H:i"
            placeholder="Not set"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;button
            class="btn btn-danger"
            (click)="events.splice(index, 1); refresh.next()"&gt;
            Delete
          &lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>I am junior with Angular and i may miss something little. Please if you can help me solve this i would really appreciate it. Here is the error i get </p>
  
  <blockquote>
    <p>Uncaught Error: Template parse errors: Can't bind to 'view' since it
    isn't a known property of 'div'. ("
            class="btn btn-primary"
            mwlCalendarPreviousView
            [ERROR ->][view]="view"
            [(viewDate)]="viewDate"
            (viewDateChange)="activeDayIsOpen = false"> "): ng:///AppModule/CalendarComponent.html@28:8 Can't bind to 'viewDate'
    since it isn't a known property of 'div'. ("
            mwlCalendarPreviousView
            [view]="view"
            [ERROR ->][(viewDate)]="viewDate"
            (viewDateChange)="activeDayIsOpen = false">
            Previous "): ng:///AppModule/CalendarComponent.html@29:8 Can't bind to 'viewDate' since it isn't a known property of 'div'. ("
            class="btn btn-outline-secondary"
            mwlCalendarToday
            [ERROR ->][(viewDate)]="viewDate">
            Today
           "): ng:///AppModule/CalendarComponent.html@36:8 Can't bind to 'view' since it isn't a known property of 'div'. ("
            class="btn btn-primary"
            mwlCalendarNextView
            [ERROR ->][view]="view"
            [(viewDate)]="viewDate"
            (viewDateChange)="activeDayIsOpen = false"> "): ng:///AppModule/CalendarComponent.html@42:8 Can't bind to 'viewDate'
    since it isn't a known property of 'div'. ("
            mwlCalendarNextView
            [view]="view"
            [ERROR ->][(viewDate)]="viewDate"
            (viewDateChange)="activeDayIsOpen = false">
            Next "): ng:///AppModule/CalendarComponent.html@43:8 The pipe 'calendarDate' could not be found ("      
        <h3>{{ [ERROR ->]viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>       "):
    ng:///AppModule/CalendarComponent.html@50:11 Can't bind to 'viewDate'
    since it isn't a known property of 'mwl-calendar-month-view'.
    1. If 'mwl-calendar-month-view' is an Angular component and it has 'viewDate' input, then verify that it is part of this module.
    2. If 'mwl-calendar-month-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component
    to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("   ][viewDate]="viewDate"
        [events]="events"
        [refresh]="refresh" "): ng:///AppModule/CalendarComponent.html@79:4 Can't bind to 'events'
    since it isn't a known property of 'mwl-calendar-month-view'.
    1. If 'mwl-calendar-month-view' is an Angular component and it has 'events' input, then verify that it is part of this module.
    2. If 'mwl-calendar-month-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component
    to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
        *ngSwitchCase="'month'"
        [viewDate]="viewDate"
        [ERROR ->][events]="events"
        [refresh]="refresh"
        [activeDayIsOpen]="activeDayIsOpen" "): ng:///AppModule/CalendarComponent.html@80:4 Can't bind to 'refresh'
    since it isn't a known property of 'mwl-calendar-month-view'.
    1. If 'mwl-calendar-month-view' is an Angular component and it has 'refresh' input, then verify that it is part of this module.
    2. If 'mwl-calendar-month-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component
    to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
        [viewDate]="viewDate"
        [events]="events"
        [ERROR ->][refresh]="refresh"
        [activeDayIsOpen]="activeDayIsOpen"
        (dayClicked)="dayClicked($event.day)""): ng:///AppModule/CalendarComponent.html@81:4 Can't bind to
    'activeDayIsOpen' since it isn't a known property of
    'mwl-calendar-month-view'.
    1. If 'mwl-calendar-month-view' is an Angular component and it has 'activeDayIsOpen' input, then verify that it is part of this module.
    2. If 'mwl-calendar-month-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component
    to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
        [events]="events"
        [refresh]="refresh"
        [ERROR ->][activeDayIsOpen]="activeDayIsOpen"
        (dayClicked)="dayClicked($event.day)"
        (eventClicked)="han"): ng:///AppModule/CalendarComponent.html@82:4 'mwl-calendar-month-view' is not a known element:
    1. If 'mwl-calendar-month-view' is an Angular component, then verify that it is part of this module.
    2. If 'mwl-calendar-month-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component
    to suppress this message. (" <br>    [ERROR
    ->])
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents
    (compiler.js:23930)
        at compiler.js:23840
        at Object.then (compiler.js:1007)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents
    (compiler.js:23839)</p>
  </blockquote>