Eléments html personnalisés et Angular

Question

Je dois intégrer des éléments tiers dans mon application Angular (4.3.x). Ils ressemblent à:

<any-widget id="123"></any-widget> 

Je l'ai déjà fait Angulaire produire aucune erreur en ajoutant schemas: [ CUSTOM_ELEMENTS_SCHEMA ] à app.module.ts. Mais je ne peux rien faire d'extraordinaire. J'ai essayé:

<any-widget [id]="id"></any-widget> 

et

<any-widget id="{{id}}"></any-widget> 

Mais id n'est pas affiché du tout. Une idée de comment faire ce travail?

Answer 1

<any-widget [attr.id]="id"></any-widget> 

ou

<any-widget attr.id="{{id}}"></any-widget> 

Sans attr. tente angulaire de se lier à une propriété d'un élément HTML, ou un @Input() d'une directive angulaire. Si aucun de ceux-ci n'existe avec le nom utilisé, vous devez utiliser la liaison d'attribut.