add meta data (#5641)

* fix(pages): fix titles and descriptions

* fix(pages): titles and discriptions

* fix(pages): tripple

* fix(pages): fix titles

* feat(app): add og logo

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,

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 });
+  }
+
+
+}

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 );

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 );

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: `
-    <ngx-sample-layout>
-      <nb-menu [items]="menu"></nb-menu>
-      <router-outlet></router-outlet>
-    </ngx-sample-layout>
+      <ngx-sample-layout>
+          <nb-menu [items]="menu"></nb-menu>
+          <router-outlet></router-outlet>
+      </ngx-sample-layout>
   `,
 })
-export class PagesComponent implements OnInit {
+export class PagesComponent implements OnInit, OnDestroy {
+  destroy$: Subject<boolean> = new Subject<boolean>();
+
+  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();
+  }
+
 }

src/index.html

@@ -2,9 +2,11 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>ngx-admin - Angular 9, Bootstrap 4 Admin dashboard template</title>
-  <meta name="description" content="Free Angular 9 Bootstrap admin dashboard template.">
-  <meta name="keywords" content="admin,dashboard,template,angular 9,bootstrap,panel,html,css,javascript">
+
+  <title>Ngx-admin e-commerce dashboard on Angular 9+ and Nebular.</title>
+  <meta name="description" content="Free Angular 8 Bootstrap admin dashboard template.">
+  <meta name="keywords" content="admin,dashboard,template,angular 8,bootstrap,panel,html,css,javascript">
+  <meta property="og:image" content="assets/images/logo.jpg"/>
 
   <base href="/">