Blazor WASM Components
In previous article, we learnt what is blazor. if you are new to blazor, I strongly recommend you to check out my article on Blazor Wasm Introduction. If you are familiar with blazor, you can skip introdution and continue with this article.
Table of Contents
What is Components in blazor?
Blazor Component is a reusable piece of UI in a Blazor application. This helps you to wrap html elements and their events into a reusable UI
code blocks. You can nest components in a component. Let me show you a simple example of a Blazor component.
You can see
Dialog.razor component which contains a button and on click of it
OnYes event will be invoked.
We can also nest component like how we have
Dialog.razor component inside
Index.razor component. In this
nested component (Dialog.razor) becomes the
Child Component and the
containing component (Index.razor) becomes
A Blazor application is full of components. The
App is the root component which contains Router Component which again contains
Found Component, etc. I ❤️ .NET has
Header component which contains
Social Component and
How to create a component in blazor?
To create a component you need to,
- Right click
Pagesfolder or any folder expcet
wwwrootfolder inside your project.
- Click on
- Click on
- Name your Component.
- Now remove the template code inside your component and add your html.
- That's it you created your first component
- Now you can use your component just like any other html element by adding
Code Sample - Blazor WASM Logo Component
Demo - Creating a Component
Scenario - Let's try rendering the above logo component from I ❤️ .NET
In this article, we learn't about what is component in blazor and how to create your own component and experienced a live demo. We also listed few components used in i love dotnet. In our next article let's learn about how to pass data to child components from parent components.