Can I use Angular environment variables to dynamically alter HTML?-CodePudding

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  role="tablist">
      <ng-container *ngFor="let app of appList">
        <li role="presentation"
            class='nav-item'>
          <a 
              (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?

CodePudding user response：

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
};