Can I use Angular environment variables to dynamically alter HTML?

Question

I have an Angular application with a header nav bar that displays a series of tabs, but I want to dynamically alter which tabs are displayed depending on which environment the application is built on.

header component HTML

<nav id="nav"
    <ul class="navbar-nav mr-auto" role="tablist">
      <ng-container *ngFor="let app of appList">
        <li role="presentation"
            class='nav-item'>
          <a class="nav-link"
              (click)="selectApp(app.id)">
            {{app.name}}
          </a>
      </li>
      </ng-container>
    </ul>
  </div>
</nav>

The tabs are bound to an object appList in the component's TS file.

export class HeaderComponent implements OnInit {

  appSelected: string;
  appList = [
    {
      'id': 0,
      'name': 'Home',
      'routerLink': '/'
    },
    {
      'id': 1,
      'name': 'Story Pointing',
      'routerLink': '/spe'
    },
    {
      'id': 2,
      'name': 'T-shirt Sizing',
      'routerLink': '/tse'
    },
    {
      'id': 3,
      'name': 'Asset Tracker',
      'routerLink': '/tat'
    }
  ]

  constructor() { }

  ngOnInit(): void {
    this.appSelected = this.appList[0].name
  }

  selectApp(appId:any){
    this.appSelected = this.appList[appId].name
  }

Currently, I have two environments: local and dev. When I build the application on the local environment, I want all 4 of the tabs to be displayed in the nav bar. However, when I build the application in the server environment, I only want the first three entries of the appList object to be displayed on the nav bar.

I have tried adding a custom tabList property to each of the environment variables with a modified version of the appList object; however, when I try to refer to the environment variable after importing it to my component, it does not appear as a property of the variable.

environment.local.ts

export const environment = {
  production: false,
  apiUrl: "http://localhost:8080/",
  tabList: [
    {
      'id': 0,
      'name': 'Home',
      'routerLink': '/'
    },
    {
      'id': 1,
      'name': 'Story Pointing',
      'routerLink': '/spe'
    },
    {
      'id': 2,
      'name': 'T-shirt Sizing',
      'routerLink': '/tse'
    },
    {
      'id': 3,
      'name': 'Asset Tracker',
      'routerLink': '/tat'
    }
  ]
}

Do I need to use another technique to get the above mentioned effect or is there a way to do so using the environment variables?

MGX · Accepted Answer · 2022-12-08 15:32:38Z

1

When you declare a variable in an environment file, you should declare the same variable in ALL environment files.

Here is what I suggest :

environment.common.ts

export const commonEnvironment = {
  tabs: [ /* your tabs here */ ]
};

other environment files

import { commonEnvironment } from './environment.common';

export const environment = {
  ...commonEnvironment,
  tabs: commonEnvironment.tabs.slice(0, 4) // Adapt the "4" to your environment
};

answered Dec 8, 2022 at 15:32

MGX

3,5315 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

liberlux Over a year ago

Thank you for the hint. This ended up being the solution though, in my case, I simply had to add the tabs object to my default environment.ts file which acted as the common environment in my application.

MGX Over a year ago

You should have a unique file for the common environment, because environment files are replaced at build time. But glad I could help!

liberlux Over a year ago

Update: I had to change the environment.ts file to environment.common.ts so it could be re-used with the other environment variables. So, you were right from the beginning. Thanks again!

Collectives™ on Stack Overflow

Can I use Angular environment variables to dynamically alter HTML?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related