How to write complex Typescript object in Angular HTML attribute

Question

How does one write HTML to populate a complex @Input parameter in Angular?

If I have an Angular Component like this:

@Component({
  selector: 'app-one',
  templateUrl: './one.component.html',
  styleUrls: ['./one.component.css']
})
export class OneComponent implements OnInit {

  @Input() data: MyCustomType;
...

export class MyCustomType {
  id: string;
  value: number;
}

Can I write HTML to populate it?
Something in the lines of:

<app-my data="{'id':'a','value':1}></app-my>

There is no problem populating it through Typescript, as is the normal case, but in this case I want to populate it from HTML alone.

Blind Despair · Accepted Answer · 2020-02-24 11:43:39Z

2

You have to use data binding syntax like so:

<app-my [data]="{'id':'a','value':1}"></app-my>

When using this syntax you can do various javascript operations, e.g. creating object, calling methods etc. Of course only with what is available on component class.

answered Feb 24, 2020 at 11:43

Blind Despair

3,3253 gold badges24 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

How to write complex Typescript object in Angular HTML attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related