Reactive Angular Material Data Table

Reactive Angular Material Data Table

By : Max Debongz Khoza
Date : November 21 2020, 04:01 AM
like below fixes the issue I figured out how to setup a table for my requirements. The main change is that I removed the Observable which fetches the data from the TableDataSource and introduced a DataService:
code :
export class DataService {
  //the @Select is from ngxs but can be anything returning an Observable 
  @Select(TokenTableState.getTokenTableItems) private tokenTableItems$: Observable<TokenTableViewItem[]>;
  private initValue$: BehaviorSubject<TokenTableViewItem[]> = new BehaviorSubject<TokenTableViewItem[]>([]);

  getAllItems(): Observable<TokenTableViewItem[]> {
    const sources = [this.tokenTableItems$, this.initValue$];
    return merge(...sources);
private loadData(): any {
    this._dataService = new DataService();
    this.dataSource = new TokenTableDataSource(
    fromEvent(this.filter.nativeElement, 'keyup').subscribe(() => {
      if (!this.dataSource) {
      this.dataSource.filter = this.filter.nativeElement.value;
const dataMutations = [
this._internalService.getAllItems().subscribe(data => {
return merge(...dataMutations).pipe(
  map(() => {
    // Filter data
    this.filteredData = this._dataChange.value
      .filter((item: TokenTableViewItem) => {
        const searchStr = (item.symbol + item.name).toLowerCase();
        return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
    // Sort filtered data
    const sortedData = this.getSortedData(this.filteredData.slice());

    // Grab the page's slice of the filtered sorted data.
    this.renderedData = this.getPagedData(sortedData);
    return this.renderedData;
  public _internalService: DataService,
  public _paginator: MatPaginator,
  public _sort: MatSort
) {
  this._filterChange.subscribe(() => (this._paginator.pageIndex = 0));
<mat-paginator #paginator
pageSizeOptions = [5, 10, 20, 40];
pageSize = this.pageSizeOptions[0];
pageIndex = 0;

Share : facebook icon twitter icon
How to use Reactive FormGroup with Angular Material

How to use Reactive FormGroup with Angular Material

By : None
Date : March 29 2020, 07:55 AM
This might help you I'm using reactive form group with Angular Material design. However, I'm getting an error: , There are two options you have.
Option 1
code :
*ngIf="fieldName && fieldName.invalid"
Angular Material: Reactive vs Template?

Angular Material: Reactive vs Template?

By : Pavel
Date : March 29 2020, 07:55 AM
I hope this helps . If you haven't checked this out give it a go https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
I usually work with template deriven forms and have no issue with them, however sometimes when you need more sophisticated validations it might be a bit cumbersome to use this approach. But what I love about the template deriven forms is that you just create the object (model) and feed it to [(ngModel)] and you have the beautiful two ways data binding. All you need to do is just fetch the data and deserialize it into your model and there you have the data in the form. if you need just read functionality you can simply use labels instead of inputs and disabling them. I hope the following example will help a bit to give you an idea how it looks.
code :
<form #userForm="ngForm">
      <mat-label *ngIf="someconditionToShow">Name:</mat-label>
      <mat-error>Name is required</mat-error>
      <input matInput type="text" placeholder="Please enter your name" name="nameInput"
        [(ngModel)]="model.Name" [disabled]="conditionToDisable" required>
  <button type="button" disabled="userForm.invalid"></button>
Adding Angular material Menu to each row in Angular Material Table using more button at the end of a sticky table

Adding Angular material Menu to each row in Angular Material Table using more button at the end of a sticky table

By : user2608190
Date : March 29 2020, 07:55 AM
To fix this issue I have a sticky table that I want to add more_vert button toggle to but I'm unable to achieve this because I don't know how to distinguish each drop down menu list from each other. , You are referencing wrong menu.
code :
Weird radio buttons display for Angular Reactive Forms with Material Table

Weird radio buttons display for Angular Reactive Forms with Material Table

By : Neli Dimitrova
Date : March 29 2020, 07:55 AM
With these it helps Remove the name attribute. Or you can use dynamic names like name="radio{{i}}".
code :
<h1>{{ name }}</h1>
<form name="testForm" [formGroup]="testForm" (ngSubmit)="onSubmit()" novalidate>
  <div formArrayName="radioButtons">
    <table mat-table [dataSource]="testForm.controls['radioButtons'].controls">        
      <ng-container matColumnDef="radioButtons">
        <th mat-header-cell *matHeaderCellDef class="radio">Radio Buttons</th>
        <td mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i" class="radio">            
          <mat-radio-group formControlName="radio" required disableOptionCentering>
            <mat-radio-button value="Y">Yes</mat-radio-button>
            <mat-radio-button value="N">No</mat-radio-button>
      <tr mat-header-row *matHeaderRowDef="classGridDisplayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: classGridDisplayedColumns;"></tr>
  <pre>{{ testForm.value | json }}</pre>
Angular 5 + Angular Material Select + Reactive Forms == No initial options displayed

Angular 5 + Angular Material Select + Reactive Forms == No initial options displayed

By : Yadanar Aung
Date : March 29 2020, 07:55 AM
it should still fix some issue As the title says, I have a reactive form that has multiple contained within. On initial form load, the initial option is not displayed even though form.value shows it is. , A few things
code :
<mat-form-field [formGroup]='editJobInfoForm' fxFlex>
  <mat-label>Job Type</mat-label>
  <mat-select formControlName="JobType" placeholder="Job Type">
    <mat-option *ngFor="let jobType of jobTypes" [value]="jobType.value">
      {{ jobType.DisplayDesc }}
constructor(private fb: FormBuilder) {


        // Construct forms

createForm() {
    this.editJobInfoForm = this.fb.group({
        JobType: this.jobTypes[this.currentJobData.JobType].DisplayDesc,
Related Posts Related Posts :
  • dropdown flexibility?
  • How "d3.translateExtent" coordinate works?
  • Get the element of an array that has an index given by a variable in JavaScript
  • Replace(), replacing a value not specified
  • javascript native equivalent to .each & .attr
  • Fabric getPointer method not working in Firefox
  • JS scripts not working for divs loaded with jQuery's .load()
  • Use xhr code error on switch/case (javascript)
  • ParseFloat return string instead of number in Javascript
  • How to add a custom script into React app component?
  • Show data while it's being sent to the backend
  • selecting a specific class with .parents()?
  • Get value of a selected option in an label with Javascript
  • How Do I get an HOC wrapped component function from enzyme instance when mounting?
  • i want to update the flashdata on every ajax call
  • Cannot find a tag with JSsoup even though the tag exists in Node JS
  • Exporting the RouterModule?
  • Remove the default checked value in radio button and replace it with the another radio button that is click
  • Switch to test for id and perform action based on class
  • JavaScript Random Number Generation: Unique 500 Integers in Space 10^6: Getting Collisions
  • Display files in directory using PHP and jQuery
  • Knockout JS: adding forms in foreach bindings
  • HTML5 Canvas positioning mouse clicking broken
  • JQuery on change fired only after second change of select box
  • Unable to limit WebRTC P2P Multi-participant Receiving Bandwidth
  • What is the RegEx to just return the last part of the URL
  • State Remains Undefined in React
  • removing content on website before a screen reader can read it with either JavaScript or CSS...?
  • on 'click' firing before click
  • Manipulation of an array sent by ajax to a php file, within a function of another file
  • How to use plunker or jsfiddle to run angular2 code
  • JavaScript lexical environments as objects
  • Iteratively position spheres with DOM pixels using three.js and React
  • React trying to access file at a wrong path
  • AES encryption in JS equivalent of C#
  • Filter an Array based off user input string and menu dropdown items
  • Constantly read local file with JS?
  • React navbar handler with theme
  • Show changes to HTML5 canvas immediately
  • Tooltip Stays Hidden In D3 Treemap
  • Backbone - What is the best way to listen to 2 models?
  • formatting an array of objects output
  • Bind input value to specific value in object
  • Animation doesnt work when onClick event occurs (react.js)
  • Consume enum from ambient TypeScript module using @babel/preset-typescript?
  • Changing order of React components only triggers re-render after second click
  • Track the total time the HTMLAudio was playing
  • Call javascript function in PHP file and load html file after?
  • Theme Development: JavaScript not working when linked from functions.php
  • Add attributes to multiple <td> in datatables
  • Progressive loading codesnip not quite understood
  • How to format default date in javascript?
  • Caesar cipher only gets first value right
  • innerText not showing after setting it straight after creating the element
  • How to use HTML template tag with jQuery?
  • Showing v-menue's selected option in another part of the application. Vuetify
  • How can I find and return my div element with rails and javascript?
  • The right way to use Ajax to Update a Single field in a specific Object
  • Hhow to create a react element and apply a javascript method to it
  • Change src of parent window iframe
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org