Get data from chrome storage to show it in an Angular component

Question

I want to get a list from chrome storage and show it in my angular component, currently I'm using the function like this

  myList: any[];
  dataSource: MatTableDataSource<any>;
  @ViewChild(MatTable, {static: true}) table: MatTable<any>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  constructor(private fb: FormBuilder,
              private globalsService: GlobalsService,
              private snackbar: MatSnackBar) {
    chrome.storage.sync.get(['mylist'], this.getLists);
  }

  getLists(value: any): any{
    this.myList = value.mylist;
    this.dataSource = new MatTableDataSource<any>(this.myList);
  }

The issue is that I'm getting this error: TypeError: Cannot read property 'length' of undefined, in my html file for that component I use the property length for myList to use mat-paginator like this:

  <mat-paginator #paginator [length]="myList.length" [pageSize]="5" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>

Apparently myList is always returning undefined, but it's not returning undefined when I do a console.log(value.mylist) inside the getLists function, how could I fix this?

Answer 1

I solved it using Promises:

  myList: any[] = [];
  @ViewChild(MatTable, {static: true}) table: MatTable<any>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  constructor(private fb: FormBuilder,
              private globalsService: GlobalsService,
              private snackbar: MatSnackBar) {
    getLists().then((value) => {
      this.myList = value.myList;
      this.dataSource = new MatTableDataSource<any>(this.myList);
    });
  }

getLists = (): any => {
  return new Promise((resolve, reject) => {
    chrome.storage.sync.get(['myList'], (value) => {
      if (value !== undefined){
        resolve(value);
      }
      else {
        reject();
      }
    });
  });
};

Answer 2

Define dataSource as below.

dataSource: MatTableDataSource<any> = new MatTableDataSource([]) ;

Assign dataSource values as below.

this.dataSource.data = new MatTableDataSource<any>(this.myList);

Add a property check for length using ? in the template as well

  <mat-paginator #paginator [length]="myList?.length" [pageSize]="5" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>

Read more here - https://developer.chrome.com/docs/extensions/reference/storage/#usage