Angular 5 convert Enum int to string

Question

I would like to display my enum as a string but it display as a number.

I am receiving a json object from a web service and mapping it to my typescript object

getProperties(): Observable<Property[]> {
    return this.http.get<Property[]>(this.getallagentsproperties + '1');
}

export enum LetType {
    Notspecified = 0,
    LongTerm = 1,
    ShortTerm = 2,
    Commercial = 4
}

export class Property {
    ...other stuff...
    letType: LetType;
    ...other stuff...
}

My component makes the call and adds it to the relevant property

import { Component, OnInit } from '@angular/core';
import { Property } from './Property';
import { PropertyService } from '../properties.service';

@Component({
  selector: 'app-properties',
  templateUrl: './properties.component.html',
})

export class PropertiesComponent implements OnInit {
  properties: Property[];
  constructor(private propertyService: PropertyService) { }
  ngOnInit() {
    this.getProperties()
  }
  getProperties(): void {
    this.propertyService.getProperties()
        .subscribe(p => this.properties = p);
  }
}

When I display {{property.letType}} in my template is displays:

4 I want it to display Commercial

I have tried to follow the answer found here in my template I added

{{LetType[property.letType]}}

and in my Componant I added

LetType = this.LetType;

but I always get the below error in the console

Cannot read property '4' of undefined

What am I doing wrong?

You can't refer to the enum directly in your template, need to bridge. See the answer of this: https://stackoverflow.com/questions/37741010/angular2-access-global-variables-from-html-template — Harry Ninh, Jan 12 '18 at 00:44

score 24 · Answer 1 · answered Oct 03 '18 at 05:06

You don't need to create a pipe here. Here is my answer.

let-type.enum.ts

export enum LetType{
  Type1 = 1,
  Type2 = 2,
  Type3 = 3,
  Type4 = 4
}

property.model.ts

export interface Property{
   ...other stuff...
   letType: LetType;
   ...other stuff...
}

properties.component.ts

import { Component, OnInit } from '@angular/core';
import { Property} from './property.model';
import { LetType} from './let-type.enum';
import { PropertyService } from '../properties.service';

@Component({
   selector: 'app-properties',
   templateUrl: './properties.component.html',
})
export class PropertiesComponent implements OnInit {

  properties: Property[] = [];
  LetType = LetType;

  constructor(private propertyService: PropertyService) { }

  ngOnInit() {
     this.getProperties();
  }

  getProperties() {
    this.propertyService.getProperties().subscribe(result => {
         this.properties = result
    });
  }
}

Then in your html

<ng-container matColumnDef="columnName">
   <th mat-header-cell *matHeaderCellDef >Types</th>
   <td  mat-cell *matCellDef="let element">{{LetType[element.letType]}}</td>
</ng-container>

score 9 · Accepted Answer · answered Jan 13 '18 at 00:03

Thanks to @Harry Ninh comment I was able to solve my issue.

{{property.letType}} displayed 0 I wanted it display My Enum Value

note: I did not ask for the split casing in my question but I have provided that here as I feel many people who are displaying an enum as a string value could find it useful

Step 1 Add required enum (LetType in my case) to your component

import { Component, OnInit, Type } from '@angular/core';
import { Property, LetType} from './Property';
import { PropertyService } from '../properties.service';

@Component({
    selector: 'app-properties',
    templateUrl: './properties.component.html',
})
export class PropertiesComponent implements OnInit {

    properties: Property[];
    LetType = LetType;

    constructor(private propertyService: PropertyService) { }

    ngOnInit() {
        this.getProperties();
    }

    getProperties(): void {
        this.propertyService.getProperties()
            .subscribe(p => this.properties = p);
    }
}

step 2 create custom pipe to convert your number to a string

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'eNumAsString'
})

export class ENumAsStringPipe implements PipeTransform {
    transform(value: number, enumType: any): any {
        return enumType[value].split(/(?=[A-Z])/).join().replace(",", " ");;
    }
}

Step 3 add your pipe to the table

...other html table tags...
    <td>{{property.letType | eNumAsString:LetType}}</td>
...other html table tags...

If I don't apply the pipe I get an empty combo box – tony09uk Apr 11 '18 at 18:37 — tony09uk, Apr 11 '18 at 18:37

score 9 · Answer 3 · edited Oct 04 '18 at 01:35

9

You can do this without pipe:

LetType : typeof 
LetType = LetType ;

and in the html page:

<td  mat-cell *matCellDef="let element">{{LetType[element.letType]}}</td>

as before.

edited Oct 04 '18 at 01:35

Acapulco

3,373
8
38
51

answered Oct 03 '18 at 18:55

user10453112

91
1
1

Angular 5 convert Enum int to string

3 Answers3