Blazor WASM Components
blazor
27 Articles
In this article, we will learn about Components
in Blazor WebAssembly. We will also learn
how to create a component
and use it in our Blazor application. We will also see a
live demo
of how to create a component and use it in our Blazor application.
Note: If you have not done so already, I recommend you read the article on Blazor Wasm Introduction.
Table of Contents
What is Components in blazor?
A 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
case the nested component (Dialog.razor)
becomes the Child Component
and the
containing component (Index.razor)
becomes Parent Component
.
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
Search
Component, Social
Component and Theme
Component.
How to create a component in blazor?
To create a component you need to,
- Right click
Pages
folder or any folder expcetwwwroot
folder inside your project. - Click on
Add
. - Click on
Razor Component
. - 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
<YourComponent />
Code Sample - Blazor WASM Logo Component
Demo - Creating a Component
Scenario - Let's try rendering the above logo component from I ❤️ .NET
Summary
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.