How to save to localStorage without losing default data?

Question

Angular

I have a table and a component that allows you to choose which columns to display and which to hide. And I wanted that when choosing columns, they were saved and were not lost when the page was reloaded.
But I have it set by default so that supposedly not one column is selected. and this results in this error:

Error: Cannot read property 'concat' of null

How to save to localStorage without losing default data?

ngOnInit() {
  this.displayedColumns = [
    { value: "position", displayName: 'Позиция' },
    { value: "name", displayName: 'Имя' }
  ];
  this.displayedColumns = this.displayedCols.map(col => col.value);
  this.displayedColumns = JSON.parse(localStorage.getItem('displayedCols'));
}

onChange() {
  localStorage.setItem('displayedCols', JSON.stringify(this.displayedColumns));
}

Example on Stackblitz .

Answer 1

A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Because onChanges fires when the component's input or output properties have changed. And you don't have them.
Well, in general, the code is not very good.
here