⭐ Please help by giving this repository a star. It takes seconds and help thousands of developers! ⭐

I Love .NET Star Request

🤝🏿 Please share with the community! 🤝🏿

As an open-source project without funding, I cannot afford advertising I ❤️ .NET in a typical way. Instead, the project relies on community interactions. Please consider sharing a post about I ❤️ .NET and the value it provides. It really does help!

Blazor WASM Components

Blazor WASM Components

blazor

22 Articles

 Improve

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

  1. What is Components in blazor?
  2. How to create a component in blazor?
  3. Summary

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.

what is components?

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,

  1. Right click Pages folder or any folder expcet wwwroot folder inside your project.
  2. Click on Add.
  3. Click on Razor Component.
  4. Name your Component.
  5. Now remove the template code inside your component and add your html.
  6. That's it you created your first component
  7. 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.

  • Blazor
  • Components