ngx-admin/src/app/pages/dashboard/security-cameras/security-cameras.component.html

<nb-card size="xlarge">
  <nb-card-header>
    <div class="cameras-card-header">
      <span class="cameras-card-title">Security Cameras</span>
      <span class="cameras-filter">
        <a [class.active]="isSingleView" (click)="isSingleView = true">
          <i class="ion-android-checkbox-blank"></i>
        </a>
        <a [class.active]="!isSingleView" (click)="isSingleView = false">
          <i class="ion-android-apps"></i>
        </a>
      </span>
    </div>
  </nb-card-header>
  <nb-card-body>
    <div class="cameras single-view" *ngIf="isSingleView">
      <div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'">
        <span>{{ selectedCamera.title }}</span>
      </div>
    </div>
    <div class="cameras" *ngIf="!isSingleView">
      <div class="camera" *ngFor="let camera of cameras" [style.background-image]="'url(' + camera.source + ')'"
           (click)="selectCamera(camera)">
        <span>{{ camera.title }}</span>
      </div>
    </div>
  </nb-card-body>
  <nb-card-footer>
    <nb-actions size="medium" fullWidth>
      <nb-action>
        <i class="nb-pause"></i><span>Pause</span>
      </nb-action>
      <nb-action>
        <i class="nb-list"></i><span>Log View</span>
      </nb-action>
      <nb-action>
        <i class="nb-search"></i><span>Search</span>
      </nb-action>
      <nb-action>
        <i class="nb-gear"></i><span>Setup</span>
      </nb-action>
    </nb-actions>
  </nb-card-footer>
</nb-card>