CRUD with Angular 14 & .NET 6 🚀 Web API, EF Core & SQL Server

🚀 Join the .NET Web Academy: learn.dotnetwebacademy.com
💖 Support me on Patreon: / _patrickgod
🚀 Get the .NET 8 Web Dev Jump-Start Course for FREE: dotnet8.patrickgod.com
🐦 Let's get social on Twitter/X: / _patrickgod
🔗 Let's connect on LinkedIn: / patrickgod
💻 GitHub: github.com/patrickgod/SuperHe...
Udemy Courses:
🚀 .NET Jumpstart Course: www.udemy.com/course/net-core...
🔥 Blazor Bootcamp: www.udemy.com/course/blazor-w...
🔥 Blazor E-Commerce Course: www.udemy.com/course/blazor-e...
Table of Contents:
00:00:00 CRUD with Angular 14 & .NET 6 🚀
00:03:08 Create the Angular 14 Application
00:08:24 Add the Super Hero Model to the Client
00:09:35 Generate an Angular Service
00:12:10 Implement a Table to Show the Hero List
00:16:32 Create the .NET 6 Web API Project
00:18:07 Add the Super Hero Model to the API
00:19:04 Add the Super Hero Controller
00:21:38 Call the Web API from the Angular 14 Client
00:27:29 Enable CORS (Cross-Origin Resource Sharing)
00:31:42 Add Entity Framework Core 6
00:37:10 Add the Connection String for the SQL Server Database
00:38:40 Install the EF Core Tools
00:40:54 Register the DataContext in the Program.cs
00:42:13 Run the Initial Migration using Code-First Migrations
00:43:23 Get Super Heroes from the Database
00:46:08 Implement Create, Update & Delete in the SuperHeroController
00:53:56 Build a new Component with Angular (Edit-Hero Form)
01:00:57 Add the Edit-Hero Form to the Parent Component
01:04:06 Implement Web Service Calls on the Client
01:07:11 Call the Service in the EditHero Component
01:09:32 Update the Super Hero Table
01:10:20 Final Tests of all CRUD Operations
🙏MANY THANKS TO THESE LOVELY PEOPLE:
Daniel Viveros
Mehmet Ali Ege
Winther
harry j
@Alaffer
Sam Catlow
Jim
Brian Williams
Gonzo
Jonas
Ariel Sartor
Andy Benson
@stevelikespies
Raphael Lukas
James Goforth
@williamdevine
Doug Nelson
Arif Hasanov
@kohji1712
@dlb78dlb
Thomas Korsgaard
FastTrak
Jeff Sager
Dan Moyer
AlgoMarket
Mennskr
Simon
Michael Mel
Hermann Rösch
Jim McNeal
Kieron
@mgrainger231
Gerrit Esmeijer
Axel
Kareem Skinner
Joaquim
Alain Legrand
Per Rieland
@prodrigu75
Greg
Brendan Maunder
Stageoner
Andrew Campbell
pascalditzfeld
PovilasSimanskas
Ameet Jayawant
jenö
Marco Otilli
Mark
l33ter
alibux
g.dassel
Luke Vincent
mrcl
Alain Legrand
Thomas Werner
István Csibor
Grant Burdon
@gianluigiconti
Gerrit Esmeijer
Illia
Németh-Pók István
Michael Mel
Marko Zdilar
GerryB
@DADA_universe
Domen Hren
@heroesch
Carey
Peter De Tender
Baris Keskin
@Big_Bear_27390
Mathias
walter e watkins
Günther Dassel
Axel
Josh
Daniel Huber
Fredric Adell
Juan Carlos
Manolis
Pajani
P.
Jonas Granlund
Bobby
Kristina
@xamarin007
#DotNet #Angular #PatrickGod

[@deja00]

I am onto one of your courses again! It's great that you share these small insights into your private life. It breathes some life into the whole thing. As usual, I think this tutorial will be great :) We can really feel you when you sit there when your family is asleep.

[@isachells9859]

Wow! Thanks for doing Angular stuff! It's such a common and powerful way to work. More of this would be amazing, Bless

[@jeverydk]

Patrick, you are my guardian angel. Your videos are coming just as i need that specific theme or when i sit with a specific problem. Keep it up!

[@piotrszponder123]

This is perfect, exactly the tech stack I am trying to learn at work!

[@chmouelkessous164]

ime learning that stack too rn do you have some refs to suggest me ?

[@PatrickGod]

🚀 Get 20% off the .NET Web Academy: www.dotnetwebacademy.com/bundles/net-web-academy?coupon=dnwa2024yt

[@cle1ton2]

Excelente aula, consegui fazer as minhas personalizações durante as explicações. Muito Obrigado!

[@chadsmith7412]

I enjoyed the tutorial. For me, this video was a good refresher on building a DotNet API with Angular from the ground up. I appreciate the simplicity of the application. Thanks!

[@abhishekchandra7606]

Thanks Patrick, this was a very good end to end tutorial , covering both Angular and Web API.

[@brobeans1320]

Goated instructor, thank you for making this!

[@nelsonrivers8546]

Very nice. This helps me get started with Angular 14 w/ Web API & EF Core. Good job.

[@PatrickGod]

Great to hear! Thanks for your feedback!

[@gigaholicrex]

You are truly the God of this type of content. I have tried many other similar tutorials which were good but yours is the best. So easy to follow along with and explained so perfectly

[@PatrickGod]

Wow, thank you so much!

[@ProtikPC_pro_indigo]

@@PatrickGod This example was good. But I also have a request for you Patrick. Could you please do a full blown tutorial[with accompanying source code] for --> Authentication and Authorization with Angular, .NetCore WebAPI, .NetCore Identity and jWT? It would be immense for your audience. There are some "similar" tutorials around but mostly with much older versions of either angular or .netCore. Please consider it. Thanks!

[@gwendal86]

@@ProtikPC_pro_indigo I would love that as well !

[@adrianspikes6454]

​@@ProtikPC_pro_indigo Art of Engineer has plenty as well as CodeAffection

[@mr.nobody4494]

Angula 14 and .NET Core, the best team ever. I hope you upload more content about the version 14, about the new features in use (inside a real project). Good video, thanks!

[@minhthongvu3189]

why .net core vs angular is the best team . Why not reactJS, VueJS or something else... . I'm newbie, thank you for the explanation !

[@marcossouzajr1711]

@@minhthongvu3189 you can do great apps with react, vue, svelte, etc. But in Angular is best to keep a pattern to build applications. This is why angular is best for teams because all members will work together using and knowing the same tools provided by the framework.

[@ninearc2207]

Thank you for video Patrick!

[@nickeax]

This is fantastic, thank you very much for creating this great resource.

[@nashanharis3398]

Amazing stuffs. Perfect stuff to update Angular CRUD

[@DecentralEyes]

Great tutorial. Learning the very basics again instills much more confidence than trying to pick up full Udemy course content!

[@osamamicro1103]

Thanks, Patrick it really helps! we need a complete real-life project with authentication & authorization + CRUD using Angular 15 + .Net 7 + EF 7

[@face1517]

Finally this is we are waiting thank you for this

[@clovischannel]

Patrick God, congratulations, your content's very nice always updated and very objective

[@williamlebron2078]

Excellent tutorial, I love everything about Angular and .Net 💯👌🏻 thanks you very 🙏🏼

[@PatrickGod]

You're very welcome! Thanks for your feedback, William! 😄

[@ronaldo_sys]

Hello, I had a problem connecting the SQL server and I added instructions (TrustServerCertificate=True;) in the connection string. Worked perfectly. Thanks. Great tutorial

[@galemwendar2170]

Thank you so much for you're tutorial!

[@patrickboehme4556]

Thanks Patrick, really enjoyed this tutorial!

[@PatrickGod]

Glad you enjoyed it! Thank you so much for your feedback!

[@procodigosistemas5201]

Hey Patrick, I'm a developer from Brazil, thank's a lot for this video.

[@farhangmdc]

That's really interesting! 👏👏

[@joseangelservin4724]

this is awesome, grate job!

[@juarez_junior]

Thank you Patrick! It has been my first step with Angular and now I know it's not a monster. I've tried to learn with some other tutorials but only with you I got it.

[@nagendrakashyap27]

Great video! easy to understand

[@sambayaraa6389]

Great Tutorial ! Thank you!

[@king_naashik9266]

in your .net core register user tutorial helped lot for my job. Thank u very much sir.And I love ur teaching pattern.Those are so real and casual. Once again thank you

[@PatrickGod]

Glad to hear that! Thank you so much!

[@alexandrearc]

Thanks for the tutorial!

[@a_ghoul]

I am about to start a new job and have to build something with .NET and have never used it. Thanks so much for this!

[@PatrickGod]

Glad it was helpful! And congrats!

[@Infovideosbybilal]

bundle of thanks Patrick for this amazing tutorial.....

[@PatrickGod]

My pleasure! Glad it was helpful!

[@RahulYadav-gd8oh]

Very well explained.

[@subashbarik]

Great video , really helpful.

[@StephenPoole-of4qc]

Very nice, can't thank you enough

[@baronyuda7602]

This is so helpful! Thanks!

[@PatrickGod]

Glad it was helpful! Thanks a lot for your feedback!

[@francisbanda1614]

thank you sir Patric, am following you ...

[@AliHassan-ol3dx]

Thank you so much Patrick for this amazing tutorial. Can you mentions the extensions that you installed for Angular in vs code?

[@raggardy]

Nice one Patrick! Was just looking for something like this when I got your email !

[@PatrickGod]

Glad I could help! 😁

[@flogginga_dead_horse4022]

yep...

[@sta8hs13]

Thank you! Exactly what I need for work :)

[@woodyinz9895]

This is perfect. ty bro.

[@Mostaf1zurRahman]

Impressive, such a well furnished tutorial.

[@PatrickGod]

Thanks a lot! 😊

[@Mostaf1zurRahman]

welcome 🖤

[@Greed-ms2cv]

Thank you Patrick you're truly a God!

[@PatrickGod]

Haha, thank you! 😊 Happy to help!

[@dhakerbadri8040]

Thank you so much !

[@rumeshbandara9972]

Thanks you so much sir .. i learn lot of once ..

[@devian3634]

Waiting for the Authorization and Authentication Angular+.NET 6 Tutorial. Thanks!

[@donz_0541]

Thanks a lot for this tutorial Patrick. This is very useful for my angular project. Hope you will have to apply the material UI too for this SuperHero Angular app tutorial.

[@aliramazanyildirim]

Hi Patrick There is no environment folder in Angular 15 version. What should we do to work with Angular 15 in different environments? 🤯

[@daimeunpraytor7984]

For others that see this, they are no longer installed by default. You must use the "ng g environments" command in the root directory of the app.

[@franciscodesouzacosta3887]

ng generate environments on src folder

[@user-fc9ms9nc8n]

What a name "patrick God"

[@Kunnu_Jeevi_Blogs]

Very useful video 🙂

[@chanchalhappy]

Great video many thanks and you are awesome programmer ...

[@PatrickGod]

So nice of you! Thank you!

[@PeterCrowed]

Awesome Tutorial!

[@PatrickGod]

Glad you think so! Thank you! 😊

[@fridayman99]

Thanks for the great video, Patrick, as always 🙂 I use Visual Studio Pro and have all my experience there. Is it possible to do the above work in VS vs. Code? Thanks again.

[@abdoobas8267]

hey! patrick thanks a lot for your effort and contribution ,we would love to if your create a video on Authorization and Authentication and JWT exchange between dotnet 6 API and angular ,thanks btw ❤✌

[@_ncodes]

Great tutorial, a very helpful follow-up video would be a walkthru on how to deploy this fullstack app. Could be with Azure or other cloud hosting service, or with VPS service like Digital Ocean or Vultr. Would be cool to share it with the world 🌎

[@CrakerAhad]

Love you

[@TommiLipponen]

Hi Patrick. Do you have a tutorial or a course where you use Swagger document created by ASP NET Core API and MsBuild in Angular root for to get strongly typed entities in front part? And thanks for this great content!

[@ashishnayak2666]

Awesome❤

[@alysonramos3424]

Excellent tutorial, looking forward for new tutorials on this excellent stack! Maybe inside a real project? 🇧🇷 loves u

[@nathanaelrossel778]

Thank you so much! Could you make a tutorial about templates, routing and content blocks?

[@DManThe12]

Awesome video

[@danimerz5861]

Du bekommst von mir den Like nur schon wenn ich sehe neues video online 😉

[@PatrickGod]

Super nett von dir, Dani! Dankeschön! 😄

[@akshitasingh6208]

Hi Patrick, I m Akshita from India....I was exactly looking for a this kind of video when u just uploaded on you tube....u literally saved me from getting scolded by my teacher one suggestions:: It wud more helpful for beginner coder like me if wid u explain logic behind the code keep uploading grt videos😇😇😇😇

[@leblancthierry8781]

Thank you for this angular video tutorial. Have you any experience with react to compare these 2 javascript frameworks ? the same tutorial adapted to react would be nice. Thanks!.

[@OverlandEcho]

@PatrickGod, when we getting an updated one? Would be nice. I see that VS 2022 has a pre-setup one that has both included. Kind Regards

[@mohamedboulhez]

Thanks

[@kk3528]

Very good 👍

[@sesano604]

@PatrickGod thanks for this video. I wanted to develop an app and I have been contemplating wether to use DDD or web api services + any angular front end. This solved my concerns. Thanks

[@saeednoruzic]

awesome i hope in feature you get more to this stuf

[@stianen]

I'm totally new to Angular. I have read around, and I see that a lot of people strongly recommend the use of interfaces instead of model classes. Would that also be recommended for such a simple app as this SuperHero app?

[@Leonidn1972]

Thanks a lot!!!

[@andrenunes4032]

Thank you very much!!!!!!!!!!!!!

[@PatrickGod]

You're welcome! 😊

[@GeminiLearning]

Thanks Patrick. This is very nice. Next time kindly do React as well

[@tmpmus5985]

Thank you

[@haianh247]

thanks you so much :D

[@eskpetri]

Great Video. btw If you update to .NET7 and specially EF to 7 and get certificate error then modify connection string to "server=localhost\\sqlexpress;database=superherodb;trusted_connection=true;TrustServerCertificate=True" the other options are using real Certificate or use Encrypt=False in connection string.

[@TetriMesquita]

Legal Petri, eu utilizei o SQL Server Express em Docker e para conexão foi mesmo necessário indicar o parâmetro TrustServerCertificate=True. Obrigado pela dica!

[@pankracio3090]

thx a lot

[@SirFrancisFoley]

I was driven demented until I found this.

[@riazripon6670]

Great job sir, it helps us more. love from bangladesh

[@aboutselphy]

Finally a Tutorail with information. But i have one question this is my first Angular Site i build with Crudand i didnt find any other good tutorial about this, How do i deploy this on my Debian 11 Web server (apache) ? normaly i have to put in the Dist Files into my http folder but with the .net api im not sure how this would work :D (or even if i have to change any information in the API)?

[@khenwilfredmaranan7569]

Thanks god

[@josbexerra8115]

Excelentes Mister Patrix....saludos de los andes peruanos

[@garybob88]

Thanks!

[@PatrickGod]

Wow! Thank you so much for that, Frédéric! Really appreciate it! 😊

[@anurag3487]

Nice video, very easy to understand. You could have added form validations on the angular end, as well as data annotations on the model in the API end. Also some formatting via css could have been better. Just a suggestion

[@alicehrndz]

amaizing! you saved my life with this tutorial, never change

[@PatrickGod]

Great to hear! Thanks a lot for your feedback!

[@__procherk__]

Hi Patrick, it is super tutorial, thank you so much! But I have one question, what if I use Azure Data Studio (because mac), so how I can create Connection string for that?)

[@angelcasanchez7229]

Hello Patrick, I have a table with many columns and I need to consume it in a web api but I only need 6 columns, how can I make the web api only bring me the fields that I need? I am using entity framework core c#, sql server and net 6

[@tonyeps]

Although I don't really like technologies like Angular or React, this tutorial was still interesting, in pure "Patrick God" style :)

[@PatrickGod]

This is so kind of you. Thank you so much, Antonio! 😄

[@kartheekchinthada1733]

@@PatrickGod hehe

[@mamupelu565]

in the database connection string you gotta now add "encrypt=false"

[@rollensmlbb776]

Thank you sir! :) perfect exam for me

[@soukahyessine9137]

thaanks

[@mewmew5125]

You are NICE!

[@johnchimbani8473]

Great Tutorial. I could'nt get CORS working like you showed for some reason, but ended up solving the issue by configuring the WebConfig and using IISE instead. It seemed much easier for me. I am curious if there are any drawbacks by using that method?

[@henrik3098]

thanks bruw

[@julioo534]

I have one question. In my area is very demanding tecnoligies like Angular, C# and .NET. what version of .NET should i learn? Thanks fors answer

[@davidjason3926]

Hi Patrick, At timestamp 1:03:03 my Edit and New superhero buttons are not displaying the controller from edit-heroes component. My code has 0 error, No issues found and in console also there is not error message. But still my name, firstName, lastName and place controllers and buttons are not getting binded to app-component.

[@pudelosha]

Is this code efficient assuming that backend always returns the list of heroes? To me it should only return 1 item and the array on frontend side should be updated accordingly.

[@ramakrishnaakhilnagubandi4658]

added cors but it's not communicating, what could be the reason?

[@dammyadebayo6292]

For my port the it's not using the SuperHeroAPI profiles port. It's using the one from iisSettings. How do I change it? Thanks.

[@DataJuggler]

3:45 I do not get a Windows Explorer option for VS Code. I do get one for VS 2022. I am curious why you wouldn't use Visual Studio for both? Edit - I reinstalled Code and chose the file context and windows explorer options.

[@hammadrafiq1285]

Firstly, thank you Why I am getting this error ((Error: This command is not available when running the Angular CLI outside a workspace)) when I'm running your front-end project?