title: angular material MatChipInputEvent error in console
body: <p>chip.component.ts</p>
  
  <pre><code>    import { Component, OnInit } from '@angular/core';
      import { MatChipInputEvent } from '@angular/material';
      import {ENTER, COMMA} from '@angular/cdk/keycodes';
  
  
      @Component({
      selector: 'app-chip',
      templateUrl: './chip.component.html',
      styleUrls: ['./chip.component.css']
      })
      export class ChipComponent {
      constructor() { }
      visible: boolean = true;
      selectable: boolean = true;
      removable: boolean = true;
      addOnBlur: boolean = true;
  
      // Enter, comma
      separatorKeysCodes = [ENTER, COMMA];
  
      keywords = [];
  
  
      add(event: MatChipInputEvent): void {
          let input = event.input;
          let value = event.value;
  
          // Add our keyword
          if ((value || '').trim()) {
          this.keywords.push(value.trim());
          }
  
          // Reset the input value
          if (input) {
          input.value = '';
          }
      }
  
      remove(keyword: any): void {
          let index = this.keywords.indexOf(keyword);
  
          if (index &gt;= 0) {
          this.keywords.splice(index, 1);
          }
      }
  
      }
  </code></pre>
  
  <p>chip.component.html</p>
  
  <pre><code>    &lt;mat-form-field class="demo-chip-list"&gt;
      &lt;mat-chip-list #chipList&gt;
          &lt;mat-chip *ngFor="let keyword of keywords" [selectable]="selectable"
                  [removable]="removable" (remove)="remove(keyword)"&gt;
          {{keyword}}
          &lt;mat-icon matChipRemove *ngIf="removable"&gt;cancel&lt;/mat-icon&gt;
          &lt;/mat-chip&gt;
          &lt;input placeholder="Keywords"
              [matChipInputFor]="chipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              [matChipInputAddOnBlur]="addOnBlur"
              (matChipInputTokenEnd)="add($event)" /&gt;
      &lt;/mat-chip-list&gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>errors in console:</p>
  
  <pre><code>    Uncaught Error: Template parse errors:
      Can't bind to 'selectable' since it isn't a known property of 'mat-chip'.
      1. If 'mat-chip' is an Angular component and it has 'selectable' input, then verify that it is part of this module.
      2. If 'mat-chip' 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. (" class="demo-chip-list"&gt;
      &lt;mat-chip-list #chipList&gt;
          &lt;mat-chip *ngFor="let keyword of keywords" [ERROR -&gt;][selectable]="selectable"
                  [removable]="removable" (remove)="remove(keyword)"&gt;
          {{ke"): ng:///AppModule/ChipComponent.html@2:47
      Can't bind to 'removable' since it isn't a known property of 'mat-chip'.
      1. If 'mat-chip' is an Angular component and it has 'removable' input, then verify that it is part of this module.
      2. If 'mat-chip' 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. ("st #chipList&gt;
          &lt;mat-chip *ngFor="let keyword of keywords" [selectable]="selectable"
                  [ERROR -&gt;][removable]="removable" (remove)="remove(keyword)"&gt;
          {{keyword}}
          &lt;mat-icon matChipRemove *"): ng:///AppModule/ChipComponent.html@3:13
      'mat-icon' is not a known element:
      1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
      2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
                  [removable]="removable" (remove)="remove(keyword)"&gt;
          {{keyword}}
          [ERROR -&gt;]&lt;mat-icon matChipRemove *ngIf="removable"&gt;cancel&lt;/mat-icon&gt;
          &lt;/mat-chip&gt;
          &lt;input placeholder="K"): ng:///AppModule/ChipComponent.html@5:6
      'mat-chip' is not a known element:
      1. If 'mat-chip' is an Angular component, then verify that it is part of this module.
      2. If 'mat-chip' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("&lt;mat-form-field class="demo-chip-list"&gt;
      &lt;mat-chip-list #chipList&gt;
          [ERROR -&gt;]&lt;mat-chip *ngFor="let keyword of keywords" [selectable]="selectable"
                  [removable]="remova"): ng:///AppModule/ChipComponent.html@2:4
      Can't bind to 'matChipInputFor' since it isn't a known property of 'input'. ("
          &lt;/mat-chip&gt;
          &lt;input placeholder="Keywords"
              [ERROR -&gt;][matChipInputFor]="chipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              "): ng:///AppModule/ChipComponent.html@8:11
      Can't bind to 'matChipInputSeparatorKeyCodes' since it isn't a known property of 'input'. ("
          &lt;input placeholder="Keywords"
              [matChipInputFor]="chipList"
              [ERROR -&gt;][matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              [matChipInputAddOnBlur]="addOnBlur"
      "): ng:///AppModule/ChipComponent.html@9:11
      Can't bind to 'matChipInputAddOnBlur' since it isn't a known property of 'input'. ("ChipInputFor]="chipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              [ERROR -&gt;][matChipInputAddOnBlur]="addOnBlur"
              (matChipInputTokenEnd)="add($event)" /&gt;
      &lt;/mat-chip-l"): ng:///AppModule/ChipComponent.html@10:11
      'mat-chip-list' is not a known element:
      1. If 'mat-chip-list' is an Angular component, then verify that it is part of this module.
      2. If 'mat-chip-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("&lt;mat-form-field class="demo-chip-list"&gt;
      [ERROR -&gt;]&lt;mat-chip-list #chipList&gt;
          &lt;mat-chip *ngFor="let keyword of keywords" [selectable]="selectable"
      "): ng:///AppModule/ChipComponent.html@1:2
      'mat-form-field' is not a known element:
      1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
      2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR -&gt;]&lt;mat-form-field class="demo-chip-list"&gt;
      &lt;mat-chip-list #chipList&gt;
          &lt;mat-chip *ngFor="let keyword"): ng:///AppModule/ChipComponent.html@0:0
          at syntaxError (compiler.js:2426)
          at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20600)
          at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26146)
          at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26133)
          at compiler.js:26076
          at Set.forEach (&lt;anonymous&gt;)
          at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26076)
          at compiler.js:25986
          at Object.then (compiler.js:2417)
          at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents 
  </code></pre>
  
  <p>Here i am trying to integrate angular material <strong>MatChipInputEvent</strong>
  In my terminal it is compiling successfully but in console it is showing template 
  parsing error.</p>
  
  <p>Am i missing any other import .</p>
  
  <p>I have done the same from angular documentations.</p>
  
  <p>Please have a look.</p>