A GOOD way to use JavaScript Libraries in Blazor | SharpLines

Using JavaScript libraries inside Blazor can be an intimidating task. This video demonstrates, what I feel is a good way to use JavaScript libraries, by harnessing the power of Blazor components.
This video will show you how to convert 2 JavaScript libraries into Blazor components.

Source Code ➔ https://github.com/CSharpLines/Blazor-JavaScript-Libraries-Demo

0:00 Intro
0:28 Creating a Blazor WASM Project
0:37 Choosing a JavaScript Library (Noty)
0:50 Using Node Package Manager to get Noty
1:04 Moving files to wwwroot folder
1:25 Creating an interpolate.js file
2:46 Creating classes to use on the Noty Razor component in C#
4:12 Creating a Notification model
4:52 Creating a mock database using a static class
5:15 Creating the Noty Razor component
6:22 Calling the JavaScript method from our Razor component
7:47 Overview of the Razor Noty component
8:10 Showing the notifications
8:45 Creating notifications on button click
9:48 Demonstration
10:05 Second JavaScript Library Example (Quilljs)
10:39 Installing quills with Node Package Manager
10:44 Moving files to wwwroot folder
11:13 Creating the Quill JavaScript interpolate function
11:21 Creating the Quill Razor component
12:53 Writing the Quill JavaScript interpolate function
14:03 Calling the Quill JavaScript method from Quill Razor Component
14:47 Creating classes to use on the Quill Razor componet
15:20 Passing in the Qull component parameters to the Quill JavaScript function
15:39 Replacing textarea with Quill Razor component
16:01 Quill example
16:12 Displaying saved values in the Quill Razor component
17:24 Bind and Save the model value to the database using the Quill Razor component
17:42 Using Actions to save Quill Razor component editor value
17:51 Calling DotNet Instance methods in JavaScript
18:48 Sending the editor content to the Quill Razor component
19:40 Invoking the Text Change action in Quill Razor component
20:00 Consuming the event in the Edit Document component
20:35 Actions demonstration
20:57 Making the component self-contained with Reflection
21:23 Removing the action from the Quill Razor component
21:33 Setting up the Quill Razor component for Reflection
22:09 Passing in the new parameters
22:26 Reflection demonstration

#webdevelopment #blazor #webassembly #javascript #dotnet #csharp