Pass enum value to angular 2 component

Question

I have an enum, and want to pass from template the enum value. How is this possible?

export enum FIELDS {
    GENDER = <any>'Gender',
    SALUTATION = <any>'Salutation',
    FIRSTNAME = <any>'First Name',
    LASTNAME = <any>'Last Name',
    EMAIL_ADDRESS = <any>'Email Address',
    COUNTRY = <any>'Country',

}

my template. Here i want to pass the enum value

 [ngClass]="{'error':validate(FIELDS.COUNTRY)}"

//this throws an error: Unable to get property COUNTRY of undefined or null reference.

my component:

@Component({
  selector: 'row-general',
  template: require('./modify-invalid-row-general.component.html'),
  styleUrls: ['./app/nedit/modify-invalid-row/modify-invalid-row.component.css']
})
export class ModifyInvalidRowGeneralComponent {

  @Input() row: UploadRow;
  @Input() columns: ConfigColumn[];

  @Output() validateRow = new EventEmitter<UploadRow>();

  public validate(field: string): boolean {

    let invalidFields: string[] = [];
    if (this.row.invalidFields != null)
      invalidFields = this.row.invalidFields.split(';');
    for (let i = 0; i < invalidFields.length; i++) {
       if (invalidFields[i].trim() == field.trim())
        return true;
    }
    return false;
  }

if I normally call FIELDS.COUNTRY in the component I get the value 'Country'. That's what I need.

Anybody know, how can I pass the enum value?

grapecity.com/en/blogs/using-typescript-enums-angular-templates — splintor
– splintor, Commented May 6, 2018 at 11:28

Vishnu · Accepted Answer · 2018-04-04 23:21:09Z

Just to update the answer for Angular 4+ versions and TypeScript 2.4 and above.

Passing Enums to Angular components is way simpler.

 export enum PersonTypes {
  MALE = 'male',
  FEMALE = 'female'
}
@Component({
  selector: 'app-person-info'
})
export class PersonComponent implements OnInit {

  @Input() type: PersonTypes;
}

Using the PersonComponent in another Container:

@Component({
  selector: 'app-container'
})
export class AppContainerComponent implements OnInit {

  personType = PersonTypes.MALE;
}

In the View template:

<app-person-info [type]="personType"></app-person-info>

In case if you need access to all the enum properties: then in the container app, expand personType = PersonTypes

And use the properties accordingly.

Gili Yaniv · Accepted Answer · 2017-08-22 08:07:37Z

You can't access enums directly form you template. Alternately, you can copy them into your component and then use it in your component.

@Component({
  selector: 'row-general',
  template: require('./modify-invalid-row-general.component.html'),
  styleUrls: ['./app/nedit/modify-invalid-row/modify-invalid-row.component.css']
})
export class ModifyInvalidRowGeneralComponent {

  @Input() row: UploadRow;
  @Input() columns: ConfigColumn[];

  @Output() validateRow = new EventEmitter<UploadRow>();

  FILEDS:any=Object.assign({},FIELDS);

  public validate(field: string): boolean {

    let invalidFields: string[] = [];
    if (this.row.invalidFields != null)
      invalidFields = this.row.invalidFields.split(';');
    for (let i = 0; i < invalidFields.length; i++) {
       if (invalidFields[i].trim() == field.trim())
        return true;
    }
    return false;
  }

I've used Object.assign to take the enum object and copy it (Reference to it won't work ). Now you have you enum instance in your component and you can use it freely it your template as well.

Why "Reference to it won't work"? In my experience, readonly FIELDS = FIELDS; will work just fine.

FAISAL · Accepted Answer · 2017-08-21 15:55:49Z

-1

You have to make the enum a property of your component class.

export class ModifyInvalidRowGeneralComponent {
    public fields: FIELDS;
    // ...

    // takes parameter of type FIELDS enum
    public validate(field: FIELDS): boolean {

And in your html:

 [ngClass]="{'error':validate(fields.COUNTRY)}"

answered Aug 21, 2017 at 15:55

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

Collectives™ on Stack Overflow

Pass enum value to angular 2 component

3 Answers 3

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Linked

Related