title: Can't bind to 'view' since it isn't a known property of 'div' Ionic3
body: <p>I am new to Ionic and I am trying to use <a href="https://github.com/mattlewis92/angular-calendar#getting-started" rel="nofollow noreferrer">Angular Calendar</a> in my Ionic3 application. But it throws me an error stating, </p>
  
  <p>Can't bind to 'view' since it isn't a known property of 'div'. Here's the screenshot: <a href="https://i.stack.imgur.com/5jDLw.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>Here is my app.module file</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { BrowserModule } from '@angular/platform-browser';
  import { ErrorHandler, NgModule } from '@angular/core';
  import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
  import { SplashScreen } from '@ionic-native/splash-screen';
  import { StatusBar } from '@ionic-native/status-bar';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { HttpClientModule, HttpClient } from '@angular/common/http';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { HttpModule, Headers } from '@angular/http';
  import { CommonModule } from '@angular/common';
  import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
  import { IonicStorageModule } from '@ionic/storage';
  import { CalendarModule } from 'angular-calendar';
  import { NgxPaginationModule } from 'ngx-pagination';
  import {CalendarprimModule} from 'primeng/calendar';
  
  import { MyApp } from './app.component';
  import { WelcomePage } from '../pages/welcome/welcome';
  import { MycardeditPage } from '../pages/mycardedit/mycardedit';
  import { EditModalPage } from '../pages/edit-modal/edit-modal';
  import { FormaddPage } from '../pages/formadd/formadd';
  import { JobmodalPage } from '../pages/jobmodal/jobmodal';
  import { DataService } from '../providers/data-service/data-service';
  
  @NgModule({
    declarations: [
      MyApp,
      WelcomePage,
      EditModalPage,
      MycardeditPage,
      FormaddPage,
      JobmodalPage
    ],
    imports: [
      CalendarprimModule,
      BrowserModule,
      CommonModule,
      BrowserAnimationsModule,
      CalendarModule.forRoot(),
      NgbModalModule.forRoot(),
      FormsModule,
      HttpClientModule,
      ReactiveFormsModule,
      HttpModule,
      NgxPaginationModule,
      IonicModule.forRoot(MyApp),
      IonicStorageModule.forRoot()
    ],
    bootstrap: [IonicApp],
    entryComponents: [
      MyApp,
      WelcomePage,
      MycardeditPage,
      EditModalPage,
      FormaddPage,
      JobmodalPage
    ],
    providers: [
      StatusBar,
      SplashScreen,
      HttpClientModule,
      {provide: ErrorHandler, useClass: IonicErrorHandler},
      DataService
    ]
  })
  export class AppModule {}</code></pre>
  </div>
  </div>
  </p>
  
  <p>My typecscript looks something like this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, ViewChild, ChangeDetectionStrategy, TemplateRef, ViewEncapsulation } from '@angular/core';
  import { IonicPage, NavController, NavParams, AlertController, ModalController } from 'ionic-angular';
  import { WelcomePage } from '../welcome/welcome';
  import { MycardeditPage } from '../mycardedit/mycardedit';
  import { FormBuilder, FormGroup, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
  import { HttpClientModule, HttpClient } from '@angular/common/http';
  import { DataService } from '../../providers/data-service/data-service';
  import { Storage } from '@ionic/storage';
  import 'rxjs/add/operator/toPromise';
  import * as moment from 'moment';
  import { NgModule } from '@angular/core';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import {
    startOfDay,
    endOfDay,
    subDays,
    addDays,
    endOfMonth,
    isSameDay,
    isSameMonth,
    addHours
  } from 'date-fns';
  import { Subject } from 'rxjs/Subject';
  import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
  import { CalendarModule } from 'angular-calendar';
  import {
    CalendarEvent,
    CalendarEventAction,
    CalendarEventTimesChangedEvent
  } from 'angular-calendar';
  
  const colors: any = {
    red: {
      primary: '#ad2121',
      secondary: '#FAE3E3'
    },
    blue: {
      primary: '#1e90ff',
      secondary: '#D1E8FF'
    },
    yellow: {
      primary: '#e3bc08',
      secondary: '#FDF1BA'
    }
  };
  
  @IonicPage()
  @Component({
    selector: 'page-calendarnew',
    templateUrl: 'calendarnew.html',
  })
  export class CalendarnewPage {
    
    public date = moment();
    public dateForm: FormGroup;
    public isReserved = null;
    public isReservedDay = null;
    public daysArr;
    @ViewChild('recId') recId;
    @ViewChild('frdId') frdId;
    @ViewChild('month') month;
    @ViewChild('days') days;
    @ViewChild('currDate') currDate;
    @ViewChild('modalContent') modalContent: TemplateRef&lt;any&gt;;
  
    view: string = '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: boolean = true;
    
    ngOnInit() {
  
    }
    constructor(public navCtrl: NavController, public navParams: NavParams, private modal: NgbModal, private dataService:DataService) {
    }
  
    dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
      if (isSameMonth(date, this.viewDate)) {
        if (
          (isSameDay(this.viewDate, date) &amp;&amp; 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(action: string, event: CalendarEvent): void {
      document.getElementById('mCont').style.display = 'flex';
      this.modalData = { event, action };
      this.modal.open(this.modalContent, { size: 'lg' });
    }
  
    close() {
      document.getElementById('mCont').style.display = 'none';
    }
  
    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>
  </div>
  </div>
  </p>
  
  <p>Finally my component looks like this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ion-card-content class="myclass"&gt;
        &lt;div class="row text-center topRow" style="margin-top: 3%; margin-bottom: 1%;"&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" style="width: 90%; margin-left: 5%; margin-bottom: 13%;"&gt;
    &lt;mwl-calendar-month-view class="myCal"
      *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 #modalContent id="mCont" style="display: none; flex-direction: column; justify-content: center; margin-top: 20px; border: 1px solid rgb(221, 221, 221); padding: 12px; color: #fff; background: #197CD3;"&gt;
       &lt;div class="modal-header" style="display: flex;"&gt;
        &lt;h5 class="modal-title" style="display: flex; flex: 1;"&gt;Event action occurred&lt;/h5&gt;
        &lt;button type="button" class="close" style="font-weight: 700;font-size: 25px;" (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;
          Event:
          &lt;pre style="margin-top: 10px; padding: 6px 10px; border-radius: 1px; background: #fff;"&gt;Title: {{ modalData?.event.title }}&lt;/pre&gt;
          &lt;pre style="padding: 6px 10px; border-radius: 1px; background: #fff;"&gt;Start: {{ modalData?.event.start }}&lt;/pre&gt;
          &lt;pre style="padding: 6px 10px; border-radius: 1px; background: #fff;"&gt;End: {{ modalData?.event.end }}&lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;div class="modal-footer" style="padding: 10px; padding-bottom: 0px;"&gt;
          &lt;button type="button" class="btn btn-default" style="padding: 5px 10px; font-size: 12px; border: 1px solid #ccc; border-radius: 1px;" (click)="close()" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
    
      &lt;/ion-card-content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now when I render the component, it gives me the error: </p>
  
  <pre><code>Can't bind to 'view' since it isn't a known property of 'div'. ("
          class="btn btn-primary"
          mwlCalendarPreviousView
          [ERROR -&gt;][view]="view"
          [(viewDate)]="viewDate"
          (viewDateChange)="activeDayIsOpen = false"&gt;
  "): ng:///CalendarnewPageModule/CalendarnewPage.html@24:8
  </code></pre>
  
  <p>Is there something that I might have missed. Please help. </p>