Designer and Viewer Modes

// ...
import { DxDashboardControlModule } from 'devexpress-dashboard-angular';
import { DxButtonModule } from 'devextreme-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // ...
    DxDashboardControlModule,
    DxButtonModule
  ],
  // ...
})
export class AppModule { }

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = "dashboard-angular-app";
  workingMode: string = "Designer";
  get workingModeText() {
    return "Switch to " + this.toggleMode(this.workingMode);
  }

  changeWorkingMode() {    
    this.workingMode = this.toggleMode(this.workingMode);
  }
  toggleMode(mode) {
    return mode === "Viewer" ? "Designer" : "Viewer";
  }
}

<dx-button
  stylingMode="contained"
  [text]="workingModeText"
  type="normal"
  (onClick)="changeWorkingMode()"
>
</dx-button>
<dx-dashboard-control 
  style="display: block;width:100%;height:800px;" 
  endpoint="https://demos.devexpress.com/services/dashboard/api"
  [workingMode]="workingMode"
>
</dx-dashboard-control>