Accessing enum values in a view with Typescript and AngularJS version 1.5

Question

Accessing enum values in a view with Typescript and AngularJS version 1.5

Recently started working with Angular 1.5 and Typescript

I have a service that returns data in an array format called devices.headerEntries:

[{name:id,value:45} ,{name:Mode,value:1},{name:State,value:2},{name:serialnum,value:123434}

I created a component structured like this

   module my.app {
'use strict';
export enum ModeEnum {
    Unknown = 0,
    Manual,
    Scheduled
}
export enum StateEnum {
  Unknown = 0,
  Playing,
  Paused,
  Stopped
}

@mmw.core.Component('my.app', 'mmwListView', {
    controllerAs: 'vm',
    bindings: {
        device: '<'
    },
    templateUrl: 'app/mydevice/mmw-listview.component.html'
})

class ListViewComponent {
    static $inject = ['$window'];

    constructor(private $window: ng.IWindowService
    ) {
    }

      public device: devices.headerEntries
}

The view looks like this

   <md-content>
 <md-list-item class="md-2-line" ng-repeat="hi in vm.device.headerEntries">

      <div class="md-list-item-text">
        <h3> {{hi.name}}</h3>
        <p> {{hi.value}}</p>
      </div>
    </md-list-item>
  </md-list>

I am struggling to display enum text values for properties like Mode, state on the UI. I need to show data like [Id, 45] [Mode, Unknown] [State, Paused] [Serial Number, 1333] on the UI

angularjs typescript

Answer 1

Answer №1

When Typescript enums are transpiled, they become plain JavaScript objects:

enum Foo {
    Bar,
    Baz
}

> Foo[0] = 'Bar'
> Foo[1] = 'Baz'
> Foo['Bar'] = 0
> Foo['Baz'] = 1
> Foo[8] = undefined
> Foo['Something'] = undefined

To retrieve the string you desire, you can use:

StateEnum[item.value]

This can be done through a filter (shown below) or pre-processing. By checking the return value (which is undefined if the value is not found in the enum), you can maintain values like 45 and 123434.

An example of a filter:

export class StateFilter {
    constructor() {
        return (value: number) => {
            if (value == null) { return ''; }

            return StateEnum[value] || value;
        };
    }
}

angular
    .module('app')
    .filter('stateFilter', StateFilter);

Then you can use it in your template like this:

<p>{{hi.value | stateFilter}}</p>

For more information on TypeScript enums, check out this link!

Answer 2

When Typescript enums are transpiled, they become plain JavaScript objects:

enum Foo {
    Bar,
    Baz
}

> Foo[0] = 'Bar'
> Foo[1] = 'Baz'
> Foo['Bar'] = 0
> Foo['Baz'] = 1
> Foo[8] = undefined
> Foo['Something'] = undefined

To retrieve the string you desire, you can use:

StateEnum[item.value]

This can be done through a filter (shown below) or pre-processing. By checking the return value (which is undefined if the value is not found in the enum), you can maintain values like 45 and 123434.

An example of a filter:

export class StateFilter {
    constructor() {
        return (value: number) => {
            if (value == null) { return ''; }

            return StateEnum[value] || value;
        };
    }
}

angular
    .module('app')
    .filter('stateFilter', StateFilter);

Then you can use it in your template like this:

<p>{{hi.value | stateFilter}}</p>

For more information on TypeScript enums, check out this link!

Accessing enum values in a view with Typescript and AngularJS version 1.5

Answer №1

Similar questions

Stuck on loading screen with Angular 2 Testing App

Tips for creating a webfont using SVG icons

angular2 - Having trouble retrieving data from subject

Dynamically setting the IMG SRC attribute with the base64 result of a FileReader for file input

Converting an Angular promise into a jQuery deferred object: A guide

The issue of process.server being undefined in Nuxt.js modules is causing compatibility problems

Does the JavaScript Amazon Cognito Identity SDK offer support for the Authorization Code Grant flow?

Issue encountered: Model binding is not functioning properly in AngularJS and MVC4 collaboration

Creating a bespoke numeric input component using React Native

Creating a Search Functionality within a Tab Component in Ionic

Using TypeScript generics to create reusable type definitions for reducers

Parent Class implementation for dynamic loading of components

Angular Material Datatables - Issue with Paginating Data from Firestore

The property is not found in the '{}' type but is necessary in the type... Typescript connect strategy

AngularJS directive that rounds numbers to two decimal places

How come I am receiving {"readyState":1} in the DOM instead of JSON data in AngularJS?

Establish the predefined date for the air-datepicker

Sending two arguments to an Express Mongoose API in order to fetch a singular outcome

Issue with importing MomentJS globally in TypeScript

Ways to address the issue of Node.js versions with odd numbers not qualifying for LTS status and being unsuitable for production node:16120 due to UnhandledPromiseRejectionWarning