File
Metadata
| selector |
ngx-security-cameras |
| styleUrls |
security-cameras.component.scss |
| templateUrl |
./security-cameras.component.html |
Methods
|
selectCamera
|
selectCamera(camera: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| camera |
any
|
no
|
|
|
cameras
|
cameras: any[]
|
Type : any[]
|
Default value : [{
title: 'Camera #1',
source: 'assets/images/camera1.jpg',
}, {
title: 'Camera #2',
source: 'assets/images/camera2.jpg',
}, {
title: 'Camera #3',
source: 'assets/images/camera3.jpg',
}, {
title: 'Camera #4',
source: 'assets/images/camera4.jpg',
}]
|
|
|
|
isSingleView
|
isSingleView:
|
Default value : false
|
|
|
|
selectedCamera
|
selectedCamera: any
|
Type : any
|
Default value : this.cameras[0]
|
|
|
|
userMenu
|
userMenu: []
|
Type : []
|
Default value : [{
title: 'پروفایل',
}, {
title: 'خروج',
}]
|
|
|
import { Component } from '@angular/core';
@Component({
selector: 'ngx-security-cameras',
styleUrls: ['./security-cameras.component.scss'],
templateUrl: './security-cameras.component.html',
})
export class SecurityCamerasComponent {
cameras: any[] = [{
title: 'Camera #1',
source: 'assets/images/camera1.jpg',
}, {
title: 'Camera #2',
source: 'assets/images/camera2.jpg',
}, {
title: 'Camera #3',
source: 'assets/images/camera3.jpg',
}, {
title: 'Camera #4',
source: 'assets/images/camera4.jpg',
}];
selectedCamera: any = this.cameras[0];
userMenu = [{
title: 'پروفایل',
}, {
title: 'خروج',
}];
isSingleView = false;
selectCamera(camera: any) {
this.selectedCamera = camera;
this.isSingleView = true;
}
}
<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="nb-square"></i>
</a>
<a [class.active]="!isSingleView" (click)="isSingleView = false">
<i class="nb-grid-a"></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 col-sm-6" *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-outline"></i><span>Pause</span>
</nb-action>
<nb-action>
<i class="nb-list"></i><span>Logs</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>
Legend
Html element with directive