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. 🙂
Also Read :
- Email Validation in Angular
- Angular Multiple Image Upload with Preview Example
- Angular Multiple File Upload Example
- Angular Material Card Example
- Angular Material List Example
- Top 10 VS Code extensions