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 7ea6af74..ca07cd61 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 @@ -63,20 +63,9 @@ export class NgxAdminLandingPageComponent implements OnDestroy, OnInit { }), filter(item => item), tap((item: any) => { - switch (item.name) { - case 'Installation Guidelines': - this.metaDataService.updateTitle(`Ngx-admin - Guideline to install.`); - break; - case 'Server deployment': - case 'Theme System': - case 'Change Theme': - case 'Backend integration': - this.metaDataService.updateTitle(`Ngx-admin - ${item.name}`); - break; - default: - this.metaDataService.updateTitle(item.name); - } + this.metaDataService.updateTitle(item.title); this.metaDataService.updateDescription(item.description); + this.metaDataService.updateKeywords(item.keywords); }), publishReplay(), refCount(), diff --git a/docs/app/pages/home/main-info-section/material-admin-main-info/material-info.component.ts b/docs/app/pages/home/main-info-section/material-admin-main-info/material-info.component.ts index 08ad5fdc..917a60c8 100644 --- a/docs/app/pages/home/main-info-section/material-admin-main-info/material-info.component.ts +++ b/docs/app/pages/home/main-info-section/material-admin-main-info/material-info.component.ts @@ -1,9 +1,19 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { MetadataService } from '../../../../../../src/app/@core/utils/metadata.service'; @Component({ selector: 'ngx-material-admin-info', templateUrl: './material-info.component.html', styleUrls: ['./../main-info-section.component.scss'], }) -export class MaterialAdminInfoComponent { +export class MaterialAdminInfoComponent implements OnInit { + + constructor(private metaDataService: MetadataService) {} + + ngOnInit(): void { + this.metaDataService.updateTitle('Ngx-admin material dashboard template based on Angular 9+ and Bootstrap 4+'); + 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.updateKeywords('Ngx-admin material theme, ngx-admin material dashboard, ngx-admin material'); + } } diff --git a/docs/index.html b/docs/index.html index 5881fd30..4be1db41 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,7 +5,7 @@ The most popular admin dashboard based on Angular 9+ and Nebular. - + diff --git a/docs/structure.ts b/docs/structure.ts index 02ba3666..eb172c40 100644 --- a/docs/structure.ts +++ b/docs/structure.ts @@ -6,7 +6,9 @@ export const structure = [ { type: 'page', name: 'What is ngx-admin?', - description: 'Ngx-admin is Angular 9+ Bootstrap 4+ admin dashboard template. Free and Open Source to bootstrap the development of your product or to learn Angular.', + title: 'Ngx-admin - documentation', + description: 'ngx-admin is a front-end admin dashboard template based on Angular 9+, Bootstrap 4+ and Nebular', + keywords: 'Ngx-admin features, Angular 9+ typescript, Bootstrap 4+ & SCSS, ngx-admin documentation', children: [ { type: 'block', @@ -18,7 +20,10 @@ 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.', + title: 'Ngx-admin - Guideline to install.', + description: 'A guideline to install ngx-admin on your machine: backend integration,' + + ' tools you need to be installed.', + keywords: 'Ngx-admin install tools, ngx-admin versions, ngx-admin install.', children: [ { type: 'block', @@ -30,7 +35,9 @@ export const structure = [ { type: 'page', name: 'Server deployment', + title: 'Ngx-admin - Server deployment', description: 'How to set up your web-server to better serve the application on Angular.', + keywords: 'Ngx-admin server, ngx-admin server deployment', children: [ { type: 'block', @@ -48,7 +55,10 @@ 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', + title: 'Ngx-admin - 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', + keywords: 'Nebular theme system, nebular components, nebular theme map, ngx-admin built-in-themes', children: [ { type: 'block', @@ -60,7 +70,10 @@ 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.', + title: 'Ngx-admin - Change theme', + description: 'How to change the current theme in ngx-admin.' + + ' Switch from Cosmic to Default. Runtime Theme Switch.', + keywords: 'ngx-admin runtime theme switch, ngx-admin theme change', children: [ { type: 'block', @@ -72,7 +85,11 @@ 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.', + title: 'Ngx-admin - Backend integration', + description: 'Approaches of integration of ngx-admin application with backend API.' + + ' Integration with JSON REST server, angular-cli/webpack-dev-server setup.', + keywords: 'Ngx-admin backend integration, JSON REST server integration,' + + ' angular-cli/webpack-dev-server setup, ngx-admin production setup', children: [ { type: 'block', diff --git a/src/app/@core/utils/metadata.service.ts b/src/app/@core/utils/metadata.service.ts index a7f6140b..79d85984 100644 --- a/src/app/@core/utils/metadata.service.ts +++ b/src/app/@core/utils/metadata.service.ts @@ -9,17 +9,18 @@ export class MetadataService { private meta: Meta, ) {} - updateTitle(title: string) { + updateTitle(title: string): void { this.title.setTitle(title); this.meta.updateTag({ property: 'og:title', content: title }); } - updateDescription(desc: string) { + updateDescription(desc: string): void { this.meta.updateTag({ name: 'description', content: desc }); this.meta.updateTag({ property: 'og:description', content: desc }); } - - + updateKeywords(keywords: string): void { + this.meta.updateTag({ name: 'keywords', content: keywords }); + } } diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index bb23df09..49fd486c 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -3,7 +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'; +import { MetadataService } from '../../@core/utils/metadata.service'; interface CardSettings { title: string; @@ -103,7 +103,10 @@ export class DashboardComponent implements OnInit, OnDestroy { } ngOnInit() { - this.metaDataService.updateTitle('Ngx-admin IoT dashboard on Angular 9+ and Nebular.'); + this.metaDataService.updateTitle('Ngx-admin IoT dashboard on Angular 9+ and Nebular'); + this.metaDataService.updateDescription('IoT dashboard on Ngx-admin is Angular 9+ Bootstrap 4+ admin' + + ' dashboard template. Over 40+ Angular Components and 60+ Usage Examples. Completely FREE and MIT licensed.'); + this.metaDataService.updateKeywords('ngx admin, ngx admin dashboard, ngx iot dashboard, ngx-admin iot template'); this.abService.onAbEvent(AbService.VARIANT_HIDE_CALL_ACTION) .pipe(takeWhile(() => this.alive)) diff --git a/src/app/pages/e-commerce/e-commerce.component.ts b/src/app/pages/e-commerce/e-commerce.component.ts index 360d5c8b..55f91e88 100644 --- a/src/app/pages/e-commerce/e-commerce.component.ts +++ b/src/app/pages/e-commerce/e-commerce.component.ts @@ -1,7 +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'; +import { MetadataService } from '../../@core/utils/metadata.service'; @Component({ selector: 'ngx-ecommerce', @@ -17,6 +17,9 @@ export class ECommerceComponent implements OnInit, OnDestroy { ngOnInit() { this.metaDataService.updateTitle('Ngx-admin e-commerce dashboard on Angular 9+ and Nebular.'); + this.metaDataService.updateDescription('E-commerce dashboard on Ngx-admin is Angular 9+ Bootstrap 4+ admin' + + ' dashboard template. Over 40+ Angular Components and 60+ Usage Examples. Completely FREE and MIT licensed.'); + this.metaDataService.updateKeywords('ngx-admin dashboard, ngx ecommerce dashboard, angular 9+'); this.abService.onAbEvent(AbService.VARIANT_HIDE_CALL_ACTION) .pipe(takeWhile(() => this.alive)) diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index 6faf388b..6f0c4bdc 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -35,7 +35,11 @@ export class PagesComponent implements OnInit, OnDestroy { .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}`); + this.metaDataService.updateTitle(`Ngx-admin dashboard by Akveo | ${data.item.title}`); + this.metaDataService.updateDescription('Ngx-admin is Angular 9+ Bootstrap 4+ admin dashboard template.' + + ' Over 40+ Angular Components, 60+ Usage Examples and UI features.'); + this.metaDataService.updateKeywords('ngx-admin, ngx admin dashboard features, ngx admin forms,' + + ' ngx-admin maps, ngx-admin UI features, ngx-admin tables, ngx admin overlays, ngx-admin extra components'); }); } diff --git a/src/app/themes-screen/starter.component.ts b/src/app/themes-screen/starter.component.ts index 66fa0bad..6bf3d38d 100644 --- a/src/app/themes-screen/starter.component.ts +++ b/src/app/themes-screen/starter.component.ts @@ -1,16 +1,17 @@ -import {Component, OnDestroy} from '@angular/core'; -import {NbMediaBreakpoint} from '@nebular/theme'; -import {Router} from '@angular/router'; -import {AnalyticsService} from '../@core/utils'; -import {CurrentThemeService} from '../@core/utils/theme.service'; -import {Observable} from 'rxjs'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { NbMediaBreakpoint } from '@nebular/theme'; +import { Router } from '@angular/router'; +import { AnalyticsService } from '../@core/utils'; +import { CurrentThemeService } from '../@core/utils/theme.service'; +import { Observable } from 'rxjs'; +import { MetadataService } from '../@core/utils/metadata.service'; @Component({ selector: 'ngx-starter', templateUrl: './starter.component.html', styleUrls: ['./starter.component.scss'], }) -export class NgxStarterComponent implements OnDestroy { +export class NgxStarterComponent implements OnDestroy, OnInit { breakpoint: NbMediaBreakpoint; breakpoints: any; @@ -50,8 +51,15 @@ export class NgxStarterComponent implements OnDestroy { constructor(private router: Router, private currentThemeService: CurrentThemeService, private analytics: AnalyticsService, + private metadataService: MetadataService, ) {} + ngOnInit(): void { + this.metadataService.updateTitle('Ngx-admin themes for e-commerce dashboard on Angular 9+ and Nebular'); + this.metadataService.updateDescription('Choose a theme for ngx-admin e-commerce dashboard: Material, Light and Dark, Cosmic and Corporate.'); + this.metadataService.updateKeywords('Ngx-admin themes, material theme, ngx-admin cosmic, ngx-admin corporate theme, dark theme ngx-admin'); + } + navigate(themeName: string) { this.currentThemeService.setCurrentTheme(themeName); this.router.navigate(['/pages/dashboard'], {queryParams: {theme: themeName}});