Angular Material2 Table

Question

I have a simple table that shows static data, however, I have issues for showing it via input.

The question is how can I pass the data to the material2 table using item input.

export class InvoiceItemComponent implements OnInit {
  displayedColumns = ['id', 'description', 'amount', 'taxGroup'];
  exampleDatabase = new ExampleDataBase();
  dataSource: ExampleDataSource | null;
  @Input() item;

  constructor() {}

  ngOnInit() {
    console.log(this.exampleDatabase.data);
    this.dataSource = new ExampleDataSource(this.exampleDatabase);
  }
}

export class ExampleDataBase {
  dataChange: BehaviorSubject<any> = new BehaviorSubject([]);
   get data(): InvoiceItem[] {
    return [ // works fine with static data, cannot figure out how to pass it via @Input() item which is the required data
      {
        id: 1,
        description: 'your desc here',
        amount: 20,
        taxAmount: 20,
        taxGroup: {
          id: 1,
          name: 'tax group name'
        }
      },
    ];
  }

  constructor() {
    this.dataChange.next(this.data);
  }
}

export class ExampleDataSource extends DataSource<any> {
  constructor(private _exampleDatabase: ExampleDataBase) {
    super();
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<InvoiceItem[]> {
    console.log(this._exampleDatabase.dataChange);

    return this._exampleDatabase.dataChange;
  }

  disconnect() {}
}

Check this https://stackoverflow.com/questions/45004524/how-to-use-material2-data-table/45157734#45157734 — Shijith Mohanan
– Shijith Mohanan, Commented Jul 27, 2017 at 8:51
@ShijithMohanan I have checked it, however, it doesn't solve my problem — agriboz
– agriboz, Commented Jul 27, 2017 at 10:03

Will Howell · Accepted Answer · 2017-07-27 13:47:29Z

1

Maybe try something like this

export class InvoiceItemComponent implements OnInit {

  displayedColumns = ['id', 'description', 'amount', 'taxGroup'];

  dataSource: InvoiceItemDataSource | null;

  @Input() set items(vals: InvoiceItem[]) {
    this.itemSubject.next(vals);
  }

  /** Emits a new array of invoice items whenver `@Input() items` changes */
  itemSubject = new BehaviorSubject<InvoiceItem[]>([]);

  constructor() {}

  ngOnInit() {
    // Pass the item subject as an observable which can be connected directly
    // to the data source's `connect()`
    this.dataSource = new InvoiceItemDataSource(this.itemSubject.asObservable());
  }
}

export class InvoiceItemDataSource extends DataSource<any> {
  constructor(private data: Observable<InvoiceItem[]>) {
    super();
  }

  connect(): Observable<InvoiceItem[]> {
    return this.data;
  }

  disconnect() {}
}

answered Jul 27, 2017 at 13:47

Will Howell

3,7252 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

agriboz Over a year ago

thank you for the answer. I am gonna deep dive into your answer now.

Collectives™ on Stack Overflow

Angular Material2 Table

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related