Overview

During this webinar, we took a look at how to build Blazor custom elements in a Blazor WebAssembly app. We saw how to add our Syncfusion Blazor components inside a Blazor custom element and render them from an Angular project template. We also looked at the new features added in the 2021 Vol. 4 release to our Blazor and Essential JS 2 components.

Agenda

  • What’s new in Blazor for the 2021 Volume 4 release.
  • What’s new for the web in the 2021 Volume 4 release.
  • Build a Blazor custom element and use it with any web framework.

What’s New in Blazor for 2021 Volume 4 

  • .NET 6 support.
  • Breadcrumb component moved from preview to production-ready.
  • New Icon component moved from preview to production-ready.
  • Signature control now has GUI to draw text or a signature digitally.
  • DataGrid control allows you to select multiple rows or cells by dragging.
  • Charts control features:
    • Grouping in a column chart.
    • Right-to-left charts.
    • Reversed legend.
    • Legend wrap.
  • TreeGrid control has adaptive view support.
  • Diagram control features:
    • Touch gestures.
    • Tooltip.
    • Print and export.
  • Scheduler control features:
    • Custom month view.
    • Time zone display name.
    • Excel export customization.
    • Minimum event duration.
    • Spanned event.
  • Rich Text Editor control now has Enter key customization.
  • Tabs control as an active tab in the pop-up.
  • Kanban control now has complex data-binding support.
  • Gantt Chart control offers predecessor support for parent tasks.
  • TextBox control has validation on key press.
  • File Manager library now offers a sortable navigation pane.
  • Word Processor control has Word 2013 justification.

What’s New for Essential JS 2 in 2021 Volume 4

  • Breadcrumb component:
    • Moves from preview to production-ready.
    • New overflow modes.
  • Charts component features:
    • Y-axis label rotation.
    • Grouping in a column chart.
    • Right-to-left charts.
    • Reversed legend.
  • Maps component gains a LineString geometry type.
  • Scheduler component features:
    • Custom month view.
    • Time zone display name.
    • Excel export customization.
    • Minimum event duration.
    • Spanning events.
  • TreeGrid component offers adaptive view support.
  • Tabs component has an active tab in the pop-up.
  • Pivot Table component features:
    • Grand total placement.
    • Notification of UI actions.
  • TreeView component now has text wrap support.

Build Blazor Custom Elements and Render Them Dynamically from Other Web Frameworks

Visual Studio Extensions 

  • Visual Studio extensions:
    • .NET 6.0 support added to the Blazor Template Studio, ASP.NET Core.
  • VS Code extensions:
    • .NET 6.0 support added to the Blazor VS Code extension (Sync Blazor Project Template).
    • Angular and React templates updated to the latest Angular and React versions in the Syncfusion Web Template Studio Visual Studio Code extension.
  • Sample editor:
    • VS 2022 and .NET 6.0 support provided for Syncfusion ASP.NET Core sample creator.
    • VS 2022 support for MVC sample creator. 

Prerequisites to Work with Blazor Custom Elements

Q&A

How do you set up the proxy file for custom elements when you use it in production and not the localhost?

We suggest you read these Angular documents on setting up proxy calls: https://angular.io/guide/build#building-and-serving-angular-apps  https://angular.io/guide/deployment#production-servers

We are using Blazor WebAssembly with the Syncfusion Dropdown, Radio Button, and Checkbox controls and facing lots of delay with dropdown selections. There’s a delay seen in all the controls used.

[Ticket-365097] The Syncfusion Blazor WebAssembly Slow performance of multiple UI Controls | Syncfusion Support

We created a demo including the specific components mentioned in the above ticket, but we are not experiencing any performance issues like a delay in rendering or while interacting with those components. For your reference, we are providing you with an example here. Kindly check the example and let us know if you have any more details on this.

Is it really necessary to use two IDEs to achieve this? Or can I use only VS 2022 or 2019 and still achieve the same result? I mean, could this be achievable using only one IDE?

You need two IDEs to run this. You should run the Angular project in one IDE and the Blazor project with custom elements in another IDE like VS 2022. Leave the Blazor project to run in the background when you try to execute the Angular project so as to establish an uninterrupted communication between them.

Can we insert a saved signature image for the Signature component?

Yes, it is possible to insert an already-saved signature as base64 into our Blazor Signature component. Please look at how in this example.

Is the Signature component touch-enabled?

Yes, our Blazor Signature component is touch-enabled.

Summary

During this webinar, we took a look at how to build Blazor custom elements using Syncfusion Blazor components and render them from an Angular project template. We also looked at what’s new in the Essential Studio® 2021 Volume 4 release for the Blazor and JS 2 suites. We hope you enjoyed this webinar and please keep an eye out for our future Blazor webinars.