title: use formControl in angular code
body: <p>I'm not able to use formControl in my mat-select.</p>
  
  <p>I'll remove all innecessary data from files.</p>
  
  <p>this is my package.json</p>
  
  <pre><code>"dependencies": {
    "@angular/cdk": "5.0.4",
    "@angular/common": "~5.2.0",
    "@angular/compiler": "~5.2.0",
    "@angular/core": "~5.2.0",
    "@angular/flex-layout": "2.0.0-beta.12",
    "@angular/forms": "~5.2.0",
    "@angular/material": "5.0.4"
  }
  </code></pre>
  
  <p>The folder structure:</p>
  
  <pre><code>-src
    -app
      -myComponent
        -myComponent.component.html
        -myComponent.component.ts
        -myCompnent.module.ts
      -shared
        -material
           -material.module.ts
        -shared.module.ts
  </code></pre>
  
  <p>material.module.ts:</p>
  
  <pre><code>import { FormsModule } from '@angular/forms';
  import { MatSelectModule } from '@angular/material';
  
  
  @NgModule({
   providers: [],
   imports: [
      FormsModule
   ],
   exports: [
     MatSelectModule
   ]
  })
   export class CustomMaterialModule {
  }
  </code></pre>
  
  <p>shared.module.ts</p>
  
  <pre><code>import { CustomMaterialModule } from './material/material.module';
  
  @NgModule({
    exports: [
      CustomMaterialModule
    ],
    declarations: []
  })
  
  export class SharedModule {
  }
  </code></pre>
  
  <p>and in myComponent.module  </p>
  
  <pre><code>import { SharedModule } from "../shared/shared.module";
  
  @NgModule({
    imports: [
      SharedModule,
    ],
    declarations: [myComponent],
    exports: [myComponent]
   })
  export class myComponentModule { }
  </code></pre>
  
  <p>Now my component.html and ts from <a href="https://material.angular.io/components/select/overview" rel="nofollow noreferrer">https://material.angular.io/components/select/overview</a>:</p>
  
  <pre><code> export class myComponent {
   toppings = new FormControl();
  
   toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
  
  
  &lt;mat-form-field&gt;
     &lt;mat-select placeholder="Toppings" [formControl]="toppings" multiple&gt;
       &lt;mat-select-trigger&gt;
            {{toppings.value ? toppings.value[0] : ''}}
            &lt;span *ngIf="toppings.value?.length &gt; 1" class="example-additional-selection"&gt;
              (+{{toppings.value.length - 1}} others)
            &lt;/span&gt;
        &lt;/mat-select-trigger&gt;
       &lt;mat-option *ngFor="let topping of toppingList" [value]="topping"&gt;{{topping}}&lt;/mat-option&gt;
        &lt;/mat-select&gt;
   &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I have this error when executing:</p>
  
  <pre><code>Can't bind to 'formControl' since it isn't a known property of 'mat-select'.
  1. If 'mat-select' is an Angular component and it has 'formControl' input, then verify that it is part of this module.
  2. If 'mat-select' 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. ("
  </code></pre>
  
  <p>What are I'm missing?</p>