Angular 7, Enum and Input property binding

Question

The issue is when binding an enum with a view template using @Input, the enum is being resolved to undefined. The component:

enum FormAction {
  Insert,
  Update
}    
@Component({
  selector: 'app-member-editor',
})
export class MemberEditorComponent implements OnInit {
  modes = FormAction;

  @Input('mode') mode: FormAction;

  ngOnInit() {
    console.log(this.mode);
  }
}

The view template:

<app-member-editor [mode]="modes.Insert"></app-member-editor>

The console:

Cannot read property 'Insert' of undefined

so you should define ```modes``` in another component and use it. — Fateme Fazli, Nov 27 '18 at 06:46
It works. Please make it answer and explain why it should be put to parent component. — M. Ko, Nov 27 '18 at 06:49

Muhammed Albarmavi · Answer 1 · 2018-11-27T07:13:46.070

Declare a component property type to FormAction doesn't set the property value still the property value is undefined just inlinze the mode propert

AppComponent

  modes = FormAction.Insert;

Template

 <app-member-editor [mode]="modes.Insert"></app-member-editor>

or you can use get property to access to FormAction enum

AppComponent

  get modes() {
    return FormAction
  }

Template

  <app-member-editor [mode]="modes.Insert"></app-member-editor>

modes property has to be declared in the AppComponent not in the MemberEditor Component as my example in the template of appComponent you have access to all the property of the AppComponent like you are in the scope or context of the AppComponent the way you don't have access to property in the MemberEditor Component

But it's possible if you create a template variable (Not RECOMMENDED)

<app-member-editor [mode]="mEditor.modes.Insert" #mEditor></app-member-editor>

demo

score 2 · Accepted Answer · answered Nov 27 '18 at 06:59

you are trying to send modes.Insert from parent to child component in parent html, and we just can access the parent public property in parent html not the child properties. so you should first define it in parent component and use it in it's html and send the defined data from parent to child.

in parent not in child:

public modes = FormAction;

Angular 7, Enum and Input property binding

2 Answers2