I have a list / Tiles view for my project list. In which initially i am showing the default view to the user as Tiles view (Which is the default view when user comes into our dashboard). I mean i am giving the 2 views of the same data. But what i need is i need to give the user if he dont this tiles view and instead he needs list view then that view should be stored when he navigates from ona page to other or even if he log out from the system also what he last selected should be the view only. For that i have written this code. See below.

list.component.htmml

<mat-button-toggle-group #group="matButtonToggleGroup" [(value)]="View" appearance="legacy" class="tile-position">
                <mat-button-toggle value="Tiles" (click)="openTilesView();" appearance="legacy">
                    <i class="fa fa-th" aria-hidden="true"></i>
                    
                </mat-button-toggle>
                <mat-button-toggle value="List" (click)="openListView();" appearance="legacy">
                    <i class="fa fa-list" aria-hidden="true"></i> 
                </mat-button-toggle>

list.component.ts

    showListView: boolean = false;
      showTilesView: boolean = true;
      View = 'Tiles';
      hideAllGen: boolean = true;

getprojectDetails(data) {
    this.projects = data;
    this.dataSource = new MatTableDataSource(data);
    this.dataSource.sort = this.sort;
  }

  openListView() {
    this.keyword = '';
    this.hideAllGen = true;
    this.showListView = true;
    this.showTilesView = false;
    this.View = 'List';
}

openTilesView() {
  this.keyword = '';
    this.View = 'Tiles';
    this.showListView = false;
    this.showTilesView = true;
}