title: Can't bind to 'dataSource' - Angular
body: <p>i'm working with Angular this time and i get this error when I tried to do a table:</p>
  <blockquote>
  <p>Erro Response:  Error: Uncaught (in promise): Error: Template parse
  errors: Can't bind to 'dataSource' since it isn't a known property of 'dx-data-grid'.</p>
  <ol>
  <li><p>If 'dx-data-grid' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.</p>
  </li>
  <li><p>If 'dx-data-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component
  to suppress this message.</p>
  </li>
  <li><p>To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.</p>
  </li>
  </ol>
  <p>(&quot;AddressType&quot; class=&quot;table m-b-0 toggle-arrow-tiny color-table info-table&quot; [ERROR -&gt;]<code>[dataSource]=&quot;dtAddressType&quot;&gt; &lt;/dx-data-grid&gt;</code> &quot;)</p>
  </blockquote>
  <p>Here my AdressType.component.html and AdressType.component.ts</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, OnInit, ViewContainerRef, NgModule } from '@angular/core';
  import { AdressType } from '../models/adresstype';
  import { AddressTypeService } from '../adresstype.service';
  
  @Component({
    selector: '...',
    templateUrl: '...',
    styleUrls: ['...']
  })
  
  export class ListAddressTypeComponent implements OnInit {
    public addressTypes: AddressType[];
    
    constructor(
      public addressTypeService: AddressTypeService) {
      ... // Other things
    }
  
    ngOnInit(): void {
      this.addressTypeService.GetAdressTypes()
      .subscribe(addressTypes =&gt; {
        this.addressTypes = addressTypes
        this.data = addressTypes
      },
        () =&gt; this.errors);
    }
    
    ... // Other things
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
      &lt;div class="card col-12"&gt;
          &lt;div class="card"&gt;
              &lt;div class="card-block" style="display: inline;"&gt;
                  &lt;br /&gt;
                  &lt;div class="table-responsive"&gt;
                      &lt;dx-data-grid #grid id="tableAddressType" class="table m-b-0 toggle-arrow-tiny color-table info-table"
                          [dataSource]="dtAddressType"&gt;
                          
                      &lt;/dx-data-grid&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And my app.component.ts</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 { DxDataGridModule } from 'devextreme-angular';
  import { BrowserModule } from '@angular/platform-browser';
  import { Component,NgModule } from '@angular/core';
  import config from "devextreme/core/config";
  import { loadMessages, locale } from "devextreme/localization";
  import 'devextreme-intl';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  @NgModule({
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
  })
  export class AppComponent {
    title = 'app';
    locale: string;
    constructor() {
      config({ defaultCurrency: "BRL" });
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I'm seeing this link <a href="https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/SimpleArray/Angular/Light/" rel="nofollow noreferrer">https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/SimpleArray/Angular/Light/</a></p>