Как написать сложный объект Typescript в атрибуте Angular HTML

Question

Как написать HTML для заполнения сложного параметра @Input в Angular?

---

Если у меня есть Angular Компонент, подобный этому:

@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;
}

Могу ли я написать HTML для заполнения?
Что-то в строках:

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

Нет проблем с заполнением через Typescript, как это обычно бывает, но в этом случае я хочу заполнить его только из HTML.

Answer 1

Вы должны использовать синтаксис привязки данных следующим образом:

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

При использовании этого синтаксиса вы можете выполнять различные операции javascript, например, создание объекта, вызов методов и т. Д. c. Конечно, только с тем, что доступно в классе компонентов.