Angular › Angular Elements (Web Components)

How do you pass data into an Angular Element from outside, such as from plain HTML or JavaScript?

Intermediate

Answer

You can pass data into an Angular Element using regular HTML attributes, which map to the component's inputs, and Angular Elements automatically converts these attribute values into the correct format. You can also set properties directly on the element using plain JavaScript.

// As an HTML attribute
<my-widget title="Welcome"></my-widget>

// Or set directly with JavaScript
const widget = document.querySelector('my-widget');
widget.title = 'Welcome';

Real-world example A marketing site embeds a product recommendation widget built as an Angular Element, passing in a specific category name through a simple HTML attribute without writing any Angular specific code themselves.

Common follow-ups: How do you listen for a custom event emitted from an Angular Element?;What happens if you pass a complex object as an attribute instead of a simple string?

Data Binding;Components & Templates