Passing Data to Stencil Component using @Prop()

In this Passing Data to Stencil Component using @Prop() article, we are going to learn how to pass data to component using @Prop() property

Before going to read this article, you are recommended to read this article, if you didn’t read it.

Here is an example to pass data,

Passing Data to Stencil Component using @Prop() :

<br>import { Component,Prop } from '@stencil/core';<br><br>@Component({<br>    tag: 'my-component'<br>})<br><br>export class MyComponent {<br><br>    @Prop() subject:string;<br><br>    render() {<br>        return (<p>I am learning {this.subject}</p>)<br>    }<br><br>}

Note that we import Prop from @stencil/core.
We can get value of the property using { }(curly braces), In our example we have used {this.subject}.
it will return subject value.

Here is how we can pass data from element

<br><my-component subject="stencil"></my-component>

Any property decorated with @Props() is also automatically watched for changes. If a user of our component were to change the element’s name property, our component would fire it’s render function again, updating the displayed content.

Now when we run this project we will get the following output:

This way we can pass data to component.

Thanks for reading this article. 🙂