CODEWITHSUNDEEP
angular
LosManos
LosManos

Reputation: 7692

How to write complex Typescript object in Angular HTML attribute

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.

Upvotes: 1

Views: 347

Answers (1)

Blind Despair
Blind Despair

Reputation: 3295

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.

Upvotes: 2

Related Questions