Angular Blog Posts

Using Angular material MatTableDataSource in combination with FormArray

Expected Behaviour: When user clicks on add data, table with empty column need to be displayed and want form control for newly added data.
For this behaviour, I used MatTableDataSource class and FormArray class and MatTable.
MatDataSource is a material class which accepts client side data array and includes native support of filtering, pagination
and sorting.  Data source provides stream, it bears the responsibility of triggering table updates.
FormArray is an alternative to FormGroup for managing any number of unnamed controls.
The mat-table provides a Material Design styled data-table that can be used to display rows of data.
I defined passengerData Array as type of PassengerDetails and used this array as data source for mat table.

2 Likes 9831 Views
Exchange data between components using service

Expected Behaviour: using Service to exchange data between components.
Observables open up a continuous channel of communication in which multiple values of data can be emitted over time.
BehaviourSubject holds the data that needs to shared with other components. I want to define filterType behaviour subject as boolean and set default value null to filterType. Components subscribe to filterObservable which will simply return BehaviourSubject value.
Declare  function to set value to BehaviourSubject.
service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs'

0 Likes 193 Views