diff --git a/docs/app/@theme/components/footer/footer.component.html b/docs/app/@theme/components/footer/footer.component.html
index c728731b..eb5c7036 100644
--- a/docs/app/@theme/components/footer/footer.component.html
+++ b/docs/app/@theme/components/footer/footer.component.html
@@ -36,7 +36,7 @@
- © 2015-2018 Akveo LLC
+ © 2015-{{currentYear}} Akveo LLC
Documentation licensed under CC BY 4.0.
diff --git a/docs/app/@theme/components/footer/footer.component.ts b/docs/app/@theme/components/footer/footer.component.ts
index 54985d21..16c0a606 100644
--- a/docs/app/@theme/components/footer/footer.component.ts
+++ b/docs/app/@theme/components/footer/footer.component.ts
@@ -12,4 +12,7 @@ import { Component } from '@angular/core';
templateUrl: './footer.component.html',
})
export class NgxLandingFooterComponent {
+ get currentYear() {
+ return new Date().getFullYear();
+ }
}
diff --git a/docs/app/app.module.ts b/docs/app/app.module.ts
index 00b842bb..19521b7b 100644
--- a/docs/app/app.module.ts
+++ b/docs/app/app.module.ts
@@ -18,6 +18,7 @@ import { LandingSharedModule } from './shared/landing-shared.module';
import { DOCS, STRUCTURE } from './app.options';
const docs = require('../output.json');
import { structure } from '../structure';
+import {MetadataService} from '../../src/app/@core/utils/metadata.service';
@NgModule({
declarations: [
@@ -36,6 +37,7 @@ import { structure } from '../structure';
bootstrap: [AppComponent],
providers: [
Title,
+ MetadataService,
{ provide: STRUCTURE, useValue: structure },
{ provide: DOCS, useValue: docs },
],
diff --git a/docs/app/pages/docs/landing-docs.component.ts b/docs/app/pages/docs/landing-docs.component.ts
index 14bf0bce..b2acaf6c 100644
--- a/docs/app/pages/docs/landing-docs.component.ts
+++ b/docs/app/pages/docs/landing-docs.component.ts
@@ -4,18 +4,18 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
-import { Component, OnDestroy } from '@angular/core';
-import { Router } from '@angular/router';
-import { takeWhile, withLatestFrom, map } from 'rxjs/operators';
+import {Component, OnDestroy} from '@angular/core';
+import {Router} from '@angular/router';
+import {map, takeWhile, withLatestFrom} from 'rxjs/operators';
import {
- NbThemeService,
+ NbMediaBreakpoint,
NbMenuItem,
NbSidebarService,
- NbMediaBreakpoint,
-} from '@nebular/theme';
+ NbThemeService} from '@nebular/theme';
-import { NgxMenuService } from '../../@theme/services/menu.service';
-import { NgxPaginationService } from '../../@theme/services/pagination.service';
+import {NgxMenuService} from '../../@theme/services/menu.service';
+import {NgxPaginationService} from '../../@theme/services/pagination.service';
+import {MetadataService} from '../../../../src/app/@core/utils/metadata.service';
@Component({
selector: 'ngx-landing-docs',
@@ -34,7 +34,12 @@ export class LandingDocsComponent implements OnDestroy {
private router: Router,
private themeService: NbThemeService,
private sidebarService: NbSidebarService,
- private paginationService: NgxPaginationService) {
+ private paginationService: NgxPaginationService,
+ private metadataService: MetadataService) {
+
+ this.metadataService.updateDescription('Free and Open Source ngx-admin to bootstrap the development of ' +
+ 'your product or to learn Angular. Over 40+ Angular Components and 60+ Usage Examples.');
+ this.metadataService.updateTitle('A front-end admin dashboard on Angular 9+, Bootstrap 4+ and Nebular.');
this.themeService.changeTheme('docs-page');
this.paginationService.setPaginationItems('/docs');
diff --git a/docs/app/pages/docs/page/ngx-admin-landing-page.component.ts b/docs/app/pages/docs/page/ngx-admin-landing-page.component.ts
index 6a993338..63076545 100644
--- a/docs/app/pages/docs/page/ngx-admin-landing-page.component.ts
+++ b/docs/app/pages/docs/page/ngx-admin-landing-page.component.ts
@@ -6,7 +6,6 @@
import { Component, Inject, NgZone, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
-import { Title } from '@angular/platform-browser';
import {
filter,
map,
@@ -21,6 +20,7 @@ import { fromEvent } from 'rxjs';
import { NgxStructureService } from '../../../@theme/services/structure.service';
import { NgxTocStateService } from '../../../@theme/services/toc-state.service';
+import {MetadataService} from '../../../../../src/app/@core/utils/metadata.service';
@Component({
selector: 'ngx-admin-landing-page',
@@ -38,7 +38,7 @@ export class NgxAdminLandingPageComponent implements OnDestroy, OnInit {
private activatedRoute: ActivatedRoute,
private structureService: NgxStructureService,
private tocState: NgxTocStateService,
- private titleService: Title) {
+ private metaDataService: MetadataService) {
}
get showSettings() {
@@ -63,7 +63,8 @@ export class NgxAdminLandingPageComponent implements OnDestroy, OnInit {
}),
filter(item => item),
tap((item: any) => {
- this.titleService.setTitle(`Nebular - ${item.name}`);
+ this.metaDataService.updateTitle(`Nebular - ${item.name}`);
+ this.metaDataService.updateDescription(item.description);
}),
publishReplay(),
refCount(),
diff --git a/docs/app/pages/home/landing-home.component.ts b/docs/app/pages/home/landing-home.component.ts
index 91f69883..99bf2957 100644
--- a/docs/app/pages/home/landing-home.component.ts
+++ b/docs/app/pages/home/landing-home.component.ts
@@ -6,6 +6,7 @@
import { Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
+import {MetadataService} from '../../../../src/app/@core/utils/metadata.service';
@Component({
selector: 'ngx-landing-home',
@@ -13,8 +14,10 @@ import { NbThemeService } from '@nebular/theme';
styleUrls: ['./landing-home.component.scss'],
})
export class LandingHomeComponent {
-
- constructor(private themeService: NbThemeService) {
+ constructor(private themeService: NbThemeService, private metadataService: MetadataService) {
+ this.metadataService.updateDescription('Save more than $33,000 using ngx-admin for personal and commercial' +
+ ' use. The dashboard is based on Angular 9+ and Bootstrap 4+. Completely FREE and MIT licensed.');
+ this.metadataService.updateTitle('Ngx-admin - most popular admin dashboard on Angular 9+ and Nebular.');
this.themeService.changeTheme('ngx-landing');
}
}
diff --git a/docs/app/pages/home/material-landing/material-landing.component.html b/docs/app/pages/home/material-landing/material-landing.component.html
index 9eebd708..5f9a2287 100644
--- a/docs/app/pages/home/material-landing/material-landing.component.html
+++ b/docs/app/pages/home/material-landing/material-landing.component.html
@@ -1,6 +1,8 @@
-
+
+
+
diff --git a/docs/app/pages/home/material-landing/material-landing.component.ts b/docs/app/pages/home/material-landing/material-landing.component.ts
index fc0980bf..8d44819f 100644
--- a/docs/app/pages/home/material-landing/material-landing.component.ts
+++ b/docs/app/pages/home/material-landing/material-landing.component.ts
@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
+import {MetadataService} from '../../../../../src/app/@core/utils/metadata.service';
@Component({
selector: 'ngx-material-landing',
@@ -10,7 +11,10 @@ import { NbThemeService } from '@nebular/theme';
],
})
export class MaterialLandingComponent {
- constructor(private themeService: NbThemeService) {
+ constructor(private themeService: NbThemeService, private metadataService: MetadataService) {
+ this.metadataService.updateDescription('Ngx-admin material works perfectly with Angular Material and Nebular.' +
+ ' Over 40+ Angular Components and 60+ Usage Examples.Take the best from both!');
+ this.metadataService.updateTitle('Ngx-admin material dashboard template based on Angular 9+ and Bootstrap 4+');
this.themeService.changeTheme('ngx-landing-material');
}
}
diff --git a/docs/assets/img/logo.jpg b/docs/assets/img/logo.jpg
new file mode 100644
index 00000000..e6b5c3af
Binary files /dev/null and b/docs/assets/img/logo.jpg differ
diff --git a/docs/index.html b/docs/index.html
index a27ad70a..4b626b8b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,10 +2,11 @@
- ngx-admin: Free Open Source admin dashboard template based on Angular, Bootstrap
+ The most popular admin dashboard based on Angular 9+ and Nebular.
-
+
+
diff --git a/docs/structure.ts b/docs/structure.ts
index 7f22939f..5fc31f1d 100644
--- a/docs/structure.ts
+++ b/docs/structure.ts
@@ -17,6 +17,7 @@ export const structure = [
{
type: 'page',
name: 'Installation Guidelines',
+ description: 'A guideline to install ngx-admin on your machine: backend integration, tools you need to be installed.',
children: [
{
type: 'block',
@@ -28,6 +29,7 @@ export const structure = [
{
type: 'page',
name: 'Server deployment',
+ description: 'How to set up your web-server to better serve the application on Angular.',
children: [
{
type: 'block',
@@ -45,6 +47,7 @@ export const structure = [
{
type: 'page',
name: 'Theme System',
+ description: 'Theme System in is a set of rules we put into how SCSS files and variables are organized. Theme Map | Component Variables | Built-in-Themes',
children: [
{
type: 'block',
@@ -56,6 +59,7 @@ export const structure = [
{
type: 'page',
name: 'Change Theme',
+ description: 'How to change the current theme in ngx-admin. Switch from Cosmic to Default. Runtime Theme Switch.',
children: [
{
type: 'block',
@@ -67,6 +71,7 @@ export const structure = [
{
type: 'page',
name: 'Backend integration',
+ description: 'Approaches of integration of ngx-admin application with backend API. Integration with JSON REST server, angular-cli/webpack-dev-server setup.',
children: [
{
type: 'block',
diff --git a/src/app/@core/core.module.ts b/src/app/@core/core.module.ts
index ca8160e8..8563613a 100644
--- a/src/app/@core/core.module.ts
+++ b/src/app/@core/core.module.ts
@@ -57,6 +57,7 @@ import { MockDataModule } from './mock/mock-data.module';
import { AbService } from './utils/ab.service';
import {CurrentThemeService} from './utils/theme.service';
import {ThemeGuard} from './guard/theme.guard';
+import {MetadataService} from './utils/metadata.service';
const socialLinks = [
{
@@ -153,6 +154,7 @@ export const NB_CORE_PROVIDERS = [
LayoutService,
PlayerService,
SeoService,
+ MetadataService,
StateService,
AbService,
CurrentThemeService,
diff --git a/src/app/@core/utils/metadata.service.ts b/src/app/@core/utils/metadata.service.ts
new file mode 100644
index 00000000..7e13a686
--- /dev/null
+++ b/src/app/@core/utils/metadata.service.ts
@@ -0,0 +1,21 @@
+import {Injectable} from '@angular/core';
+import {Meta, Title} from '@angular/platform-browser';
+
+@Injectable()
+export class MetadataService {
+
+ constructor(
+ private title: Title,
+ private meta: Meta,
+ ) {}
+
+ updateTitle(title: string) {
+ this.title.setTitle(title);
+ }
+
+ updateDescription(desc: string) {
+ this.meta.updateTag({ name: 'description', content: desc });
+ }
+
+
+}
diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts
index 5ed736e0..bb23df09 100644
--- a/src/app/pages/dashboard/dashboard.component.ts
+++ b/src/app/pages/dashboard/dashboard.component.ts
@@ -3,6 +3,7 @@ import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators' ;
import { SolarData } from '../../@core/data/solar';
import { AbService } from '../../@core/utils/ab.service';
+import {MetadataService} from '../../@core/utils/metadata.service';
interface CardSettings {
title: string;
@@ -85,6 +86,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
};
constructor(private themeService: NbThemeService,
+ private metaDataService: MetadataService,
private solarService: SolarData,
private abService: AbService) {
this.themeService.getJsTheme()
@@ -101,6 +103,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
}
ngOnInit() {
+ this.metaDataService.updateTitle('Ngx-admin IoT dashboard on Angular 9+ and Nebular.');
+
this.abService.onAbEvent(AbService.VARIANT_HIDE_CALL_ACTION)
.pipe(takeWhile(() => this.alive))
.subscribe(() => this.showCallAction = false );
diff --git a/src/app/pages/e-commerce/e-commerce.component.ts b/src/app/pages/e-commerce/e-commerce.component.ts
index 228949cb..360d5c8b 100644
--- a/src/app/pages/e-commerce/e-commerce.component.ts
+++ b/src/app/pages/e-commerce/e-commerce.component.ts
@@ -1,6 +1,7 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { takeWhile } from 'rxjs/operators';
import { AbService } from '../../@core/utils/ab.service';
+import {MetadataService} from '../../@core/utils/metadata.service';
@Component({
selector: 'ngx-ecommerce',
@@ -11,9 +12,12 @@ export class ECommerceComponent implements OnInit, OnDestroy {
private alive = true;
showCallAction = true;
- constructor (private abService: AbService) {}
+ constructor (private abService: AbService,
+ private metaDataService: MetadataService) {}
ngOnInit() {
+ this.metaDataService.updateTitle('Ngx-admin e-commerce dashboard on Angular 9+ and Nebular.');
+
this.abService.onAbEvent(AbService.VARIANT_HIDE_CALL_ACTION)
.pipe(takeWhile(() => this.alive))
.subscribe(() => this.showCallAction = false );
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index 856a59e5..6faf388b 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -1,18 +1,27 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
-import { MENU_ITEMS } from './pages-menu';
+import {MENU_ITEMS} from './pages-menu';
+import {NbMenuItem, NbMenuService} from '@nebular/theme';
+import {takeUntil} from 'rxjs/operators';
+import {Subject} from 'rxjs';
+import {MetadataService} from '../@core/utils/metadata.service';
@Component({
selector: 'ngx-pages',
styleUrls: ['pages.component.scss'],
template: `
-
-
-
-
+
+
+
+
`,
})
-export class PagesComponent implements OnInit {
+export class PagesComponent implements OnInit, OnDestroy {
+ destroy$: Subject = new Subject();
+
+ constructor(private menuService: NbMenuService,
+ private metaDataService: MetadataService) {
+ }
menu = MENU_ITEMS;
@@ -20,5 +29,19 @@ export class PagesComponent implements OnInit {
if (window['dataLayer']) {
window['dataLayer'].push({'event': 'optimize.activate'});
}
+
+ this.menuService
+ .onItemSelect()
+ .pipe(takeUntil(this.destroy$))
+ .subscribe((data: { tag: string; item: NbMenuItem }) => {
+ if (data.item.title !== 'E-commerce' && data.item.title !== 'IoT Dashboard')
+ this.metaDataService.updateTitle(`Ngx-admin dashboard by Akveo| ${data.item.title}`);
+ });
}
+
+ ngOnDestroy() {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+
}
diff --git a/src/assets/images/logo.jpg b/src/assets/images/logo.jpg
new file mode 100644
index 00000000..e6b5c3af
Binary files /dev/null and b/src/assets/images/logo.jpg differ
diff --git a/src/index.html b/src/index.html
index 697569fa..55d75094 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,9 +2,11 @@
- ngx-admin - Angular 9, Bootstrap 4 Admin dashboard template
-
-
+
+ Ngx-admin e-commerce dashboard on Angular 9+ and Nebular.
+
+
+