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

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?

https://stackoverflow.com/questions/67238929/get-data-from-chrome-storage-to-show-it-in-an-angular-component April 24, 2021 at 10:54AM