Can't bind to 'dataSource' - Angular

Question

i'm working with Angular this time and i get this error when I tried to do a table:

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'.

If 'dx-data-grid' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.

If 'dx-data-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

("AddressType" class="table m-b-0 toggle-arrow-tiny color-table info-table" [ERROR ->][dataSource]="dtAddressType"> </dx-data-grid> ")

Here my AdressType.component.html and AdressType.component.ts

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 => {
      this.addressTypes = addressTypes
      this.data = addressTypes
    },
      () => this.errors);
  }
  
  ... // Other things
}

<div class="row">
    <div class="card col-12">
        <div class="card">
            <div class="card-block" style="display: inline;">
                <br />
                <div class="table-responsive">
                    <dx-data-grid #grid id="tableAddressType" class="table m-b-0 toggle-arrow-tiny color-table info-table"
                        [dataSource]="dtAddressType">
                        
                    </dx-data-grid>
                </div>
            </div>
        </div>
    </div>
</div>

And my app.component.ts

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" });
  }
}

I'm seeing this link https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/SimpleArray/Angular/Light/

Why are you keeping your component and module into the same file? — Yashwardhan Pauranik
Did you add DxDataGridModule to you app NgModule imports? — Ivanes
Sorry, i'll change that, i copy and past on wrong file that part @YashwardhanPauranik, it's my module by app, i'll put that here too — LeoHenrique

Anil Anil · Accepted Answer · 2019-04-29T12:51:28

Refer here app.component.ts

for custom data source , you need to expose it in component.ts https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CustomDataSource/Angular/Light/

export class AppComponent { dataSource: any = {}; .... then you may need to use it with [] like [dataSource]="dataSource

Can't bind to 'dataSource' - Angular

1 Answers