Master Full-Stack Development Fast: .NET 8, EF Core, Angular 17 & RxJS

Welcome to an in-depth tutorial on building a powerful Full-Stack CRUD (Create, Read, Update, Delete) application! In this video, we'll guide you through the process of creating a web application using cutting-edge technologies.

We'll start by harnessing the frontend capabilities of Angular 17, exploring its latest features and enhancements for a seamless user experience. Moving on, we'll dive into the backend using .NET 8, a versatile and high-performance framework. Learn to set up a Web API and handle server-side operations efficiently.

Our application's data layer will be powered by Entity Framework (EF) Core, a flexible and extensible Object-Relational Mapping (ORM) framework. Discover how to integrate EF Core seamlessly with a SQLite database, offering a lightweight yet powerful storage solution.

Throughout the tutorial, we'll cover essential concepts such as data modeling, API development, and frontend-backend communication. By the end of this video, you'll have a comprehensive understanding of building a Full-Stack CRUD application, equipped with the latest tools and best practices.
Whether you're a seasoned developer or just getting started, join us on this coding journey to elevate your skills and create a modern, efficient Full-Stack CRUD application with Angular 17, .NET 8, EF Core, and SQLite.

Chapters
0:00 Introduction
0:20 Environment Setup for .net 8 web development
1:20 Visual Studio Code Setup for .NET Web Api developement
3:18 Project Setup
3:46 .Net web api CLI project setup
3:55 Material Icon Vs Code Icon Extension Setup
5:16 Creating Dotnet Web API Model Class
5:24 Creating Student Model
6:46 Createing AppDbContext
7:22 Install .Net ef core packages
7:38 Install .Net ef tools
8:25 Add DbContext Service Container
8:55 Install Sqlite package
9:35 Configure Sqlite Database connection string
9:43 Add Student Controller
12:35 Add Controller Service Container and map controller
13:40 Add Student in DbSet
13:56 Create first migration
14:15 Install ef core tool globally
17:08 HttpGet List of students
18:37 HttpPost Create new student
21:36 HttpGet Get Single Student By Id
23:46 HttpDelete Delete Student By Id
26:50 HttpPut Edit Student By Id
32:28 Angular 17 local environment setup guide
32:33 Node js setup for angular 17
33:23 Angular17 CLI Setup
34:20 Angular 17 vs code extension setup
35:28 Angular 17 project setup
36:58 Angular 17 tailwindcss setup
38:55 Tailwindcss vs code extension setup
39:26 Student standalone component generate using cli
41:32 Angular 17 routing setup for student component
42:07 Import routerlink in standalone component
42:40 Create student service using cli
43:26 Create Student Interface
45:15 Get list of student using http client
46:25 Inject student service in component
48:35 Enable CORS in .NET 8 and angular
50:28 Iterate students array observable with @for loop
50:44 Import async pipe in component
1:05:40 Create student form component using cli
1:11:40 Configure reactive student form
1:13:13 Add react form in student form component
1:14:29 Display form value in JSON format inside component
1:20:50 On Destroy component lets unsubscribe observable
1:22:11 Reactive form validation
1:22:49 Display validation message in template
1:24:27 Activated router to get student id params form url
1:25:31 Get single student service and patch value for edit
1:27:38 Angular reactive form patch value for editing
1:28:00 Conditionally render add or edit form text
1:32:00 Add edit student form routing
1:35:40 Ng Toaster for beautiful notification message
1:36:50 Implement delete method in angular
1:42:55 Implement edit operation in angular
1:45:46 Programatically navigate to home page after edit success
crud app with angular 17 tailwindcss .net 8 ef core
use tailwind with angular
angular .net core example
c# angular tutorial
ef core sqlite example
.net core sqlite entity framework
.net core sqlite example
ef core sqlite tutorial
rxjs angular
how to fetch data from api in angular
crud operation in angular with web api
angular 17 full tutorial
sqlite ef core example
sqlite ef core
.net 8 web api code first approach
angular 17 course
ef core sqlite connection string
.net entity framework sqlite sqlite net core
sqlite .net core entity framework
.net core sqlite
sqlite .net 8
modern angular
angular 17 tutorial
angular 17 app config
angular 17 tailwindcss
tailwind angular setup
angular tailwindcss components
angular and tailwindcss
add tailwindcss to angular
navigatebyurl in angular example
angular cli tailwind
#angular17 #dotnet8 #fullstack_crud

[motivationcloned]

The best tutorials i have ever seen in angular 17 with .net 8 web API !!!

[a-gogtheabacha]

Excellent Bro, Appriciate your videos, wish u all the best

[mahdiandalib]

thx man, i hope you create more angular tutorials and create a complete web app using angular

[uefpwtk]

Thank you for amazing tutorials please make another with react 18 👏👏

[Ngochieu]

Very good Sir, Can you make video to building HomePage with Login Register and keep all language . I will appreciate

[mdsafikulislam]

Can we use Other Databases like SQL Server, MySQL, MongoDB etc?
Please give an example with SQL Server.
That's why I loved this tutorial because of combination of Angular 17 & EF Core.

[JiangFu]

Thank you sir for this tutorials , When i npm ngx-toastr, I add or edit student then show toast success, but console have a error like this

"NG05105: Unexpected synthetic property @flyInOut found. Please make sure that:
- Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.

I google error message, But i can't find how to fix it in standalone , Have any idea to help, thank you !!

[ijrhffc]

Can you provide the source code, Thank you

[ligerpost]

Sir please make a project with ddl, cbl, rbl crud operation in .net core web api with angular

[persianrom]

hi, good job but i have an error with tailwindcss " warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration." can you please say whats wrong ? tailwindcss dosnt work !

[CodeSample]

Thank you very much. Can you please share the GitHub source code link?

[codelover]

make a video on deploy angular 17 in iis server on windows 10 or server pc

[mdsafikulislam]

Dear Brother, please add Authentication & Authorization System in your existing CRUD Application.
Thanks in advance!

[umerfarooq]

Which server are you using? Is it free or paid?

[tomail]

please, I have question: the best way for Web API, Angular 17 is VsCode or Visual Studio 2022?