Set App Title dynamically according to domain name in Angular 2 Seed project

Question

I want to change the Angular 2 Seed app name using a running environment variable. I have two domain and two environments (DEV, PROD) for each of one and I want to change app name dynamically on running the application

I try to change the APP_NAME variable in ProjectConfig class which extends SeedConfig class. When I use environment TITLE variable in ProjectConfig, the program does not run.

I set this.APP_TITLE = Config.TITLE; in ProjectConfig class. (Config.TITLE comes from the environment.)

I want to show running current domain name on APP TITLE section.

In the index.html file there is a line

 <title><%= APP_TITLE %></title>

which take the App title from ProjectConfig APP_TITLE variable. I try to change APP_TITLE variable using my env TITLE variable so I could dynamically set the app name. I have two apps such as "APP NAME 1", "APP NAME 2". I have two environments (DEV, PROD) for each domain and four environment dev.ts, prod.ts, dev2.ts, prod2.ts which use EnvConfig interface. enter image description here when I run

npm start -- --env-config dev

APP NAME 1 run in dev mode.

npm start -- --env-config dev2

APP NAME 2 run in dev mode.

In brief, I want to show running app name dynamically on APP_TITLE section of index.html

Answer 1

I solve the problem with using Title service at angular.io/guide/set-document-title

I just add the code in app.component.ts file

 this.titleService.setTitle(Config.TITLE);

Config.TITLE value comes from environment variable dynamically.