0

enter image description hereFor example: When I login dev environment: The header color of the application should be in Green When I login dev2 environment: The header color of the application should be in Blue When I login test environment: The header color of the application should be in Yellow When I login prod environment: The header color of the application should be in Red

Any help?

Sumana
  • 1
  • 1
  • ^ same method applies for earlier versions of angular – Andrew Allen Dec 15 '22 at 14:11
  • @AndrewAllen: I wanted to apply different color basically to differentiate each environment. Is it possible to specify in `environment.ts`? – Sumana Dec 15 '22 at 14:18
  • Yep, sean has given the way if it's just one variable color to change. Anything more complex then I would recommend fileReplacements with `styles.scss`, `styles.dev.scss`, `styles.dev2.scss` etc – Andrew Allen Dec 15 '22 at 14:32
  • @AndrewAllen: headerColor specified in environment.ts doesn't actually change the header color of the application. – Sumana Dec 15 '22 at 15:51
  • You'll have to *use* the variable to set the color in the template – Andrew Allen Dec 15 '22 at 15:54

2 Answers2

1

Yes, use an environment variable. Here is the documentation:

https://angular.io/guide/build#using-environment-specific-variables-in-your-app

// environment.ts (under the environments folder)
export const environment = {
  production: false,
  headerColor: 'green'
};

// environment.test.ts
export const environment = {
  production: false,
  headerColor: 'blue'
};

// environment.prod.ts
export const environment = {
  production: true,
  headerColor: 'yellow'
};

// in a component
import { environment } from './../environments/environment';

headerColor: string = environment.headerColor;
Sean Chase
  • 1,139
  • 1
  • 15
  • 23
  • I tried the same way as above, but the header color doesn't change. Can you check the image which I have attached to the question? – Sumana Dec 15 '22 at 15:02
0

When you say header, I am assuming you simply mean a component that lives inside src. This should be quite simple to do:

  1. Ensure that you have all of your different environments captured in the /environments folder, and that they also live inside angular-cli.json. You can also ensure that each environment object has a unique identifier.

  2. Inside your component, you can import the environment object: import {environment} from '../../*correct relative path*/environment'

  3. In your .scss file of the component, you can define multiple classes with the different background-colors as per the business logic you mentioned.

  4. Create a getter variable in the .ts file, which has switch-case logic to return the correct class name depending on which environment you are in. For example:

get headerClassPerEnvironment(): string {
  let class = "";
  switch (environment.uniqueIdentifier) {
    case ("dev"):
      class = "yellow-header";
      break;
    case ("staging"):
      class = "blue-header"
      break;
    case ("prod"):
      class = "whatever-header";
      break;
    default:
      class = "default-header";
  }
  
  return class;
}
  1. Finally, in your .html file, you can add the multi-class binding to your HTML element, with the variable you created. For example, <div [class]="headerClassPerEnvironment"> ... </div>

Hopefully this helps!

Cheers.

Marc Atasoy
  • 16
  • 2