feat(Meta Tags): Set meta tags on each page

Author: commitBlob

src/app/+about-page/about-page.component.ts

@@ -7,6 +7,7 @@ import 'rxjs/add/observable/forkJoin';
 
 // App specific
 import { AboutPageService } from './about-page.service';
+import { MetaTagsService } from '../shared/meta-tags/meta-tags.service';
 
 // Moment
 import * as moment from 'moment/moment';
@@ -18,6 +19,7 @@ import * as moment from 'moment/moment';
 export class AboutPageComponent implements OnInit {
   age: number;
   isLoading = true;
+  pageName = 'About';
 
   profilePictures = [];
   socialIcons = [];
@@ -27,23 +29,25 @@ export class AboutPageComponent implements OnInit {
   constructor(private aboutMeService: AboutPageService,
               private router: Router,
               private title: Title,
-              private meta: Meta) {
+              private meta: Meta,
+              private metaTagsService: MetaTagsService) {
   }
 
-  bounceImage(event) {
+  bounceImage(event): void {
     this.bouncer = event.type === 'mouseover' ? 'bounce-out' : 'no-bounce';
   }
 
-  generateImage(image) {
+  generateImage(image): string {
     return 'data:image/jpeg;base64,' + image;
   }
 
-  doNavigate(route) {
+  doNavigate(route): void {
     this.router.navigate([route]);
   }
 
   ngOnInit(): void {
-    this.age = moment().diff('1992-05-11', 'years');
+    this.setMetaData();
+    this.calculateAge();
     Observable.forkJoin(
       this.aboutMeService.getImages(),
       this.aboutMeService.getSocialIcons()
@@ -52,8 +56,15 @@ export class AboutPageComponent implements OnInit {
       this.socialIcons = res[1];
       this.isLoading = false;
     });
+  }
+
+  setMetaData(): void {
+    this.meta.addTag(this.metaTagsService.setMetaTag('description', `${this.pageName} Page`));
+    this.title.setTitle(this.metaTagsService.setPageTitle(this.pageName));
+  }
 
-    this.title.setTitle('Maro Radovic - Web and Software Developer | About');
-    this.meta.addTag({name: 'description', content: 'About page'});
+  calculateAge(): void {
+    this.age = moment().diff('1992-05-11', 'years');
   }
+
 }

src/app/+contact-page/contact-page.component.ts

@@ -7,6 +7,7 @@ import 'rxjs/add/operator/debounceTime';
 
 // App specific
 import { ContactPageService } from './contact-page.service';
+import { MetaTagsService } from '../shared/meta-tags/meta-tags.service';
 
 @Component({
   selector: 'folio-contact',
@@ -15,6 +16,7 @@ import { ContactPageService } from './contact-page.service';
 export class ContactPageComponent implements OnInit {
 
   contactForm: FormGroup;
+  pageName = 'Contact Me';
 
   animateMe = false;
   formSent = false;
@@ -26,7 +28,8 @@ export class ContactPageComponent implements OnInit {
               private contactService: ContactPageService,
               private router: Router,
               private title: Title,
-              private meta: Meta) {
+              private meta: Meta,
+              private metaTagsService: MetaTagsService) {
   }
 
   checkName() {
@@ -85,6 +88,7 @@ export class ContactPageComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.setMetaData();
     this.contactForm = this.formBuilder.group({
       name: ['', [Validators.required]],
       email: ['', [Validators.required, Validators.email]],
@@ -95,8 +99,10 @@ export class ContactPageComponent implements OnInit {
     nameControl.valueChanges.debounceTime(800).subscribe(val => {
       this.doCheckEmail();
     });
+  }
 
-    this.title.setTitle('Maro Radovic - Web and Software Developer | Contact Me');
-    this.meta.addTag({name: 'description', content: 'Contact me page'});
+  setMetaData(): void {
+    this.meta.addTag(this.metaTagsService.setMetaTag('description', `${this.pageName} Page`));
+    this.title.setTitle(this.metaTagsService.setPageTitle(this.pageName));
   }
 }

src/app/+experience-page/experience-page.component.ts

@@ -1,22 +1,28 @@
 // Core
 import { Component, OnInit } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/forkJoin';
 
 // App specific
 import { ExperiencePageService } from './experience-page.service';
+import { MetaTagsService } from '../shared/meta-tags/meta-tags.service';
 
 @Component({
   selector: 'folio-xp',
   templateUrl: 'experience-page.component.html'
 })
 export class ExperiencePageComponent implements OnInit {
 
+  pageName = 'Experience';
   projectsList = [];
   positions = [];
   education = [];
 
-  constructor(private experienceService: ExperiencePageService) {}
+  constructor(private experienceService: ExperiencePageService,
+              private metaTagsService: MetaTagsService,
+              private meta: Meta,
+              private title: Title) {}
 
   generateImage(image) {
     return 'data:image/png;base64,' + image;
@@ -27,6 +33,7 @@ export class ExperiencePageComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.setMetaData();
     Observable.forkJoin(
       this.experienceService.getProjectsList(),
       this.experienceService.getPositions(),
@@ -37,4 +44,9 @@ export class ExperiencePageComponent implements OnInit {
       this.education = res[2];
     });
   }
+
+  setMetaData(): void {
+    this.meta.addTag(this.metaTagsService.setMetaTag('description', `${this.pageName} Page`));
+    this.title.setTitle(this.metaTagsService.setPageTitle(this.pageName));
+  }
 }

src/app/+faqs-page/faqs-block.component.ts

@@ -1,35 +1,45 @@
 // Core
 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
+import { Meta, Title } from '@angular/platform-browser';
 
 // App specific
 import { FaqsPageService } from './faqs-page.service';
+import { MetaTagsService } from '../shared/meta-tags/meta-tags.service';
 
 @Component({
   selector: 'faqs-block',
   templateUrl: 'faqs-block.component.html'
 })
 export class FaqsBlockComponent implements OnInit {
 
+  pageName = 'FAQs';
   faqs = [];
 
   constructor(private faqsService: FaqsPageService,
-              private location: Location) {
+              private location: Location,
+              private metaTagsService: MetaTagsService,
+              private meta: Meta,
+              private title: Title) {
   }
 
-
   navigateBack(): void {
-
     // workaround to prevent animation trigger when user leaves the page
     this.faqs = [];
     this.location.back();
   }
 
   ngOnInit(): void {
+    this.setMetaData();
     this.faqsService.getFaqs().subscribe((res) => {
       // don't rush
       setInterval(() => this.faqs = res, 500 );
     });
   }
 
+  setMetaData(): void {
+    this.meta.addTag(this.metaTagsService.setMetaTag('description', `${this.pageName} Page`));
+    this.title.setTitle(this.metaTagsService.setPageTitle(this.pageName));
+  }
+
 }

src/app/+portfolio-page/portfolio-page.component.ts

@@ -1,34 +1,47 @@
 // Core
 import { Component, OnInit } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 
 // App specific
+import { MetaTagsService } from '../shared/meta-tags/meta-tags.service';
 import { PortfolioPageService } from './portfolio-page.service';
 
 @Component({
   selector: 'folio-portfolio',
   templateUrl: 'portfolio-page.component.html'
 })
 export class PortfolioPageComponent implements OnInit {
+
+  pageName = 'Projects List';
   projectsList = [];
 
   constructor(private portfolioService: PortfolioPageService,
-              private router: Router) {
+              private router: Router,
+              private metaTagsService: MetaTagsService,
+              private meta: Meta,
+              private title: Title) {
   }
 
-  generateImage(image) {
+  generateImage(image): string {
     return 'data:image/jpeg;base64,' + image;
   }
 
-  goToProject(project) {
+  goToProject(project): void {
     this.router.navigate([`portfolio/${project}`]);
   }
 
   ngOnInit(): void {
+    this.setMetaData();
     this.portfolioService.getProjects().subscribe(
       (res) => {
         this.projectsList = res;
       }
       );
   }
+
+  setMetaData(): void {
+    this.meta.addTag(this.metaTagsService.setMetaTag('description', `${this.pageName} Page`));
+    this.title.setTitle(this.metaTagsService.setPageTitle(this.pageName));
+  }
 }

src/app/+skills-page/skills-page.component.ts

@@ -1,7 +1,9 @@
 // Core
 import { Component, OnInit } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
 
 // App specific
+import { MetaTagsService } from '../shared/meta-tags/meta-tags.service';
 import { SkillsPageService } from './skills-page.service';
 import { SkillsInterface } from './skills.interface';
 
@@ -18,8 +20,12 @@ export class SkillsPageComponent implements OnInit {
   fontAwesomeList: SkillsInterface[] = [];
   customIconsList: SkillsInterface[] = [];
   skillsContent: any;
+  pageName = 'Skills';
 
-  constructor(private skillsService: SkillsPageService) {
+  constructor(private skillsService: SkillsPageService,
+              private metaTagsService: MetaTagsService,
+              private title: Title,
+              private meta: Meta) {
   }
 
   explodeSkillsList() {
@@ -50,6 +56,7 @@ export class SkillsPageComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.setMetaData();
     this.skillsService.getSkillsList().subscribe((res) => {
       this.skills = res;
       this.explodeSkillsList();
@@ -58,4 +65,9 @@ export class SkillsPageComponent implements OnInit {
       this.skillsContent = res[0];
     });
   }
+
+  setMetaData(): void {
+    this.meta.addTag(this.metaTagsService.setMetaTag('description', `${this.pageName} Page`));
+    this.title.setTitle(this.metaTagsService.setPageTitle(this.pageName));
+  }
 }

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { BrowserDetectService } from './shared/browser-detect/browser-detect.ser
 import { BrowserUnsupportedComponent } from './shared/browser-unsupported/browser-unsupported.component';
 import { GoogleAnalyticsService } from './shared/google-analytics/google-analytics.service';
 import { MaterialModule } from './shared/materialModule';
+import { MetaTagsService } from './shared/meta-tags/meta-tags.service';
 import { PageNotFoundModule } from './404-page/page-not-found.module';
 import { routes } from './app.routes';
 import { SharedModule } from './shared/shared.module';
@@ -39,7 +40,8 @@ import 'hammerjs';
   ],
   providers: [
     BrowserDetectService,
-    GoogleAnalyticsService
+    GoogleAnalyticsService,
+    MetaTagsService
   ],
   bootstrap: [AppComponent]
 })

src/app/shared/meta-tags/meta-tags.service.ts

@@ -0,0 +1,17 @@
+// Core
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MetaTagsService {
+
+  private roleTitle = 'Senior Software Developer & Research Lead';
+  private name = 'Maro Radovic';
+
+  setPageTitle(page: string): string {
+    return `${this.name} - ${this.roleTitle} | ${page}`;
+  }
+
+  setMetaTag(tagName: string, tagContent: string): any {
+    return {name: tagName, content: tagContent};
+  }
+}