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

Add main info component with material theme screenshot to material landing page

Browse source
This commit is contained in:
eugene-sinitsyn 2020-03-12 15:27:41 +03:00
parent af6ba64edf
commit c8b64aa005
4 changed files with 26 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/app/pages/home/main-info-section/main-info-section.component.html
View file

@ -5,7 +5,7 @@
<img *ngIf="breakpoint.width >= breakpoints.md"
class="main-img"
defaultImage="assets/img/default.png"
lazyLoad="assets/img/ngx-admin.png"/>
[lazyLoad]="imageUrl"/>
</a>
</div>
<div class="main-inf">

34
docs/app/pages/home/main-info-section/main-info-section.component.ts
View file

@ -4,7 +4,8 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Component, OnDestroy } from '@angular/core';
import { Component, OnDestroy, Input, OnInit } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
@ -14,24 +15,31 @@ import { takeWhile } from 'rxjs/operators';
styleUrls: ['./main-info-section.component.scss'],
})
export class MainInfoSectionComponent implements OnDestroy {
private alive = true;
breakpoint: NbMediaBreakpoint;
breakpoints: any;
constructor(private themeService: NbThemeService,
private breakpointService: NbMediaBreakpointsService) {
this.breakpoints = this.breakpointService.getBreakpointsMap();
this.themeService.onMediaQueryChange()
constructor(themeService: NbThemeService, breakpointService: NbMediaBreakpointsService) {
this.breakpoints = breakpointService.getBreakpointsMap();
themeService.onMediaQueryChange()
.pipe(takeWhile(() => this.alive))
.subscribe(([oldValue, newValue]) => {
this.breakpoint = newValue;
});
}
ngOnDestroy() {
private alive = true;
public readonly breakpoints: any;
public breakpoint: NbMediaBreakpoint;
public forMaterialTheme: boolean = false;
@Input() public set material(value: any) {
this.forMaterialTheme = coerceBooleanProperty(value);
}
public get imageUrl(): string {
return this.forMaterialTheme
? 'assets/img/ngx-admin-material.png'
: '/assets/img/ngx-admin.png';
}
public ngOnDestroy() {
this.alive = false;
}
}