Search code examples
angularenumsangular7property-bindingview-templates

Angular 7, Enum and Input property binding

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
Solution

  • 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;