Mat-Table from angular materials not displaying data from firebase

Issue

I'm using Angular, NgRedux and firebase (real time database). I'm trying to display my fetched data into a mat-table from Angular/material. I can see the data in the console, but not in the table. I can only display my local data in the table as you can see in my events.component.html temple down bellow.

I'm quite new with Angular. Any help will be highly appreciated.

here is my events.component.ts file

import { NgRedux } from '@angular-redux/store';
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { Event } from '../entities/Event';
import { EventeActions } from '../store/actions/EventAcitons';
import { AppState } from '../store/Store';


@Component({
  selector: 'app-events',
  templateUrl: './events.component.html',
  styleUrls: ['./events.component.scss']
})
export class EventsComponent implements OnInit{
  public events: Event[];

  private availableEvents: Event[] = [
    { 
      event: 'Picnic', 
      date: '12/02/2021', 
      location: 'Rådhusstrædet', 
      status: 'published' 
    },
    { 
      event: 'Surfing', 
      date: '11/04/2021', 
      location: 'København V', 
      status : 'draft' 
    },
  ];

  displayedColums = ['event', 'date', 'location', 'status'];
  dataSource = new MatTableDataSource<Event>();

  getAvailableEvents() {
    return this.availableEvents.slice();
  }

  constructor(
    private router: Router,
    private ngRedux: NgRedux<AppState>,
    private eventActions: EventeActions
    ) { }

  ngOnInit(): void {
    this.eventActions.readEvent();

    //  this.dataSource.data = this.getAvailableEvents();

    this.ngRedux.select(state => state.events).subscribe(res => {
      this.events = res.events;
    })

    
  }

  editPost(id: any) {
    this.router.navigate(['neweditevent', {myId: id}])
  }

}

and here is my events.component.html file

<h1 class="title">Planned Events</h1>
<div class="flexHeader">
  <button mat-raised-button color="primary" routerLink="/neweditevent" id="newEditBtn">New Event</button>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  
    <ng-container matColumnDef="event">
      <th mat-header-cell *matHeaderCellDef> Event </th>
      <td mat-cell *matCellDef="let element"> {{element.event}} </td>
    </ng-container>
  
    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef> Date </th>
      <td mat-cell *matCellDef="let element"> {{element.date | date}} </td>
    </ng-container>
  
    <ng-container matColumnDef="location">
      <th mat-header-cell *matHeaderCellDef> Location </th>
      <td mat-cell *matCellDef="let element"> {{element.location}} </td>
    </ng-container>
  
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef> Status </th>
      <td mat-cell *matCellDef="let element"> {{element.status}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColums"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColums;"></tr>
  </table>

Thank you in advance...

Solution

Try something like this

ngOnInit(): void {
 this.eventActions.readEvent();

 //  this.dataSource.data = this.getAvailableEvents();

 this.ngRedux.select(state => state.events).subscribe(res => {
   this.events = res.events;
   this.dataSource.data = this.events;
 })
}

Answered By - Brian Stanley