Implementing angular 2 set title tag -

i'm trying adapt example (https://angular.io/guide/set-document-title) implementation, has more pieces. don't yet understand angular 2 pieces , how fit together.

their main.ts:

import { platformbrowserdynamic } '@angular/platform-browser-dynamic'; import { appmodule } './app/app.module'; platformbrowserdynamic().bootstrapmodule(appmodule); 

mine:

import { enableprodmode } '@angular/core'; import { platformbrowserdynamic } '@angular/platform-browser-dynamic';  import { appmodule } './app/app.module'; import { environment } './environments/environment';  if (environment.production) {     enableprodmode(); }   const platform = platformbrowserdynamic(); platform.bootstrapmodule(appmodule); 

ok far.

their app.module:

import { ngmodule } '@angular/core'; import { browsermodule, title }  '@angular/platform-browser';  import { appcomponent } './app.component';  @ngmodule({     imports: [         browsermodule     ],     declarations: [         appcomponent     ],     providers: [         title     ],     bootstrap: [ appcomponent ] }) export class appmodule { } 

mine:

import { browsermodule, title } '@angular/platform-browser'; import { ngmodule, app_initializer  } '@angular/core';  import { serviceconfigfactory, appconfig } './app.config'; ... 50 other imports import { approutingmodule } './app-routing.module';   export function httploaderfactory(http: http, siteservice:siteservice) {     return new localizationloader(http,siteservice); }  @ngmodule({   declarations: [     appcomponent,     homecomponent,     logincomponent,     baselogincomponent,     clientswitchcomponent,     switchclientcomponent   ],   imports: [     browsermodule,     formsmodule,     httpmodule,     jwbootstrapswitchmodule,     datepickermodule.forroot(),     typeaheadmodule.forroot(),     momentmodule,     sharedmodule,     authmodule,     companymodule,     requesttimeoffmodule,     approutingmodule,     translatemodule.forroot({         loader: {             provide: translateloader,             usefactory: httploaderfactory,             deps: [http, siteservice]         }     }),     storemodule.providestore({ appstate: appstatereducer }),   ],   providers: [     { provide: appconfig, usefactory: serviceconfigfactory },     siteservice,     appcontext,     { provide: app_initializer, usefactory: appcontextloader, deps: [appcontext], multi: true },     employeeservice,     leavesservice,     servicemanager,     encryptionservice   ],   bootstrap: [appcomponent] }) export class appmodule { } 

here's run trouble:

their app.component.ts:

import { component } '@angular/core'; import { title }     '@angular/platform-browser';  @component({ selector: 'my-app', template:   `<p>     select title set on current html document:   </p>    <ul>     <li><a (click)="settitle( 'good morning!' )">good morning</a>.</li>     <li><a (click)="settitle( 'good afternoon!' )">good afternoon</a>.</li>     <li><a (click)="settitle( 'good evening!' )">good evening</a>.</li>   </ul>   ` }) export class appcomponent {   public constructor(private titleservice: title ) { }    public settitle( newtitle: string) {     this.titleservice.settitle( newtitle );   } } 

mine:

import { component } '@angular/core'; import { translateservice } '@ngx-translate/core'; import { appcontext } './services/app.context'; import {authservice} './services/auth/auth.service'; import { companyroutes } './features/company/company.routes'; import { router, navigationend } '@angular/router'; import { title } '@angular/platform-browser';  @component({     selector: 'app-root',     templateurl: './app.component.html',     styleurls: ['./app.component.scss'] })   export class appcomponent {     constructor(public router: router, public auth: authservice, public appcontext: appcontext, translate: translateservice, private companyroutes: companyroutes, private titleservice: title) {         if (appcontext.siteconfig.clientcode) {             this.companyroutes.resetcompanyroutes(appcontext.siteconfig.clientcode);         }     }      public settitle(newtitle: string) {         this.titleservice.settitle(newtitle);     } } 

now, don't want perform settitle on app.component .ts; want hits first page (and every subsequent page, i'm expecting do:

my login.component.ts:

import { component, oninit } '@angular/core'; import { activatedroute, router } '@angular/router'; import { observable } 'rxjs'; import { siteservice } '../../../services/site.service'; import { appcontext } '../../../services/app.context'; import { loginconfig, appstate } '../../../models/site/site.config'; import {authservice} '../../../services/auth/auth.service';  @component({     selector: 'app-login',     templateurl: './login.component.html',     styleurls: ['./login.component.scss'] }) export class baselogincomponent implements oninit {      ngoninit() {          this.settitle("!");     } } 

login.component.ts not recognize this.settitle() or settitle();

i don't understand purpose of these app.component , app.module fields are, , how connect together, i'm not sure how expose settitle pages.