Exploring Reactive Forms in Angular

We will learn how to implement form & form validation using reactive forms in Angular. We will learn to implement the built-in form validations and the asynchronous custom validators.

Building Scalable and Secure Web Apps with Angular & Firebase Data Connect

In the world of modern web development, scalability, security, and seamless integration are key. Enter Firebase Data Connect, Firebase’s first relational database, which brings the power of Cloud SQL for PostgreSQL and type-safe SDKs to your mobile and web applications.

In this talk, we’ll explore how to leverage Firebase Data Connect to build secure, scalable, full-stack web apps using Angular. We’ll dive into its key features, including type-safe SDKs, GraphQL integration for efficient schema, query, and mutation management, and real-time data integration to enhance user experience with up-to-date information. Additionally, we’ll cover robust authentication mechanisms provided by Firebase Authentication and the scalability ensured by Cloud SQL for PostgreSQL.

Through a live demonstration, you’ll see how easy it is to integrate these features and craft a streamlined, efficient development experience. Whether you’re an Angular developer exploring new backend solutions or seeking to build scalable apps with Firebase, this session will equip you with practical insights and live demos to kickstart your journey.

GitHub repo - https://github.com/AnkitSharma-007/angular-firebase-data-connect

Exploring Blazor forms and form validations

We will learn how to create a form in a Blazor app. The form will support built-in client-side validations with the help of data annotations. We will implement a custom client-side validator for the form. We will also add a custom form validator component for business logic validation along with the client-side validator.

You can see a GIF showing the app in action at https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Creating-a-Student-Registartion-Form-in-Blazor-WebAssembly.gif

Create A Multi-Language Translator Using Blazor And Azure Cognitive Services

We will create a Multilanguage translator using Blazor and the Translator Azure Cognitive Service. The application will accept the text to translate and the target language as the input and returns the translated text and the detected language for the input text as the output. This app will support more than 60 languages for translation.

We will cover the following concepts:

1. What is Azure Cognitive Services?
2. What is Azure Translator Service?
3. Create the Azure Translator Cognitive Services resource
4. Create and configure a Blazor Server-Side application
5. Create the Blazor UI Component
6. Execution Demo

You can see a GIF showing the app in action at https://i0.wp.com/ankitsharmablogs.com/wp-content/uploads/2020/02/BlazorTranslator.gif

Internationalization in Angular

We will learn how to make our Angular app available in different languages using Internationalization(i18n). This talk will walk you through the process of Angular i18n by using their very much improved built-in I18n module. For the purposes of this session, we will create a sample Angular application and serve it in three different languages – English, French, and German. We will also deploy this app on Firebase to see how i18n works in the production environment. We will use Angular material for styling the app.

We will learn about Angular localize package which was released as part of Angular 9.

The talk is roughly based on my article https://phrase.com/blog/posts/angular-9-tutorial-on-i18n/

Create An Optical Character Reader Using Blazor And Azure Computer Vision

we will create an optical character recognition (OCR) application using Blazor and the Azure Computer Vision Cognitive Service. Computer Vision is an AI service that analyzes content in images. We will use the OCR feature of Computer Vision to detect the printed text in an image. The application will extract the text from the image and detects the language of the text. This app will support 25 different languages.

We will cover the following concepts:

1. What is Azure Cognitive Services?
2. What is Computer Vision?
3. Create the Azure Computer Vision Cognitive Service resource
4. Create and configure a Blazor Server-Side application
5. Create the Blazor UI Component
6. Execution Demo

You can see a GIF showing the app in action at https://ankitsharmablogs.com/wp-content/uploads/2020/02/BlazorComputerVision.gif

WorkShop : Blazor - Zero to Hero in 100 minutes

This workshop will provide a hands-on knowledge on Blazor framework. The first 20 mins of the workshop will cover the theoretical part where I will talk about Blazor and its features, how Blazor runs .NET in Browser and what are the advantages of using Blazor In the next 100 mins I will explain how to create a full stack web application using Blazor, EF Core and SQL Server. The complete application will be built in the workshop with live coding.

I will cover the following key features in this workshop
• Authentication in a Blazor application
• Forms and form validation
• JavaScript Interop

Create Smart Angular Apps Using Azure Computer Vision

we will create an optical character recognition (OCR) application using Angular and the Azure Computer Vision Cognitive Service. Computer Vision is an AI service that analyzes content in images. We will use the OCR feature of Computer Vision to detect the printed text in an image. The application will extract the text from the image and detects the language of the text. This app will support 25 different languages.

We will cover the following concepts:

1. What is Azure Cognitive Services?
2. What is Computer Vision?
3. Create the Azure Computer Vision Cognitive Service resource
4. Create and configure an Angular application
5. Integrate the Azure computer vision cognitive service with the app
6. Execution Demo

I have already published an article on the same topic.

https://www.freecodecamp.org/news/how-to-create-an-optical-character-reader-using-angular-and-azure-computer-vision/

Creating Full-Stack Web Apps Using .NET and Angular

We will create a full-stack application using Angular, .NET, and EF Core. We will create a sample Employee Record Management System and perform CRUD operations on it. The app will have a form to accept the user inputs with the required client-side validations. We will provide the option to search the employee records based on the employee's name.

We will cover the following concepts in this talk:

1. Creating the DB objects using SQL Server
2. Scaffolding the Model using EF core DB first approach
3. Creating the RESTful web API with .NET using the repository pattern
4. Implementing Dependency Injection in the web API
5. Creating the front-end of the application using Angular

GitHub: https://github.com/AnkitSharma-007/angular-with-dotnet5

Blazor: Client-side development with C#

Main Idea:
Blazor is an open source .NET web framework that allows us to create client-side applications using C#/Razor and HTML. In this session I will explain the core concepts of Blazor framework. The audience will learn What is Blazor, how it works and what are its’ features. I will also explain how to create and execute a web application using Blazor with the help of live code demo.

Topics:
1. What is Blazor?
2. What is WebAssembly?
3. How Blazor works?
4. How does Blazor run in the browser?
5. Features of Blazor
6.Create and execute a Blazor application with live code demo

Conclusion:
This session will help the audience to understand the basics of Blazor framework. They will learn how Blazor allows us to write and execute C# for client-side web application. They will also understand the application development process by seeing a live code demo of a web app created with Blazor.

Create a Blogging App with Angular and Firebase

We will create a blogging app, using Angular and Google Cloud Firestore.
The attendees will learn how to create a real-world application using core Angular concepts.
At the end of this workshop, each attendee will have their blogging app created and hosted on Firebase.

Creating a real-world application is the best way to learn any technology rather than just reading blogs or watching tutorial videos. Therefore, I have prepared this session in such a way that the attendees can learn right from creating a blank Angular app to making a full-fledged real-world application. We will cover all the major features of Angular and the attendees will learn how to create a real-world application using Angular concepts.

We will explore the following Angular concepts in this workshop:

1. Using Cloud Firestore with an Angular application
2. Angular material and Bootstrap
3. Template-driven forms
4. Google authentication using Firebase
5. Implementing auth-guards in Angular
6. Creating custom pipes
7. Hosting an Angular app on Firebase

This sample application is hosted at https://blogsite-30c69.firebaseapp.com/

Prerequisites for this workshop :
1. A gmail account to login into Firebase
2. Attendees should set up Angular development environment by installing the following free software :
- node.js (LTS Version)
- Visual Studio Code
- Angular CLI

Securing Angular App Using JWT

Ever increasing cyber-attacks makes security an indispensable part of a modern web application. This session will explain about the importance of web security and how can we secure an Angular application. We will explore the concepts of JWT and learn how to implement JWT based authentication in a full stack application created using Angular and ASP.NET Core.

We will explore the following concepts in this talk.
1. Web Security – What and Why
2. What is JWT?
3. Structure of JWT
4. How do JWT work?
5. Implementing JWT in an Angular app using .NET core
6. Code demo

This talk will be based on my article at https://ankitsharmablogs.com/policy-based-authorization-in-angular-using-jwt/

Building modern web apps with Angular and Firebase

We will learn how to create a rich web application using Angular and Firebase. We will create an employee management system that uses Angular on the front end and Google Cloud Firestore as a database. The application will have Google-based authentication configured with the help of Firebase. We will also use Bootstrap to style the application.
We will cover the following concepts in this talk.
• Creating a project on Firebase
• Configuring Google Cloud Firestore database
• Adding Firebase project to Angular application
• Template-driven form
• Implementing auth-guards in Angular
• Configuring Google authentication for our application
• Deploying the app on the Firebase

How can you create strictly typed Reactive forms with Angular?

We will learn how to create a strictly typed reactive form which is introduced with Angular 14. We will implement the in-built and custom async validations to the form.

We will cover the following concepts:
- A general overview of Reactive forms
- Create a model and bind it to the form controls
- Built-in form validations
- Custom form validations
- Execution Demo

Harnessing Angular Signals: Reactive Programming for the Modern Web

As Angular continues to evolve, signals are transforming how we think about reactivity and state management. In this talk, we'll explore the fundamentals of Angular signals, demonstrating their potential to simplify reactive programming. You’ll learn how signals enable efficient data flow and more predictable UIs, while reducing boilerplate and improving performance. Whether you’re a seasoned Angular developer or just beginning, this session will equip you with practical techniques and patterns to integrate signals seamlessly into your applications. Let’s dive into the future of Angular reactivity!