Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(demo): unsubscribe when destroy component

Browse source
This commit is contained in:
KostyaDanovsky 2017-09-20 14:31:06 +03:00
parent 549be765f0
commit cceabef8eb
12 changed files with 96 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app/pages/dashboard/contacts/contacts.component.ts
View file

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
import { UserService } from '../../../@core/data/users.service';
@ -8,19 +8,20 @@ import { UserService } from '../../../@core/data/users.service';
styleUrls: ['./contacts.component.scss'],
templateUrl: './contacts.component.html',
})
export class ContactsComponent implements OnInit {
export class ContactsComponent implements OnInit, OnDestroy {
contacts: any[];
recent: any[];
breakpoint: NbMediaBreakpoint;
breakpoints: any;
themeSubscription: any;
constructor(private userService: UserService,
private themeService: NbThemeService,
private breakpointService: NbMediaBreakpointsService) {
this.breakpoints = breakpointService.getBreakpointsMap();
themeService.onMediaQueryChange()
this.themeSubscription = themeService.onMediaQueryChange()
.subscribe(([oldValue, newValue]) => {
this.breakpoint = newValue;
});
@ -51,4 +52,8 @@ export class ContactsComponent implements OnInit {
];
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

12
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
View file

@ -1,4 +1,4 @@
import { AfterViewInit, Component } from '@angular/core';
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
declare const echarts: any;
@ -10,11 +10,11 @@ declare const echarts: any;
<div echarts [options]="option" class="echart"></div>
`,
})
export class ElectricityChartComponent implements AfterViewInit {
export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
option: any;
data: Array<any>;
themeSubscription: any;
constructor(private theme: NbThemeService) {
@ -41,7 +41,7 @@ export class ElectricityChartComponent implements AfterViewInit {
}
ngAfterViewInit(): void {
this.theme.getJsTheme().delay(1).subscribe(config => {
this.themeSubscription = this.theme.getJsTheme().delay(1).subscribe(config => {
const eTheme: any = config.variables.electricity;
this.option = {
@ -184,4 +184,8 @@ export class ElectricityChartComponent implements AfterViewInit {
};
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

11
src/app/pages/dashboard/electricity/electricity.component.ts
View file

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { ElectricityService } from '../../../@core/data/electricity.service';
@ -8,7 +8,7 @@ import { ElectricityService } from '../../../@core/data/electricity.service';
styleUrls: ['./electricity.component.scss'],
templateUrl: './electricity.component.html',
})
export class ElectricityComponent {
export class ElectricityComponent implements OnDestroy {
data: Array<any>;
@ -16,12 +16,17 @@ export class ElectricityComponent {
types = ['week', 'month', 'year'];
currentTheme: string;
themeSubscription: any;
constructor(private eService: ElectricityService, private themeService: NbThemeService) {
this.data = eService.getData();
this.themeService.getJsTheme().subscribe(theme => {
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
this.currentTheme = theme.name;
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

11
src/app/pages/dashboard/kitten/kitten.component.ts
View file

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
@ -6,13 +6,18 @@ import { NbThemeService } from '@nebular/theme';
styleUrls: ['./kitten.component.scss'],
templateUrl: './kitten.component.html',
})
export class KittenComponent {
export class KittenComponent implements OnDestroy {
currentTheme: string;
themeSubscription: any;
constructor(private themeService: NbThemeService) {
this.themeService.getJsTheme().subscribe(theme => {
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
this.currentTheme = theme.name;
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

11
src/app/pages/dashboard/rooms/rooms.component.ts
View file

@ -1,4 +1,4 @@
import { Component, HostBinding } from '@angular/core';
import { Component, HostBinding, OnDestroy } from '@angular/core';
import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
@Component({
@ -12,7 +12,7 @@ import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@n
</nb-card>
`,
})
export class RoomsComponent {
export class RoomsComponent implements OnDestroy {
@HostBinding('class.expanded')
private expanded: boolean;
@ -20,12 +20,13 @@ export class RoomsComponent {
breakpoint: NbMediaBreakpoint;
breakpoints: any;
themeSubscription: any;
constructor(private themeService: NbThemeService,
private breakpointService: NbMediaBreakpointsService) {
this.breakpoints = breakpointService.getBreakpointsMap();
themeService.onMediaQueryChange()
this.themeSubscription = themeService.onMediaQueryChange()
.subscribe(([oldValue, newValue]) => {
this.breakpoint = newValue;
});
@ -56,4 +57,8 @@ export class RoomsComponent {
private isSelected(roomNumber): boolean {
return this.selected === roomNumber;
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

11
src/app/pages/dashboard/solar/solar.component.ts
View file

@ -1,4 +1,4 @@
import { AfterViewInit, Component, Input } from '@angular/core';
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
declare const echarts: any;
@ -20,7 +20,7 @@ declare const echarts: any;
</nb-card>
`,
})
export class SolarComponent implements AfterViewInit {
export class SolarComponent implements AfterViewInit, OnDestroy {
private value: number = 0;
@ -35,12 +35,13 @@ export class SolarComponent implements AfterViewInit {
}
option: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.theme.getJsTheme().delay(1).subscribe(config => {
this.themeSubscription = this.theme.getJsTheme().delay(1).subscribe(config => {
const solarTheme: any = config.variables.solar;
@ -176,4 +177,8 @@ export class SolarComponent implements AfterViewInit {
});
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

11
src/app/pages/dashboard/temperature/temperature.component.ts
View file

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
@ -6,7 +6,7 @@ import { NbThemeService } from '@nebular/theme';
styleUrls: ['./temperature.component.scss'],
templateUrl: './temperature.component.html',
})
export class TemperatureComponent {
export class TemperatureComponent implements OnDestroy {
temperature: number = 24;
temperatureOff: boolean = false;
@ -17,10 +17,15 @@ export class TemperatureComponent {
humidityMode = 'heat';
colors: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
this.colors = config.variables;
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

11
src/app/pages/dashboard/traffic/traffic-chart.component.ts
View file

@ -1,4 +1,4 @@
import { AfterViewInit, Component } from '@angular/core';
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
declare const echarts: any;
@ -12,17 +12,18 @@ const points = [300, 520, 435, 530, 730, 620, 660, 860];
<div echarts [options]="option" class="echart"></div>
`,
})
export class TrafficChartComponent implements AfterViewInit {
export class TrafficChartComponent implements AfterViewInit, OnDestroy {
type: string = 'month';
types = ['week', 'month', 'year'];
option: any = {};
themeSubscription: any;
constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.theme.getJsTheme().delay(1).subscribe(config => {
this.themeSubscription = this.theme.getJsTheme().delay(1).subscribe(config => {
const trafficTheme: any = config.variables.traffic;
@ -142,4 +143,8 @@ export class TrafficChartComponent implements AfterViewInit {
});
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

11
src/app/pages/dashboard/traffic/traffic.component.ts
View file

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
@ -24,14 +24,19 @@ import { NbThemeService } from '@nebular/theme';
</nb-card>
`,
})
export class TrafficComponent {
export class TrafficComponent implements OnDestroy {
type: string = 'month';
types = ['week', 'month', 'year'];
currentTheme: string;
themeSubscription: any;
constructor(private themeService: NbThemeService) {
this.themeService.getJsTheme().subscribe(theme => {
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
this.currentTheme = theme.name;
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

11
src/app/pages/maps/bubble/bubble-map.component.ts
View file

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
@ -13,7 +13,7 @@ import { NbThemeService } from '@nebular/theme';
</nb-card>
`,
})
export class BubbleMapComponent {
export class BubbleMapComponent implements OnDestroy {
latlong: any = {};
mapData: any[];
@ -23,10 +23,11 @@ export class BubbleMapComponent {
bubbleTheme: any;
geoColors: any[];
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.theme.getJsTheme()
this.themeSubscription = this.theme.getJsTheme()
.subscribe(config => {
const colors = config.variables;
@ -525,6 +526,10 @@ export class BubbleMapComponent {
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
private getRandomGeoColor() {
const index = Math.round(Math.random() * this.geoColors.length);
return this.geoColors[index];

11
src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts
View file

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
@ -6,13 +6,14 @@ import { NbThemeService } from '@nebular/theme';
styleUrls: ['./hero-buttons.component.scss'],
templateUrl: './hero-buttons.component.html',
})
export class HeroButtonComponent {
export class HeroButtonComponent implements OnDestroy {
themeName: string = 'default';
settings: Array<any>;
themeSubscription: any;
constructor(private themeService: NbThemeService) {
this.themeService.getJsTheme().subscribe(theme => {
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
this.themeName = theme.name;
this.init(theme.variables);
});
@ -115,4 +116,8 @@ export class HeroButtonComponent {
},
}];
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

11
src/app/pages/ui-features/typography/typography.component.ts
View file

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
@Component({
@ -6,17 +6,22 @@ import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@n
styleUrls: ['./typography.component.scss'],
templateUrl: './typography.component.html',
})
export class TypographyComponent {
export class TypographyComponent implements OnDestroy {
breakpoint: NbMediaBreakpoint;
breakpoints: any;
themeSubscription: any;
constructor(private themeService: NbThemeService,
private breakpointService: NbMediaBreakpointsService) {
this.breakpoints = breakpointService.getBreakpointsMap();
themeService.onMediaQueryChange()
this.themeSubscription = themeService.onMediaQueryChange()
.subscribe(([oldValue, newValue]) => {
this.breakpoint = newValue;
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}