[POC] ANGULAR with BLAZOR WEB-COMPONENTS

This repository showcases the integration of a Blazor WebAssembly Library project used as a Web-Component in the Angular App

---

Table of Contents

• Pre-requisites
• Create New Blazor Library for a Specific Component
• Integrate Library Component into TR.BlazorWasmWebComponent
• Integrate Angular App with Blazor Published Components
• Using BlazorComponents with Attributes
• Parent-Child component approach

Pre-requisites

Tool	Version
VS Code	Latest
Visual Studio 2022	Latest
Angular CLI	18.2.3
Node	20.17.0
Package Manager	npm 10.8.3

---

Create new Blazor Library for a specific component

1. Navigate to the TR.BlazorComponentLibraries directory in the command line and run the following command:

   • dotnet new razorclasslib -o CommentboxComponentLibrary
   • Replace CommentboxComponent with the name of your component.

2. Open the Library project in Visual Studio 2022 and rename _Component1.razor to CommentboxComponent.razor.

3. Add your page route, div, style, and code for this Razor component. Ensure the page route is unique.

4. Save your Razor page and build the solution in Release mode.

5. This will generate the DLL and other binaries at \bin\Release\net8.0.

---

Integrate Library component into TR.BlazorWasmWebComponent

1. Open the TR.BlazorWasmWebComponent solution in Visual Studio 2022.

2. Right-click on the project and select Add Project Reference.

3. Browse to your newly created component library DLL and click OK.

4. Open Program.cs and register the Library component as a CustomElement for Angular:

   • builder.RootComponents.RegisterCustomElement<CommentboxComponent>("commentbox-component");
   • Uncomment lines 12, 13, 14 for local testing.
   • Register component name should be same as the Razor page name created in the library project.

5. Open _Imports.razor and add the component's using directive.

6. Open App.razor and add this component as an AdditionalAssemblies under Router.

7. Build and run the project, navigate to the page's route (e.g., https://localhost:7105/commentbox).

8. Close the browser and comment out lines 12, 13, 14 of Program.cs again. (as we are not using this project as a self-hosted app)

9. Right-click the project and select Publish.

10. Click the Publish button in the Publish window.

11. After publishing, go to the published location and navigate to the wwwroot directory. Copy the folders _content and _framework.

---

Integrate Angular App with Blazor published components

1. Navigate to the src/assets directory of the TR.AngularBlazorClient project and paste the copied Blazor published folders.

2. Open the code in VS Code editor and add the Blazor component in the Angular app.

   • Component name added here should have exact same name as it was registered in the Program.cs with CustomElement.

3. Update the route to navigate to your component in app.routes.ts.

4. Run the following commands:

   • ng build
   • ng serve -o
   • App will be accessible at localhost:4200.

5. Navigate to your Angular route for your Blazor component to see it in action.

---

Using BlazorComponents with Attributes

1. Create a Razor page with a property or a complex object decorated with [Parameter].

2. From Angular, pass the attributes directly bound to the component or bind the complex object with the help of JS query selector.

Note:

• For an attribute binding directly to HTML, use kebab casing (e.g., Blazor StepCount becomes step-count in Angular).
• For a complex object binding via JS query selector, use camel casing (e.g., Blazor SetDetails becomes setDetails in Angular).

---

Parent-Child component approach

1. SharedModelLibrary: Class library containing the models & items which are shared between ParentComponentLibrary and ChildComponentLibrary.
2. ParentComponentLibrary: References SharedModelLibrary & ChildComponentLibrary.
3. ChildComponentLibrary: References SharedModelLibrary.
4. Main Blazor WASM: References all three libraries.
5. CustomElementRegistration: Custom element registration of ParentComponentLibrary is required for Angular consumption. ChildComponentLibrary registration is optional, if it is not directly consumed in Angular.