I have a file, platforms.ts, where is declared an array as following :

export const platforms: Platforms[] = [
  {
    name: 'Instagram',
    value: 'instagram'
  },
  {
    name: 'Facebook',
    value: 'facebook'
  }
];

I try to import that array in my Angular component in order to use it in an *ngFor, such as :

<ng-container *ngFor="let platform of platforms">
  <!-- displaying platform informations -->
</ng-container>

The thing is : it works when the platforms object is declared directly in my .ts file, but when I import it like import { platforms } from '../utils/platforms'; I get the error :

Property 'platforms' does not exist on type 'CampaignFormComponent'.

A quick&dirty workaround is to declare an attribute platform in my typescript file, such as platform /* class attribute */ = platform /* imported */ ; is there any cleaner way to do this ?

CodePudding user response：

In short: No, there is no other way to do this.

Every variable you wish to use in your component html you must declare in your component class.