Assign @Input() object properties to the component

Question

I am having an Angular component with a single @Input element:

@Input('member') member: Member;

the Member interface looks like this:

export interface Member {
  name: string;
  surname: string;
  display_name: string;
  positions: number[];
  image_url: string;
  email: string;
  address: string;
  office_phone: string;
  phone: string;
  whatsapp: string;
  skype: string;
}

I want to access the member fields from html template like {{ name }}, {{ email }} etc... wtihout prefixing each of them.

For example, I do not want to access these properties like {{ member.name }}, {{ member.email }}, I like the shortcut version.

The component will have only a single @Inpurt property - the Member object.

Is there a nice way to reassign the member. properties to the Angular component? Or any other way to use a shortcut, I mensioned above?

user4676340 · Accepted Answer · 2019-03-19 11:04:04Z

4

Not a good practice, but you should spread that object into your component :

ngOnInit() {
  Object.entries(this.member).forEach(([key, value]) => this[key] = value);
  // OR
  Object.assign(this, this.member);
}

You can now use them as if they were class properties. Be warned that it will override any other property with the same name on your class, so you should be careful about that solution and instead use member.XXX.

answered Mar 19, 2019 at 11:04

user4676340

Sign up to request clarification or add additional context in comments.

3 Comments

Sergej Over a year ago

there will be no other properties, because the object is only for the member object preview. But the @Input() object may change, so it should be reassigned in ngOnChanges(). I thought there is a better way for this.

user4676340 Over a year ago

Well replace OnInit with OnChanges ! And no, there's no better way, unless creating all the properties by hand but that's all : in the template, you only have access to class members, so you have to either use the member property, or create a new property for evey key of member.

user4676340 Over a year ago

@Sergej but you do have several ways of doing so, like decorators, directives and so on. But the easiest and cleanest one still is this one.

Collectives™ on Stack Overflow

Assign @Input() object properties to the component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related