Blazor Custom Components
Tags: blazor, webcomponents, csharp, dotnet
Published: 2022-02-23 02:35:55

In the last post we showed how to create a Blazor Web App. Today we will look into creating a custom component.
![Add a Razor Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9i61bfg2eitfqqo9z3y.png)
 
Right click on the Shared folder, select Add/Razor Component. Take the default name of Component.razor for now. Here's a trick, add a CSS style sheet using the same naming convention. Component.Razor.css and look what happens:
![adding a stylesheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zofwtexuvfbm9ren6zai.png)
 
It is placed, under the Razor component definition.

![Under the component definition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pu05434os0mqzwjnhy6e.png)
 
A great example of convention over configuration.

We want to do this so we can influence the style of just our component.  This is the markup we put in.  It's a DateTime component now.

```html
<div>
@DateTime.Now.ToShortDateString()
</div> 
```
## Using the new Component 
```html
    <main>
       ...skipping the top part
        <Component></Component>
        <article class="content px-4">
            @Body
        </article>
    </main>
```
![Showing the datetime component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upig3mfjt0iw7c8i8u47.png)
 
## Renaming a Component
We are easily able to rename the file, but the prior Component tag does not follow the rename.

This forces us to manually make the change. Like this:
```html
 <main>
       ...Top part left out
       <DateTime></DateTime>
        <article class="content px-4">
            @Body
        </article>
 </main>
```
Too bad the refactor also didn't correct the prior HTML markup, but Visual Studio does have a Replace in Files utility that will. 

## Rebuilding The Solution
CS0117 'DateTime' does not contain a definition for 'Now'
![DateTime does not contain a definition for Now](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78az979g1qsv9cjg9ry1.png)
 
That is odd, because until recompiled, there was no error and it showed in the local instance of the page when refreshed.

The simple fix is to include the namespace:
```html
<div>@System.DateTime.Now.ToShortDateString()</div>
```
TS6053: Blazor.webassembly.js not found error.
This error was caused by the index.html file, on this line:
```html
 <script src="_framework/blazor.webassembly.js"></script>
```
To fix this, we added this line into the Program.cs file
```cs
using Microsoft.AspNetCore.Components.WebAssembly;
```
One last thing, we had to rename our DateTime component to MyDateTime because it conflicted with Syste.DateTime.

Once we did that everything compiled at the solution layer.

## The Solution's Debug Compile Output

![Debug Compile Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djmwjsy09yrnkw734eo2.png)
 
 
## MyWebAssembly Artifacts
![MyWebAssembly Artifacts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eveeyfaxyvvsrkhbybdg.png)
 
## MyWebAssembly Object Browser
![Object Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wo7dunxqgqmplejugco9.png)
 
All very cool but "How do we reuse these components in other solutions?"

We'll figure that out in next article.