<meta name="description" content="**my description for this route**"/>

import { Meta } from '@angular/platform-browser';

// [...]

constructor(private meta: Meta) {}

// [...]

this.meta.addTag({ name: 'robots', content: 'noindex' });

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

import { NgModule } from '@angular/core';
import { RouterModule, Routes, Router, NavigationEnd, ActivatedRoute } from '@angular/router';

import { StringComparisonComponent }  from '../module-string-comparison/string-comparison.component';
import { ClockCalculatorComponent }  from '../module-clock-calculator/clock-calculator.component';

import { Title, Meta } from '@angular/platform-browser';

const routes: Routes = [
  {
    path: '', redirectTo: '/string-comparison', pathMatch: 'full',
    data: { title: 'String comparison title', metaDescription: 'String comparison meta description content' }
  },
  {
    path: 'string-comparison',  component: StringComparisonComponent,
    data: { title: 'String comparison title', metaDescription: 'String comparison meta description content' }
  },
  {
    path: 'clock-time-calculator',  component: ClockCalculatorComponent,
    data: { title: 'Clock time calculator title', metaDescription: 'Clock time calculator meta description content' }
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule {

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title,
    private metaService: Meta
  ){
    //Boilerplate code to filter out only important router events and to pull out data object field from each route
    this.router.events
    .filter(event => event instanceof NavigationEnd)
    .map(() => this.activatedRoute)
    .map(route => {
        while (route.firstChild) route = route.firstChild;
        return route;
    })
    .filter(route => route.outlet === 'primary')
    //Data fields are merged so we can use them directly to take title and metaDescription for each route from them
    .mergeMap(route => route.data)
    //Real action starts there
    .subscribe((event) => {
        //Changing title
        this.titleService.setTitle(event['title']);

        //Changing meta with name="description"
        var tag = { name: 'description', content: event['metaDescription'] };
        let attributeSelector : string = 'name="description"';
        this.metaService.removeTag(attributeSelector);
        this.metaService.addTag(tag, false);
    });
  }

}