Angular 16 CRUD with .NET 7 Web API using Entity Framework Core - Full Course

hi everyone this video is a preview to my 10 hour udemy course on creating scalable web applications with angular and asp.net core web apis I have updated this course on udemy to the latest versions of angular and asp.net and this course ranks among the top courses for angular and asp.net core web apis I have a coupon code for you all and you can use this link that is in the description to get an instant discount you don't have to buy the course but watch the intro go through the description and then decide with that said enjoy this video and like And subscribe to my channel for more content like this one hi and welcome to this course where you will learn and master your asp.net core and angular skills by building a real world application alongside me my name is Samir and I will be your instructor for this course together we will build an amazing real world development blog application using angular and asp.net core web API from scratch we will use angular CLI to create our angular application we will use bootstrap CSS to maintain a clean and consistent look we will learn how to create components which are the building blocks of any angular application we will build angular services to make HTTP calls and learn course use rxjs observables subjects and subscriptions we will perform thread operations that is create read update and delete by creating angular forms in our application we will also create a reusable image selector component and use it in multiple components in our application using the image selector we will upload images to our web API and use it as our image selector in the backend we will build a rest web API using asp.net core and visual studio we will create a domain driven design when creating our application we will create new endpoints and action methods and perform crud operations on our domain models we will use Entity framework core to create our database and tables using our domain models we will build Entity framework core relationships between our domain models as well we will also use repository pattern and asynchronous programming in our API to protect our application we will learn and build authentication and authorization in both the API and the UI application we will use asp.net core identity and create a jwd token from our API so that our angular application can use this JWT token to make authenticated API calls in our angular application we will use Advanced Techniques and build interceptors odd guards and much more this will be an amazing tutorial by the end of which you will Master creating scalable full stack web applications using angular and asp.net core so I hope you click the enroll button and join this journey with me to make the best use of this course you should have at least three months of experience working with asp.net core and angular this course is not suitable for absolute beginners and some knowledge of these languages and Frameworks is required having said that during the course I will often cover several topics in detail with examples and best practices and provide some great tips and tricks in the next few lectures we will set up our development environment that is all the softwares and packages we need to run our course smoothly in this lecture we will download and install dotnet SDK and dotnet runtime packages the links for both of these are available in the notes attached to this lecture so you can go ahead and use the download links to install.net SDK and dotnet runtime to the versions shown in this video in my browser I will navigate to dotnet.microsoft.com forward slash enhyphen us forward slash download and this will open a similar link over here from here you can select the dotnet versions for example it is showing the dotnet 7.0 version which is a standard term support and is the recommended version and this is the version that we are going to use in our course now you also have the option to install.net6 now in here we can right click on this link which says all dotnet 7.0 downloads so right click on here open link in new tab on this page you have the option of choosing your operating system which is Linux Mac OS windows and other ones and also for the aspit.net core runtime 7 versions we also have a similar options over here so in here for example my machine is a Windows machine so inside windows I will choose x64 or x86 versions whichever one is your machine and similarly on the runtime I will choose windows and the x64 or h86 versions whichever your system is from these download options go on and download and install dotnet SDK 7 version and dotnet runtime version 7 as well [Music] in this video we will download and install Visual Studio 2022 so that we can code our.net solution to download visual studio navigate to visual studio.microsoft.com in your browser I will have this link available to you in the notes attached to this lecture as well scroll down on this page and choose the version of Visual Studio that you want to install for Windows and Mac users you can download their respective versions and if you are a Linux user you can download visual studio code which is a lightweight IDE and you can install some packages for your c-sharp and asp.net development I am on a Windows platform so I will choose the community version which is free to use this will in download the visual studio installer click on continue and it will download the necessary files it needs to install Visual Studio after that you will get a setup that is similar to this one where you can select and install various components inside Visual Studio from this screen I will first select the asp.net and web development package I will then go on and select the dotnet desktop development package as well I will also select the data storage and processing package to connect develop and test the solutions with SQL server and other SQL or data storage packages so with these three packages selected I will click on install and this will install Visual Studio 2022 into your system in this video we will download and install SQL server and we will also install SQL Server management Studio so I will come to this URL microsoft.com SQL Server slash SQL Server downloads and I will provide the links to both the downloads and the notes attached to this lecture and on this page I will come down to the developer section and this is the SQL Server 2019 developer and it's a free edition so I will come here and click on the download now and I will click on Save once it is saved I will click on the installed EXE and this has started the installation of the 2019 SQL Server Developer Edition I will click on the basic version click on accept and I will choose same path click on install the SQL server has now been installed and it has brought you some information we have the connection string over here we have the SQL Server installed folder and some other information as well we have to keep our Focus towards this server information which is localhost slash Microsoft SQL Server zero one yours could be something different we will keep this information handy of what SQL Server instance we have installed on our machine yours could be something different but keep this information handy because we will use this information later on to uh to create a new database inside the SQL Server so I would basically copying this information and keep it handy somewhere from this window you can also see it's written over here that we can install ssms it is the ID which is used to run SQL and I can click on here or I will also provide the link to download ssms so you can come to the link and you can click on this free download for SQL Server management studio ssms so you can come over here or click on the setup and click on install ssms so it comes to the same brow URL so I will come here and click on this download and install ssms so it's it's asking me to save it so I'll click on Save once it has been downloaded I will click on the setup and this will open the setup for me I will click on install the installation has now completed and I will click on close and I will open a SQL Server management studio and it has opened the connective server pop-up and you can mention the server name that you installed which was the instance name of the SQL server and if you remember it from the video it was this yours could be something different oh I have pasted the one that SQL Server gave me so I've copied it to the server name and I will keep windows authentication as my authentication mechanism I will click on connect and it has connected me to the uh to the SQL Server instance or in my machine and if you your your databases will come over here if there are any and during the application we will create a new database as well so uh you'll have to follow this SQL Server installation if you want to go ahead with the uh with creating a new web API we will now download and install Visual Studio code so you can go to the website code.visualstudio.com or you can Google for visual studio code and from here you can download the version that is applicable to your machine once you have downloaded the software you can install the software on your machine to run Visual Studio code during the angular development process we would need some Visual Studio code extensions that would make our life easier during the development the extensions that I have is eslint from Microsoft I also have angular Snippets version 16 from John Papa I have the CSS formatter then I have angular language service which is from angular I have the intellisense from CSS class names in HTML and I also have the path intellisense which is a plugin that autocompletes file names now there may be some more plugins that are out there which can help you in some way so you can you are totally free to download those and install them as an extension so feel free to download and install any extensions that would make your life easier to create the angular application we would need the latest version of node.js in our system so let's go to https nodejs.org forward slash English and from here you can come to the downloads section over here and from the latest long term support version you can install or download and install the version that supports your system so we have Windows installer Mac installer and source code as well so click on the version to download it and install it inside your system in the previous lecture we installed node.js into a computer so to check that we can now write node hyphen hyphen version press enter and if it comes with a version that means we have node.js installed in our system now it's time to install angular CLI which will be used to create the angular application and further components and services as well so here's the command for that but you may have angular CLI already installed in your system a good way to check is using the command NG version press enter it comes up with the angular CLI command and I have angular CLI 16.0.2 installed in my system now if you have angular CLI installed in your system but it is not the latest version you can follow these steps first of all we'll write the command npm uninstall hyphen G at angular CLI so angular forward slash CLI press enter and this will uninstall angular CLI after this we can now install angular cli's latest version so I'll write the command npm install hyphen G at angular forward slash CLI at latest press enter and this will install the latest angular CLI angular CLI has now been installed now if you never had angular CLI installed you can just use this command which is npm install hyphen G and at angular forward slash CLI and this will install angular CLI for you and to check the version or to check if angular CLI was successfully installed you can close this command prompt or terminal window and open it one more time so I'll open the command prompt or terminal window and here I will write NG version press enter and as you can see I now have the latest angular CLI version that is 16.1.2 it is advisable that you follow the entire video and not skip any parts in between skipping a section could mean that you are missing out of key information that's required in the later part of the tutorial and might result in you having errors if you are still facing any issue it is advised you either revisit the lecture again or search online for Relevant help often the most common issues are solved by other fellow developers on websites and forums like stack overflow as a developer you should have the skill to look into an issue and try to find the solution of it by visiting various websites online or finding a solution or your own this helps you as a developer to get more information and debugging knowledge that makes an essential part of becoming a good software developer welcome to section 2. in this section we will create a new asp.net core web API using visual studio make sure you have followed the development setup videos before proceeding with the lectures I have created a folder for myself and that's under e Drive udemy code pulse so code pulse will be the name of the project that we are building and that's going to be our coding blog application and the coding blog application will reside under this folder so you can create a folder for yourself in which you will create your API and UI projects so in here I will create two more folders one for the API and one for the vui so let's create a folder called API and another folder called UI we won't be doing anything in the UI folder as of now but we will create a new asp.net core web API in the API folder so for that let's open Visual Studio and this is the get started window of Visual Studio to create a new project we have this create a new project button on the right hand side click on that this takes you to the next page from which where you can choose a template for your project for example you can choose a web application a web API a Blazer server app and many more from the left hand side you can see you have the recent project templates and it might be empty if you're just starting out but from here I have the filters as C sharp all platforms and all project types so if you have those filters you'll be seeing similar options and from here I will select the option asp.net core web API and that reads that this is a project template for creating an asp.net core application with an example controller for a restful HTTP service this template can also be used for an asp.net core MVC views and controllers application but for our purpose we'll be using it for a web API with that selected I'll click on the next button from this page it is asking us to configure our new project so we will give the project name and you know the project name we are calling our project code pulse so let's give it a name so code pulse and because this is the API project I will append the word dot API to this so the project name becomes code pulse.api and the solution name also becomes code pulse.api and we have to give a location in which we are going to store or create this API and we have the folder right here we want to create the API in the API folder so I will go inside that and copy the path and come back and paste the location over here so we are creating our project code pulse.api inside the code pulse application slash API folder and with that I will click on the next button then Visual Studio asks us for additional information like the framework authentication type and other stuff from the framework section I have the dot Net 7 which is the latest at the time of this video recording and I will select that and I will keep authentication type as none I will keep this selected which is configured for https and I will have all the rest of the stuff as is if you can't see dotnet 7 in here you have to make sure to follow the development setup videos which are in section one to make sure you have installed dotnet SDK and runtime and also you have updated Visual Studio as per the latest version to have this over here so I will select.net 7 and click on this button which will create a new asp.net core web API it takes a few seconds for visual studio to create this new project and it has given us a few files and folders over here in the solution Explorer if you can't see the solution Explorer you can go to the view and open solution Explorer and that is it over here let's come back in the next lecture and understand the files and folders created by Visual Studio as part of our web API project in this lecture we will understand more about the project and the files that were created as part of the project scaffolding let's come back to visual studio the left-hand side area will be mostly used by you to code your API on the right hand side we have the solution Explorer if you by accident close the solution Explorer you can go back to it by going to the view menu and click on solution Explorer in the solution Explorer we can see the files and folders that Visual Studio created as part of the web API template let's understand them one by one on the top over here we have the solution file a solution is an architecture for organizing projects inside Visual Studio one solution can have multiple projects and in them we can consume each other as well below the solution file we have the project file the project file in our example is code pulse dot API similar to a solution a project is a structure for organizing files and folders in a single project if you double click the project file you will open the project.cs proj file inside this we can see the properties of the project form our example we can see that we are using dotnet version 7 as our Target framework we are we have enabled nullable and we have enabled implicit usings and these are the properties for this project when you use nuget packages and add them in your application they will also end up as a reference to this project file now let's have a look at the launch settings.json file which is under the properties folder over here the name suggests this launch settings.json file has launch related configuration in here you can see the profiles that have been set up for our project and these profiles also match to this drop down over here so we have HTTP https is Express and other ones so we have HTTP for example if you want to run over HTTP we have the application URL configured to this profile and also we have https in which we have the application URL configured to https make a note of the URLs that your application is using this will be different to the ones that I'm showing here on the screen so when we run the https profile which is selected by default it will run over https double slash localhost colon 7226 which is the port number and that's the URL for the API so the API will run under this URL when it's running under the https one now this URL will be totally different to yours so whenever I use my API URL you have to use your API URL then we have the controllers folder over here inside this folder we have different endpoints or controllers for our application we will look at controllers in a later video as we will be using controllers a lot throughout this course we will be creating more controllers or endpoints for our application after that we have the app settings.json file this file is used to store configurations for our application stuff like the database connection strings environment specific variables resides in the app settings.json file finally we have the program.cs file which is a very important file inside a.net core project the program.cs file is the entry point of the application the code inside this file is executed first when the application runs in this file we add dependencies to our application which can be used later on in our application dependency injection is an important concept and asp.net core gives us dependency injection by default we first add services to the container and dotnet supports the dependency injection software design pattern which is a technique for achieving inversion of control between classes and their dependencies another important function of the program.cs file is to configure the HTTP request pipeline by using the request pipeline we add middleware which is a software that is assembled into the application pipeline to handle requests and responses these are the middlewares that have been configured in our application by default the order in which they occur is also very important now that we have looked at the files and folders for our.net API let's come back in the next lecture and understand our domain and what we are trying to build as we are about to build a restful web API using asp.net core let's first understand what is rest rest or representational state transfer is a style of architecture for building web services rest is a set of principles that Define how web services should be designed and interact with each other at its core rest is based on the concept of resources a resource is anything that can be identified and manipulated through a web service in a restful architecture resources are accessed through URLs each URI identifies a specific resource and HTTP verbs are used to perform actions on these resources for example a get request can be used to retrieve a resource while a post request can be used to create a new resource rest also emphasizes a stateless client server model this means that the server should not store any client State between these requests and the client should provide all necessary information with each and every request this allows for scalability and readability in the system as the server can handle multiple requests simultaneously without needing to maintain client state asp.net core provides a powerful and flexible platform for building restful apis with its support for HTTP verbs routing model binding and response types asp.net core makes it easy to implement restful apis that are both scalable and maintainable let's also understand HTTP verbs HTTP verbs Define the type of actions that can be performed on a resource identified by a URI some common examples of HTTP verbs are get post put delete patch and options out of these the most common ones are get post put and delete and these are the ones that we are going to later Implement in our web API let's see some common use cases of these HTTP verbs and how they identify actions on these different Uris if you see the first highlighted action which is pointing to your api.com forward slash API forward slash employees this URI will be used along with the HTTP get keyword to get the list of all employees this is the URL convention that we use when we have to get a resource if you look at the second row we are reusing some of the bits from the first row so we are pointing to your api.com forward slash API forward slash employees which gives you the list of all the employees but then you want to get a single employee by its unique identifier and hence you are passing the identifier after the employees so clearly get can be used in two different ways one to get all the employees and two to get a single employee by their unique identifier then we also have the post HTTP verb the URL for the Post HTTP verb is similar to the first one which is the get all employees so in this URI the URI is also pointing to the employees resource which is your api.com forward slash API forward slash employees now because is it this is in post HTTP verb it means that we are using this to create a new resource in this case creating a new employee after that we have the put HTTP verb which is used to update a resource so similar to the git we first have to use a URI that uniquely identifies a single employee or a single resource then we will use the HTTP put keyword to treat risk as an update action and finally the most common HTTP verb that is used is delete as well so in the delete the convention of the URL is similar so it's going to a single resource or a single employee and we are using the HTTP delete verb so that we can identify this action as a delete action in this lecture let's have a look at routing and how it's done in asp.net core web apis routing is the process of matching incoming HTTP requests to the appropriate action methods that will handle those requests routing is used to map the URL of a request to a controller and then its action method if you look at the example on the screen a user is trying to request to delete a product the user is entering the URL localhost1234 forward slash API forward slash products forward slash the ID of the product that the user is want to delete now if you see the application is handling this URL and is matching the resource that is products to the controller products so we have a controller in our application called products and the resource from the URL is matching the resource of the controllers so that's the first level match after that we have a delete method inside the controller that's our delete action method and it has the attribution the attribute HTTP delete which stands for the delete verb that the user is providing along with the URL now after the products resource you also see a number and that is number two and that means the user is trying to delete a product with the ID of 2. and if you look at the delete method on the right hand side it takes a ID as an input parameter and if you look at the attribute the HTTP delete attribute also takes in ID the asp.net core application is able to get the ID from the URL and able to pass it as an input parameter to the method [Music] once the code has the ID for the product and it knows that this is the delete method it will go on and delete the product from the database and this is how routing Works in an asp.net core web API now that we have covered our Basics it's now time to dive deep and create a full real world web API we will be building a web API that manages a technical coding blog this is how our domain model will look like it comprises of these two important domain models one is the category and one is the blog post if you imagine a technical blog or in that case any blog post it comprises of blogs so the author of that blog will create many blog posts and this is what we have on the right hand side over here the blog post will have an identifier to uniquely identify the blog post it will have a title which will be the heading of the blog post then we'll have a short description which will be used to just briefly describe the blog post and what it is about then we will have the content which will have the entire content of the blog post so it will have the subheadings and the paragraphs and further images that describes the content and we will write our content as markdown after that we will have the URL handle for the blog post and this is for example if you have code pulse.com then the URL that follows the code pulse.com that takes you directly to the blog post will be the the URL handle some also call it distlug then we will also have a featured image of that blog post and we will be putting the URL of that featured image inside this blog post so whenever we want to display this blog post we will first introduce the featured image and then the heading and the content and further on the blog post will also have a date created which will be a date time and an author information so who wrote this blog post and whether this is visible to the public or not so a Boolean flag that covers that the second important domain model in our application will be the category and that's on the left hand side over here it looks to be quite simple category only has three Fields one is the unique identifier which is a good the second one is the name of the category for example for a coding blog we can have HTML as a category CSS Edge category or asp.net as a category and so on we'll also have the URL handle that it takes us to that particular category on the website if we talk about the relationship between the category and the blog post we will have a many-to-many relationship that means one category can have many blog posts for example if it's in HTML category you will have multiple blog posts that relate to the HTML category and similarly we will have one blog post that can have many categories for example if you are working on a login page and that's an HTML and CSS category so you will add HTML and CSS categories to that particular blog post that makes this a many-to-many relationship so now that we know what we are trying to build in our web API and in our angular project let's come back in the next lecture and create the domain models inside our asp.net core web API in the last lecture we discussed the domain models that will be part of our application and in this lecture we will create the domain models for our asp.net core web API for that let's come back to visual studio and create a folder for models so I will right click on the project over here go to add and create a new folder let's name this models inside the models folder I will create another folder that will represent the domain models so inside models I will create a folder so right click add and create a new folder called domain so any class files that will go inside the domain folder will represent the domain models and we have two domain models to create one is the category one is the blog post so let's create the blog post first so right click on domain add a new class and let's rename that to blog post dot Cs and click on the add button this blog post domain model will have a few properties as we saw in the previous video so let's create these properties and the short form for a property is p r o p and double tab otherwise you can write public and the property type the property name and their Getters and Setters so that's the definition of a property and you can use the shortcut p r o p double tab so the first property we want to create is the ID and that is of type good so let's create a good type the name is ID that's the unique identifier after that we want the title so prop again string and it's called the title we will have the short description so that is another string and that is short description then we will have another property of type string which will hold the content of this blog post so the name is content and I'm just copying the previous property and pasting it and to speed up the process over here after the content we have a featured image URL so featured image URL and that will hold the URL of this blog post that features right on the top after that we have the URL handle or the slug but we'll call it the URL handle then we have a date time property so I'll change the string to the date time and that will be the published data [Music] after that we have the author so that is of type string and that is the author property which will have the name of the person who's writing this blog the final property we will have is a Boolean type and that will be a is visible property and that will mean that is this block visible to the public or not so we have nine properties for the blog post you can pause the video over here and write these properties for your domain model moving on we want to create the second domain model which is the category domain model to create the category domain model we'll follow the same steps so right click on the domain folder add a new class and rename that to category dot CS click on the add button to create this domain model and we will have a few properties for the category domain model as well the first one is the ID so that is of type good and the name is ID the second is a name property so the name of the category that is of type string after that we have the URL handle for this category so it will be of type string and the name of the property will be URL handle now that we have created the domain models for our application in the next lecture we'll come back and install the necessary nuget packages required to install and use Entity framework core in the last lecture we created the domain models needed for our blog application in this one we are going to install the nuget packages needed for Entity framework core and we would need Entity framework core because we are following a code first technique to create the database that is needed for our application and because we have the domain models the domain models will basically Drive the structure of the database so we will tell Entity framework core that these are our tables and Entity framework core will create the database for us so for that we first have to install the packages for Entity framework core to do that I will right click on dependencies come to manage new hit packages it will open up a window let's go to the browse tab over here and we have to search and install two packages the first one is Microsoft dot Entity framework core dot SQL Server so type that and paste it here in the browse section this is the first package over here so I will click and install once this package is installed I will go on and search for the second package which is Microsoft dot Entity framework core dot tools so I will copy that paste it in the browse section search for that package and click to install this nuget package so now that we have installed the packages needed for Entity framework core we'll come back in the next lecture and create a DB context class in this lecture we will understand and create a DB context class in asp.net core a DB context class is a class that represents a session with a database and provides a set of apis for performing database operations this is part of the Entity framework core packages the DB context class is responsible for maintaining a connection to the database tracking changes to data and Performing database operations such as squaring inserting updating and deleting it also provides a way to define the database schema using entity classes or domain classes that we just built which Maps directly to database tables so we can say that the DB context class is a bridge between your domain model classes and the database DB context class is the primary class that is responsible for interacting with the database and Performing crowd operations on our database tables in the image you can see that whenever a call comes to a controller in order to get or retrieve a data the controller will have to talk to the DB context and it is the responsibility of the DB context to get the data from the database and provide it back to the controller so now that we know what the role of DB context is let's come back to our application and create a new DB context to create the DB context class I will first create a folder for the DB context class so right click on the project go to add new folder and we will call this data so the DB context class will reside in this data folder so right click on the data folder add and we will add a new class and we will rename this to application DB context dot CS so our DB context class name is application DB context this class basically derives from DB context class which is coming from the packages that we installed so this inherits from DB context press Ctrl dot to pull in the necessary using statements so this is coming from Microsoft dot Entity framework core package so make sure that is there now we would need a Constructor for this class and an easy way to generate a Constructor is by clicking on this class press Ctrl dot again and let Visual Studio suggest you some Constructors it says over here generate a Constructor of type this or generate a Constructor with the options parameter which is the DB context options so we will select this one and it creates a Constructor for this class which takes the DB context options and then passes it to the base class this will be helpful when we configure our DB context from the program.cs file and we will pass the connection information through the DB context options later on now that we have the Constructor in place we would want DB context or the collection classes as properties to this DB context class so let's create the properties after the Constructor but within the class so to create a property I'll write prop double tab and this property will be of type DB set and dbset further takes a type and the type of this DB set property will be the domain models we have the blog post and the category so the first DB set collection will be blog post and this comes from the domain model folder let's rename that to blog post with an S so that becomes blog posts and we would need another property of TB set collection and that will be for the category and we will call this categories so basically DB set class represents the collection of entities from a particular type in our case it's blog post and category in a relational database it is the part of the Entity framework course orm capabilities and provides a way to interact with the entities in the database so we will later on use these properties to interact from our application to the database tables which will be of this name and the type of columns and properties are taken from the domain model properties over here so by that we have created the DB context class in the next lecture let's come back to add the connection of our database inside the app settings.json file in this lecture we will create a new connection string that points to a SQL Server database and we will use this connection string to provide it to Entity framework core through our DB context class and that will be used by Entity framework core to make connections to the database from our application so let's come back to visual studio and we create connection strings inside the app settings.json file so let's open app settings.json and after we have the allowed hosts we will put a comma and create a new object wall connection strings and this object can have multiple connection strings but we want to First create a connection string for our application which will store the categories and the blog posts for our application so let's give a key value pair so the key is the name of the connection string so let's call it code pulse connection string and then we have to give a value to this connection and the value is basically comprising of the server information and the database information and and any additional information like the username or password if there's any so first of all we have to give the server information so inside the string we will say server is equal to and here we have to provide the name of the SQL Server that we installed in the section one so if you have not done that please go back and watch the video and install a local instance of SQL server and also SQL Server management Studio by which you can actually go into the server and see the database and the tables if you have followed the videos in Section 1 we can we actually installed a SQL Server so I'm trying to connect to that SQL server and in my case the name of the server was localhost backslash Ms SQL Server zero one the name of your SQL Server would be or could be totally different so make sure you follow what you created back in section one videos and then come here so I will copy the server name from here and I will check that I'm able to connect to this by clicking on the connect button so I can connect to this and if I expand on databases I do have a few databases as well but I don't have the code pulse database so I will create that soon so with that I will copy the server name come back to the connection string and paste it over here so this is the server information then comes the database information so I'll put a semicolon and I want to tell the application what database do we want to create for this application so I will say database is equal to and this will be the name of the database that you want to provide because there is no database at the moment and we are following the code first approach in Entity framework core we want to provide a new database name so I will call my database code pulse DB and after providing the server and database name we are using Windows authentication so we don't have to give a username or a password for now but we want to specify The Trusted connections so we'll say Trust server certificate is equal to true and so a semicolon again and I'll move this to the right and trusted underscore connection is equal to true as well so we have these four details the server name the database trust server certificate is equal to true and trusted connection is equal to true as well so with that we have the connections ring ready in the next lecture we'll come back and inject the DB context class that we created and provide the connection string to the DB context class in this lecture let's get to know dependency injection and then inject our DB context class dependency injection is a design pattern used to increase the maintainability and testability of applications by reducing the coupling between components in asp.net core applications di is an essential part of the framework and is used to manage the lifetime and dependencies of services used throughout the application at its core di works on this fundamental that instead of instantiating objects within a class those objects are passed in as parameters to the class like passing it to the Constructor or the method instead this allows for greater flexibility in the way objects are created and managed as well as easier testing of individual components dependency injection in asp.net core is really simple asp.net core provides a built-in di container that can be used to manage the dependencies of an application the DI container is responsible for creating and managing instances of services which are registered with the container when the application starts let's look an example of an application which doesn't use dependency injection we have a controller class and we have a Constructor over here which is controller inside the Constructor because we want to use the service my service class later on in the index action method over here we are instantiating the class inside the controller over here now this class would have to be managed by the controller and later on if the class name changes or we have to implement a different implementation of my service then we have to change all the controllers or classes that uses this my service instead of creating the instance within the class this is what dependency injection does we can easily inject the interface my service inside our application in the program.cs file and we also provide the Implement implementation detail of the interface of what we are trying to implement so my service has been injected inside the application inside the controller or any controller that the want to use this my service we can easily inject the service as a parameter to the controller or a parameter to the method and then we can use this service throughout the application for example in this index action method this is a good practice and it also satisfies the D in solid by doing that we can easily change the implementation of my service to say my service 2 which is another implementation and we can easily change the implementation in the program.cs file just at one place and then later on all the controllers can easily implement the new implementation which is now provided and managed by the application so let's come back to our application and create or inject the DB context class that we created inside the data folder and inject it inside our application so that we can later on use the DB context class inside controllers or repositories so let's inject this inside the program.cs file and on the top over here we have the services that are injected inside the application before we actually build it so before we build it we want to inject the DB context class as well and the way we do it is by using the services collection in the Builder so Builder dot Services dot add DB context and DB context class takes a type and the type of DB context class is the application DB context so I will write application DB context and this comes from the data folder so make sure you have this using statement at the top and now in round brackets we have to provide the DB context options using the Builder so I'll say options such that and I will open and close curly braces and finish the semicolon over here so now we have to give the options or the DB context options using this Builder so I will say options dot use SQL Server because I am using a SQL Server so I'm telling Entity framework core to use a SQL Server as a connection so I will click on this method and this method comes from using Microsoft dot Entity framework core package and this method will basically need a connection string as a string type and we have the connection string because we defined it in the previous lecture in the app settings.json which is over here so we just have to bring this connection string inside the program.cs file and to do that we can again utilize the Builder over here so we'll say Builder dot configuration dot get connection string method and this would take a name of the connection string as a string so the name of the connection string is code pulse connection string yours could be totally different so make sure you are copying the correct name from the app settings.json file so I'll do that and paste it over here and then put a semicolon to finish the sentence so to recap we are injecting the DB context which is of type application DB context inside the program.cs file which is the application itself so that we can later on use the application DB context to communicate the with the database from the controller or the repositories in the last few lectures we have done all the groundwork to set up Entity framework core and we have created the DB context class and injected it inside the application now we will run Entity framework core migrations and what this does is it will create a database with the name that we provided inside the the connection string and it will create a database inside a SQL Server because we have provided a SQL server and then that database will be used and configured with our application and later on when we create a controller we will perform crud operations on this database that we have created so let's come back to our application to run Entity framework core migrations we have to go to tools and come down to new git package manager and click on package manager console in here we have to write two commands the first one is ADD hyphen migration followed by the name of the migration in strings so let's write this command first so add hyphen migration followed by the name of the migration because we are creating a new database the new tables and columns for the first time we can write initial migration [Music] after that press enter and what this is doing is it is creating a script in terms of a c-sharp world it is creating a script that Entity framework core can use to create a later on a SQL script and then create a database so now it has created a new migration file and that resides in the migrations folder that has been created by Entity framework core and this is the first migration as you can see the initial migration and it has all the code that is needed to create the two tables that we have one is the blog posts table and the other one is the categories table and it has all the column information in it as well so when we run the next command that is update database Entity framework core will read this file and have a connection with the SQL Server that we mentioned inside the app settings and if a database does not exist it will create one so let's come back to package manager console and write the second command that is update hyphen database and press enter to run the script so the script has ran successfully now to confirm we can open SQL Server management studio so I'm already in the SQL Server that has been mentioned in the connections ring now if I expand on databases we did not have a code pulse DB before but if I refresh This Server again and expand on databases we should now have the code pulse DV if I expand on the DB we have the two tables necessary for our domain to work which is the categories table having the three columns ID name and URL handle and the blog post table which has the nine Properties or columns that we defined inside the domain model so all this information is getting picked up from the DB context because we provided the collections of the table in terms of the type blog post and category over here so we can say that the DB context class always and always works with the domain model folders and later on we will have dtos and other class files but the DB context class always works with the domain model folders foreign in the last few lectures we have set up Entity framework core and we have created a new database that our application can talk to now it is time to create a new controller or an endpoint and also the actions that is the crud operations like get post put and delete inside our controllers let's come back to our application and we want to First perform Cloud operations on the category domain model so category is a simple domain model and we'll use that to perform crowd operations like create read update and delete on the category domain model so we want an end point that performs cut operations on the category domain model so for that we will create a new controller because the weather forecast controller that is there by default is only a default scaffolded code we won't be using that if you want you can delete this file and this file but for sample purposes we'll just keep it there I will create a new controller by right clicking on the controllers folder go to add and click on this controller file because this is an API I will select the API from the left hand side and click on the API controller empty template and then click on ADD it will then ask for a name of the controller and all the controllers has to and that is a rule that they have to be appended with the controller keyword because the application then searches for all the class files with the controller keyword so the name of our controller will be the categories controller so we have the name as categories controller.cs click on the add button and this will create a controller over here and this categories controller inherits from the controller Base Class and you can see over here that it has two attributes one is the route that goes to API forward slash controller name which is categories and it also has the API controller which gives it other useful benefits if we want to reach this controller the end point that we have to go to is https localhost forward the port number which can be anything so I'll just say XXX forward slash API forward slash categories and this is the path needed to come to this controller and other actions will have their own path as well now that we have the categories controller ready we will create the crud operations like get post put and delete in this controller and we will first start with the post operation which is the post HTTP verb to create a new category and that is in the next few lectures in this lecture we will understand more about dtos and domain models before we proceed ahead with any other action methods it's now time to understand what dtos are and how they differ from domain models dtos or data transfer objects are objects that are used to transfer data between different layers of components of an application they are simple objects that typically contain a subset of the properties of a domain object or entity and are designed to be used for a specific purpose such as transferring data over the network or between layers of an application as you see in this example we have our API over here we have the database which talks to the API and we also have the client which is calling this API to get some data or to add some data now at the moment we have domain models over here and for us because we are using Entity framework core domain models have a mapping between the tables in the database and the domain models that are used internally in the application when you use Entity framework to talk to a table it gives us the domain model because the DB context class only knows about the domain models but because we have the domain models within the API it is a good practice to add a layer of details that is the data transfer objects and that is what we send back to the client so we never send the domain model back to the client but we send the dto instead so once the DB context class is able to provide us with the list of domain model or the information about the domain model we then do a mapping between the domain model and the dto so that we can send the dto back to the client if it is information coming from the client for example if the client wants to add a new resource then we receive a dto which then we convert from dto to domain model and then we send the domain model using Entity framework core to the database so that's how dtos are used in the application and that's how they differ from domain models now you would be asking what are the benefits of using details if they are exactly the same as domain models now the first thing is domain models can have slightly more properties and slightly different named properties which we don't want to expose to our client so there are actually advantages of having dtos because when we then we can manipulate our properties inside the details that we want to send back to the client for example the advantages of ttos are the separation of concern so dtos help us to separate the concerns of an application the domain objects are usually tightly coupled with a database schema as we just know because any framework core uses them to talk to a database whereas dtos can be designed to match the business requirements this separation ensures that the domain objects are not tightly coupled with the API or the view layer the second Advantage is performance using details you can help to improve the performance of an application this is because they allow us to retrieve only the data that is needed for example in our application if we don't want to send the whole region information back we can just send in the name of the region back if that is the requirement and we don't have to send other properties of that region domain model back to the client so then in that case we just use a dto and only one property in that detail then we map all the information from domain model to the dto that we can send back to the client it also improves on security because dtos can help us to improve security by limiting the amount of data that is exposed to the client by only exposing the necessary data you can reduce the risk of exposing sensitive data to unauthorized users and at last it also helps us to improve versioning because it can be versioned independently allowing you to update the API without breaking the existing lines if you were to make a change to a domain model which was exposed to the client it wasn't possible because then the client wouldn't be able to send the information again because you now have breaking changes but now we can change the domain model but can keep the dto the same so that we are not breaking the the contract between the client and the API but we can still play around with the domain models within our application [Music] let's create our first action method and that will be the post action method to create a new category in the database so for that we will first put a comment defining the routing to this action method so we have the base route that is to the controller but after that what is required to to reach to this new action method and we will put that information over here but otherwise we will have a http post keyword or attribute on this method and we will Define this method as public async task of type I action result and we will give the name of the action method and because we are creating a new category we can Define it as create category method now this create category method needs some information as parameters because it needs the user's input that what category this API should create on their behalf for that we will create a dto object as we saw in the previous lecture how dtos differ from domain models we can never and we should never expose our domain models because that's the business logic but dtos which are data transfer objects can be used to expose to the outside world so we will create a new folder under models so right click on the models folder add a new folder and we will call that dto so that will be the dto folder or the dto models in here we will create our first dto class so right click add a new class and I will call this the create category request dto dot CS so that's our create category request dto and this will have the properties needed to create a category by the API so if we look at the category domain model we have ID name and URL handle but we don't want the user to pass us the ID this is a unique identifier and should only be created by the application that is the API so the only information that is needed is name and URL handle so I will copy these two properties and come back and paste it inside the request dto you can also write it yourself or have different names to this request ETO back inside the controller we will use this request dto as the input parameters to this method so we will say create category request dto and press Ctrl dot to get this from the dto models folder give it a name let's give it request and this is what the user is sending us and later on because we are building an angular application the angular UI application will send us this request detail and then the API will take this and transform this into a domain model to then submit this to the database so the first step of this method is to convert this dto to a domain model so map dto to domain model and the domain model we have is category so we'll say a variable category is equal to new category and this comes from the domain model and inside that we have two properties to fill one is the name which is coming from request dot name and the second thing is the URL handle which also comes from request dot URL handle so these are the only two properties we are not giving the ID property because Entity framework core is smart enough to create a unique identifier when it actually saves it to the database so you can ideally skip the ID over here and Entity framework core will do the job for you after we have the domain model with us we now want to use the injected DB context class in the controller so we can use the DB context class and provide this new category so that Entity framework core can save it for us so the way we can use the injected Services is by injecting it inside the controller and inside the Constructor so let's create a Constructor so ctor to create a Constructor and then inject the DB context class that we injected inside the application and inject it over here so that we get an instance of the DB context class so our DB context class is called application DB context so let's inject that [Music] so application DB context and call it a name let's call it DB context press Ctrl dot to create and assign this private field so that we can use this private field now inside the methods over here inside the controller so now we will the application will give us an instance of the application dbcon text class so we don't have to say new application dbcon text class and we don't have to new it up and manage the instances the application is doing it for us so let's use the DB context class and let's say await dbcontext class dot add so I Dot categories because that's the categories collection so categories dot add async method and then pass the category that we have want to create over here inside this method so this line will basically provide the category to the collections that we have inside the dbcon text class but when the application runs this line alone will not create the new category inside the database because we have to tell the DB context class to save the changes so we will have another line and say now wait dbcontext class dot save changes async and with that line The Entity framework core will actually save the changes inside the database after this has been saved we want to return the result so we want to return something like an OK response which is a HTTP 200 response if I hover over it it is a success status response so we'll say okay and also pass the return result with it so the result return result you would be enticed to use the category domain model but as we discussed we never expose the domain models so we'll have to map this back from the domain model to a dto and for that we can create a new dto and we can call it the category dto so let's say right click on detail folder add a new class and let's call it category dto.cs and category dto will have all the information required to the user that is the angular application and that will be the three properties that we have the ID name and the URL handle so we have this I'll paste that in the category in dto model and now I can say variable response is equal to new category dto and inside that we'll have three properties so the ID is now fulfilled or populated by The Entity framework core so I can actually say category dot ID then name is equal to category dot name and then URL handle is equal to category dot URL handle so now we can return the DT object back so I'll say OK response and give the response back to the caller that is that will be the angular application later on so with these changes it is now time to test our application so I will run the application using this run button over here when we run the web API it presents us with the Swagger UI screen and Swagger is basically a client from which you can see the documentation of the API that you have and also a tool from which you can trigger these endpoints so we have two endpoints the categories and the weather forecast which was given to us by default so we can skip that but this is the new endpoint which is the categories controller and inside this controller we only have one action method as of now so let's expand on this post action method and click on try it out it needs the two properties which is the name and the URL handle and then we will use this execute button to create this so let's put a breakpoint back inside our code so we have this action method which is the post action method so let's put a breakpoint over here and come back to Swagger and create a new category so I'll give the name as HTML and let's give the URL handle as HTML hyphen blogs because that's what a URL should look like so with that I will click on the execute button this takes me to the debugging point that I have inside the controller and let's go line by line so it's first creating the dto object or the domain model object from the dto that we have so we are getting the information back inside the request the second thing is anti-free Entity framework is basically adding this category to the categories collection so if I execute this step it still has not created the category and I can confirm that by going to the table and selecting on the categories table so select star so you can see we don't have anything here as of now but as when I click on or execute this line which is the save changes async and if I go to the table and execute this again we can now see the HTML category over there with the ID generated as well and finally we are mapping this back and returning the response so I can click on the continue button and Swagger will Now display me the response over here which is the success response so if I execute this again with a different one so let's say CSS CSS blogs click on execute and let's let it continue we can now see the response body which is the success response because it is the HTTP code is 200 and we have the name URL handle and the ID information as well so by this we can say that we have successfully created our first action method that is to create a category in this lecture let's understand what repository pattern is repository pattern in asp.net core is a design pattern that helps to separate the data access layer from the rest of the application it provides a standard interface which is an interface class for accessing and managing data in a data store such as a database without exposing the underlying implementation detail to the rest of the application repository pattern typically involves creating an abstraction layer between the application and the data store which is implemented by a concrete repository class the repository class is responsible for performing crud operations that is create read update and delete on the data store and it exposes a set of methods that the application can use to interact with the data if you remember your application now we have the DB context class injected inside the controller and it is the controller who is directly talking to the database using that DB context that is also a wrong practice and using the repository design pattern we can eliminate that by adding an abstraction layer in between repositories can be added in between the controller and the database so that all the operations on the database is then handled by the Repository the DB context class is injected inside the repository rather than inside the controller and it is the repository that then injects in the controller so the controller will use the repository instead of using the DB context by doing that the controller now has no awareness of what's being called through the DB context whether it's a SQL Server database or a mongodb database it has no idea about it controller is just using the interface method exposed by the interface repository and the implementation is hidden behind the implementation Repository using that you can switch the logic and the data stores behind the implementation repository for example you can use Entity framework code to store your changes in a database or you can just use an in-memory database by creating an another implementation repository all of those changes are happening behind the repository and the controller has no knowledge about the data stores at all by using repository pattern in asp.net core we developers can achieve several benefits that is decoupling the data access layer from the rest of the application which makes it easier to maintain and test the application providing a standard interface for accessing data which improves the consistency and readability of the code now every connection to the database goes through the Repository we can also improve the performance of the application by using caching batching or other optimization techniques supporting multiple data sources which allows the application to switch between different data sources without affecting the application logic overall the repository pattern is a powerful tool for managing data in asp.net core applications and we will introduce repositories in our application as well in the last lecture we saw how repository pattern can be a great benefit to our application so now we want to implement repository pattern inside our application so for that I will first create a folder in which I will create the interfaces and implementations for these repositories so right click on the project go to add new folder and let's call this repositories [Music] and the repositories folder let's create two more folders one for the interface and one for the implementation so right click on the repositories folder add a new folder and call this the interface and another one for the implementation so first let's create an interface for the category repository so I will right click on the interface add a new class and because this is an interface I will select the interface from here and then rename this to I category Repository dot CS click on ADD and this is an interface a public interface I category repository in here we can only define the definition of a method and not an actual implementation so let's create the definition for the create category method so that will be a task of type category and that will be the return type the name of the method will be create async and it only takes one parameter that is the domain model so we will take the category domain model and give it a name repositories should only deal with the domain models so any conversion or mapping that has to be done between dtos has to be done inside the controller or the services if there's any so now we have created a definition and it will basically take a category and insert it in the database and then return the created category so now we have the interface let's create the implementation class for that right click on the implementation folder add a new class and rename this to category Repository dot CS and this class basically inherits from the I category repository interface and because this has this interface has one method definition this implementation class has to has to have those methods and let's create those methods so I can easily click on this interface press control Dot and say Implement interface so now the class is implementing this interface method but we have to just change this internal definition because we are taking away the functionality of the DB context class from the controller so because we were doing the DB context and saving the data over here inside the controller that is a bad practice so let's remove this functionality from the controller and add it to the repository instead for that we would have to inject the DB context class inside the Constructor to this class so let's create a Constructor to this repository ctor double tab to create a Constructor and then inject the application DB context so application DB context class give it a name so I'll call this the DB context and press Ctrl dot to create and assign this private read-only field now this private read-only field can be used inside this create async method over here and we basically want to do the same thing as we are doing in the controller but now we'll take this away from the controller so I'll do a control X and paste it inside over here because we want to have this as an asynchronous function we'll say public async task of type category and that fixes the red squigglies finally because it expects this method expects a return of type category we have the category created already so we can just return the category domain model from here as you can see in this repository we are only dealing with the domain models and not the details at all and we will never deal with DDOS inside the repositories so I have this method now to be able to use this repository I have to inject this again using dependency injection in the application so that I can then use it inside the controller so I will first go to program.cs file and before we build the application I can come over here and say Builder dot Services dot add scoped and add scoped needs a type of an interface so I category Repository comma and it needs an implementation class so that is the category Repository [Music] and then open and close the round brackets and this is how you inject a service inside the program.cs file it reads as that if I want to inject or if I want to get an implementation class please provide me the implementation class coming from this class and that's how I can use it inside the controller so now that we have injected it I can come back to the controller and I am no longer using the DB context class inside the controller so I can get rid of this this and this line instead I want to use the repository because now repository is doing the heavy lifting of saving the changes to the database so any communication with the database has to be done through the repository so I will inject the I category repository interface give it a name and then press Ctrl Dot and create and assign this field so I have a create repository interface implementation instance so after I map it I can say I can say update category repository dot create async method because that is the only method that exists in that implementation at the moment and then pass the category to it and with that line we are basically abstracting the implementation to the repository and the controller has no idea how the repository is able to talk and save these changes inside the database whether is it Entity framework core or just ado.net it doesn't care the controllers is basically giving that functionality to the repository to do its job and by this we have changed the functionality by not using the DB context class directly in the controller but by using the repository in the controller so if we now run this application it should behave exactly the same as it was before this change but now we have just made it better by using repository pattern so Swagger is running I expand on the action method that we have click on try it out and create a new category so let's create the asp.net category so asp.net core and the URL handle will be ASP net blogs so with that I'll click on execute and wait for a response back from the API so we got a 200 success response back and we have the URL handle name and identifier and if we check the categories table we should now have three categories in here so we can say that we have successfully created the create category action method and it's using the best practices such as asynchronous programming and repository pattern as well in this lecture we will create a new angular application from scratch using angular CLI if you have not followed the installation videos in Section 1 I would suggest you to go back and watch the development setup videos for angular we would need node and the angular CLI installed before we can proceed ahead we are going to create our angular application inside this UI folder this is the folder which we created in the previous section and is empty at the moment so make sure you navigate to this folder before you do anything else in here you can open your terminal or your command prompt window or a Powershell window pointing to this location I am in Windows so I can press shift and right click over here to open a Powershell window so this will basically is pointing to e Drive udemy code pulse the UI folder in which I want to actually create my angular application and I have node and angular CLI installed so with that I will write the command NG new and then the project name so I'll write the command NG new and then the name of the project which is code pulse and with that press enter now angular CLI will ask you a few questions before it actually creates the project for you the first question angular CLI asks us is would you like to add angular routing and it says yes or no and here we will type y for yes and we want angular routing the next question it asks is which style sheet format would you like to use in our case in our application we would like to use CSS but you can use the arrow keys if you want something else but for our case we will use CSS and press enter over here as well now it is installing the npm packages needed for angular to perform or run and it will take a few seconds for angular CLI to create this project for us so it took angular a minute or two to create all the files necessary for our application and it has created a folder over here and the folder has the angular application so coming back to our our Powershell or the command prompt window or The Terminal window we will navigate to this folder which it created and that is inside the UI folder so I will say CD code pulse and navigate inside the folder and in here I will open my visual studio code and a shortcut for that is code space Dot and that opens the folder which is over here so now we have Visual Studio code and visual studio code has opened the code pulse folder for us in the next lecture let's come back to see all the files and folders structure that has been created by angular CLI and understand our project a little bit more [Music] in this lecture we will look at the files and folders that were created as part of the angular scaffolding when angular CLI created the angular application for us so let's come back to visual studio code and visual studio code is the editor that I will be using to to develop the angular application whereas I will do all the coding for the API which is in.net in visual studio so you can see or you can make out the change of interface so the solution Explorer in Visual Studio was on the right hand side and the kind of the Explorer of Visual Studio code is on the left hand side so this is the IDE we are going to use for angular development when we look at the angular application we have the node modules folder which is just a folder to get all the dependencies needed by the angular application so we can completely ignore this folder for now it's not basically part of the project at all all the necessary files reside in the source folder over here we have the app folder the assets folder and the index HTML file as well so things start with the index.html file if you look at it we have the basic HTML setup and inside the body we have the app hyphen root component if you know that angular comprises of multiple components and this is the component that angular is rendering by default so components live inside the app folder over here so basically if you look for the app Root component is basically is going to the app folder and in here we have the app component files which are the CSS file the HTML file the spec file for testing and the typescript file so we are Keen in knowing the typescript file for sure so if I open that we have a selector that is app hyphen root and this is how the the index.html knows that we have to call the app Root component because that is the selector and this relates to the app component.ts file over here so that is the selector we have and another important thing in the component.ts file is the template URL that it points to the same folder and it's pointing to the app component.html file so the template is basically our HTML and styles are our CSS files so we have all this component information in this component tag of this component TS file and these are the three files CSS HTML and typescript file over here in the actual component class we just are using the title to pass it back to the HTML file so if you look at this title this should be used in the HTML over here somewhere other than the component and the index.html we have the assets folder which will be used to keep static files like images or other CSS classes as well after that we have the main.ts which is basically starting up the app module which resides inside the app folder as well so the app module is basically an important file or important class inside angular and it basically handles all the Imports declarations and other stuff and other providers and and submits this or you know uses this information to provide this to the entire application after that we have the app routing module as well which will be used to create routes and by routes basically we will have a map between the route and the component that will get loaded when that route is accessed we have another file called the style.css which we can use to add the global Styles which are used throughout the application otherwise the local Styles can also be added to the component CSS classes so now that we have seen the files and structure of this angular application it is now time to run this and see what we get out of the box so I'll go back to the Powershell or command prompt or terminal window and I am inside the project so inside the UI folder inside code pulse which is this one in here I will write the command Ng serve hyphen hyphen open to actually open the browser as well so I'll run this command and it may take some time for the first time when angular is running but it should be there soon I by mistake type server so it should be NG serve hyphen hyphen open angular CLI then opens a browser and runs the application on localhost 4200 and here's the application so the application just has some scaffolded HTML which comes from the app component and there are just links to angular documentation so we wouldn't be needed all of these we would actually clean this uh this beginning page and we'll start to create the components so we'll come back in the next lecture and we will create our first component in the last lecture we saw the files and folders that were created by angular CLI as part of the scaffolding and we also ran our angular application and this is what we get by default now in this lecture we are going to clean this application so that we have a blank slate and then we are going to create a new component in angular so for that let's come back to visual studio code and inside the source folder we have the index HTML and that is pointing to the app component so let's open the app component and we have the app component HTML and all that screen or the website that you see over here is basically pointing to this HTML code so you have the style the CSS files and then the HTML code over here all in this file so what I will do is select all of this HTML but exclude the router Outlet and delete that so I'm only keeping the router Outlet because the router Outlet is responsible to display the components that are rendered from the app routing module so with that change I will save this file and if I come back to the browser we have the localhost 4200 it refreshes automatically because angular knows that we have saved some changes and it does an automatic refresh and now we have a white Blank Slate now we are ready to create our first component in our application we are going to use the popular bootstrap CSS framework and to do that to install that in our application we are going to use its CDN so we can navigate to bootstrap and this is the website and that is get bootstrap.com alternatively you can go to Google and search for bootstrap and you will enter this page from here we can go to the docs and we have the get started section over here or on the home page I think we have if you scroll down we have the include via CDN links and that's the approach we are going to take today and that's the easiest and the simplest approach and you know we can just quickly add bootstrap to our angular website and you know be up and running in no time so we have this CSS file which is the link so I'll copy that come back to visual studio code and open the index HTML file inside the head tag over here just before it ends I will paste the link that I copied over here after that we also want the JavaScript file for bootstrap and that is the second link over here so I will copy that come back and paste it again inside the head tag over here so these are the two links one for CSS and one for the JavaScript file that we need to run bootstrap inside our application to confirm that we have correctly installed and are able to use bootstrap I will temporarily create a HTML element let's say a button and give it a bootstrap class of button button hyphen primary and let's call this a button save that and if we come back we should have our changes reflected in the angular website [Music] so if I refresh this we have a button and we have the styles that bootstrap gives us out of the box and that confirms that we are able to use bootstrap in our website so I will delete the temporary button that I created and now we are ready to create the first component that will be the top navigation bar in the next lecture in this lecture we are going to create our first angular component and we will start with the top navigation bar component if you look at this diagram the black outline the black rectangle represents our website and in our website the red rectangle represents the navbar component and if you imagine a blog the blog will have the navbar component on every page because that's the area where users can navigate from the yellow part of the application represents the components that will change based on the route hence we have the router Outlet keyword in our app dot component.ts file so when we create our navbar component we will have that in the app dot component.ts file and basically have that fixed and the part in yellow will change and we will render components based on the route that we take our navbar component will look something like this on the top you can see we have the name of the application which is code pulse after that we have the link to the home page if we are not on the home page and then we will have a admin menu because the admin will be able to configure the category list and the blog post list basically perform crud operations through this angular app and this angular app will then communicate with the asp.net core web API that we created so that will be a admin who will perform this job on this menu we will also have the login and register functionality but that is a later part of this course so first of all let's focus on creating the admin functionalities and then we move on to restricting this functionality only to admins so let's come back to visual studio code and create the first angular component and that is the navbar component inside app I will create a new folder called core and that will be the structure of the application because I believe the navbar is a core component so that will reside in the core folder so I will create a new folder under app and I will call this core inside the core folder I will have a components folder so another folder inside core called components and inside the components I will create the navbar component for that I would need a terminal window so you can use a terminal window inside Visual Studio code if you go to terminal and click on new terminal we get a terminal window over here I have that minimized but I can easily use the link over here and expand this so now I will do all my terminal stuff to create components to create services for the application from Visual Studio code itself and I will do the running operation of this application through the Powershell window so that we have a separation and I know if the application is running or not Now to create my first component I want to go and navigate inside the components folder so I am inside code pulse which is here so I will say CD go to Source then app and I'm pressing tab as I am switching between folders so Source app core tab components Tab and then I will press enter so now I am inside the components folder over here and in here I want to create my component and the the way to create a component the command line to create a component is NG generate component and the short form for that is NG g g for Generate C for component and then the name of the component the name of the component I will call it the nav bar and we don't have to write component but just navbar so NG g c nav bar press enter and angular CLI will create a component under this folder so it creates four files inside the navbar folder inside the components folder we have the CSS file we have the HTML the spec file and the navbar component.ts file [Music] now I want to basically insert some HTML inside the uh the navbar.component.html file so if you look at the TS file the typescript file we have the selector as app hyphen navbar and this is the selector that we will use to render this component in other components for example we want to use the navigation component in the app component.ts file so open that file or the HTML file and just above the router Outlet I will I will write app hyphen navbar and finish the tag and this is where our nav bar will appear and later on we'll have the router Outlet based on the route it will render the component so I will save that and we only have this paragraph in the HTML so if I go back to the website we have the navbar works paragraph on the top over here so this is how our nav bar is now represented on the screen now we want to change this HTML and introduce an actual nav bar from bootstrap so for that I will go to the bootstrap website in the talks section over here you can easily search for any of the components that bootstrap provides us so let's say I want to go for nav bar and I will click enter and this is the documentation for the navbar and they have really good documentation so you can scroll down and copy the HTML that you want to create and paste it and modify as per your liking so I will use this one over here I will copy all of the HTML and paste it inside the nav bar save it and if you come back to the application you can see that the navigation is now on the website now we will just change this as per our own liking for example I don't need the search and the button so I will delete it I will also delete the link and the disable button and I will change this to admin so first of all I don't need this form in the HTML so I'll remove this then I don't need the disabled list item and I also don't need this link over here as well so I will delete delete the list item here now I am only left with two list items one is the home one is the drop down and I also want to change this nav bar so let's come back let's wrap this nav in a container rather than a container fluid so I will take the fluid out of it and this will be just a container after that we will change the name so this will become code pulse or any name that you have given to your application now the first link is home and the second link will be the drop down for the admin so I will change that to admin and the admin will only have one Link at the moment so I can remove this I'll comment the divider because I will later use it and comment this as well so the admin drop down will only have one item and that will be for the categories as we saw in the screenshot so this will be the categories so on saving that I will come back to C and we have the top navigation bar over here with the home and the admin so if I click the admin we only have one uh navigation link which should go to the categories list we don't have that component yet but we will create that in the next lecture in the last lecture we created our first component and that was the navbar component and we also have a link in that admin drop down which should go to the categories component page but we don't have a categories component page at the moment so we will create that in this lecture the categories component list page will look something like this we have the nav bar on the top already but on this page we will display a heading that will say categories list after that on the right hand side we have a button to navigate to a different page from where we can add a new category and finally after that we will have a table that fetches all the categories from the web API and displays it as a table we will do the work for the category list page later on in the section but before that we just want to navigate to the add category page from that ad category button so let's create the HTML and the component for the categories list page and prepare the routing for the add category component let's come back to the application we want to now create a different folder where we can create our components which represents features or pages so inside the app folder we will create a new folder called features so inside here I will create a new folder called features and the features folder will have a category folder so features folder will have a category folder this category folder will have multiple components like add category category list or edit category so we want to create a new component in this category folder so let's open our terminal again and let's navigate to this category folder so I'll go back so I'm in core at the moment so I'll go back one more time CD dot dot I'm inside app now I want to navigate to Features so CD features then category and inside this category folder I want to create a new component for the category list and you know how to create a new component we want to create a new component by writing n g g for Generate C for component and then the name of the component which will be category hyphen list so press enter after that and this will create a new component called category list component inside this folder now that we have created the component let's go and add some HTML like the heading and the button for the add category component so I will go to the category list component.html file open that and remove the default HTML that we get instead we will write some HTML by ourselves so we'll start with the div so div with the class of container so class of container the container will have a H1 heading so H1 and that will say category list and this will have a class which is again a bootstrap class of margin top hyphen 3. so Mt hyphen 3. after the heading we will have a div which will have that button on the right hand side so a div the div will have a class of flex so display it as a flex D hyphen Flex then justify hyphen content hyphen end to push the button to the right hand side and again this will have a margin top of three so Mt hyphen 3. inside this div we will have the anchor button so we will say an anchor list and I can remove the href for now and have the label as ADD space category and this will have a few bootstrap classes so BTN and BTN hyphen primary so save this I will add the href back because I want to explain how the routing works so href is equal to uh and we'll add that later on that is okay so save the changes and it won't come up over here because we are not showing that component as of yet even if we click this it's not going anywhere it's just going to Hash over here but we want to Now set up the routing for this category list component page and the way routing Works in angular is that you have to define the routing in the app hyphen routing dot module file so if I open this we have a constant which is an array of routes now we have to add to this array of routes the route that we want to create so let's for example say I want to view the category list component when I go to a path so the path is important so in this array I will have an object the object will have the first property as path and in this path I will say if I navigate to admin forward slash categories then load this component so I want to render the component category list component because that's the component that we created just now and the name is coming from the typescript file so if I come back to the category list folder the typescript file is the name of the class category list component so that is what we are mentioning in the routes over here when I go to admin slash categories open up this so if we want to test this out I can just directly in this navigation I can write forward slash admin forward slash categories and if I enter that it is loading the correct page for us or the component for us so it's showing the category list heading and the button the same thing that we created now we just have to hook this nav bar item to this page so we can come back to the navigation which is inside the core folder navbar component and come back to the HTML in the list item over here the href is pointing to Hash at the moment but we know that it resides in admin forward slash categories so if we save that and come back to the website refresh this if I hover over the categories on the left hand bottom corner you can see that it's going to localhost 4200 forward slash admin forward slash categories so if I click this the page refresh and it actually went to this page so I can show this again if I click on this it goes to the admin categories page but you notice this refresh button over here that if I click it again the page actually refreshes so it's not really behaving like a single page application as it should so the trick over here is not to use href because href will load the actual page it is going to instead we use a different thing instead of the href we will use a directive called router link and that router link will be a directive that is used to create links or navigation within your application and the way we write this is I can remove this for now and it will be router link is equal to an inside double quotes will be the destination it wants to go to so again forward slash admin forward slash categories so save those changes and come back to the application and let's go back to the home page first so if I now navigate to categories which is going to admin categories again just pay focus on this refresh over here so if I go to categories it now doesn't refresh and it is now behaving like a single page application without giving the user an experience that it is leaving the page and re-rendering another page so it is a smooth transition between because it is actually just rendering this component in the application the way router link can be written in another way is with square brackets and we will use this convention because then it becomes easier for us to add other parameters to the route so instead of this inside double quotes we will say in square brackets the first string which is forward slash admin forward slash categories and then you can put a comma and add other informations to the route as well but that is for later but now we can use the router link to navigate to the categories component so one more try you come back go back to the home page and then go to the categories list page so our categories list page is now working and we are able to navigate to it we will now create the add category component in the next lecture and also create the routing of the ad category page from this page in this lecture we are going to create the add category component and we'll hook it from this button so that whenever this button is clicked it goes to the add category page so let's come back to visual studio where we will create this new component and this component will go under features under the category folder we have a folder already or a component which is category list so it will be parallel to this folder so make sure the category folder is underlined so that's where you want it to be and let's open our terminal and inside the terminal we want to navigate to the category folder and it is already in that folder so I am all right so now in here I will write NG G for Generate C for component and the name of the common in which is ADD hyphen category press enter to create this component now angular CLI has created the component for us and if we expand on features we have the category folder which also has these two components one is the list which we created in the previous lecture and this is the add category component which we just created now we will work in the HTML of this component but before we do that let's quickly bind the routing coming from the button in the list to this add category component so let's open the HTML which is the category list component HTML and in here we will Define a router link not an href but a router link inside square brackets is equal to inside square brackets and then a string it will go to forward slash admin forward slash categories forward slash add and this will be the route that will be used to navigate from this list page to the add category page but we haven't defined the routing of this component in the app routing module so we can close this and open the app hyphen routing module typescript file in here we have to define the path and the component combination so that angular application knows where to go so another object and this is the array of objects so it can have multiple objects in this array so in here we will Define the path and the path was admin forward slash categories forward slash add and whenever we reach this URL it should load the component add category component so this is the component that gets loaded when this route is reached so we can now close this app routing module and if we open the application it must have refreshed by now so if we hover over the link you can see it on the left hand bottom corner if we click that we can see that the add category Works HTML and this is coming from the add category component so now it's time to work in this particular component so let's come back to the application for the HTML of the add category component we would need a heading and after that we need two input elements one for the category name and one for the category URL handle and then a button that submits this form so now that we know what we are trying to achieve let's come back to visual studio code and write this HTML back inside Visual Studio code we are going to open the add category component and specifically the HTML file in this and now we can remove the default HTML code that is generated and start with the container so I will create a div with a class of container so you can put a dot and press Tab and it creates a class so div with the class of container after that we need an H1 tag and that will have the heading of add space category the H1 tag will also have a class which will have a margin top of three after that we will introduce a form which will submit on a button click so let's create a form and we can for now remove the action attribute from there inside the form we will have a div which will have a class margin top of 2 so to have a top margin and after that we will have the div with the class of margin top three this will have a label and has a class of form hyphen label that's a bootstrap class the label will say category name that's the value of the label and with the label we'll also have an input element of type text which will have the category name and we will give this a ID as well so we'll have the ID as category name we will have a class of form hyphen control which is a bootstrap class and we will also have a name attribute of category name and with that we have defined one input element which is for the category name so I'll copy that and paste it one more time and this will be the input element for the category URL handle because if you remember there's a there is only three properties for category which is the ID name and URL handle so we want to submit this request to the API and we won't pass the ID so we only need the category name and the URL handle for this so I will change the label I will change the ID to say this is category URL handle and also the name to be the same as the ID if we save the changes we can come back to the browser to see the changes that we are doing that is getting reflected over here in the form now we need a button that will submit this form so we need a button let's come back to visual studio and along with this div we will create one more div with a class of margin top hyphen 3 so class Mt hyphen 3 and this will have a button which has a type of submit to submit this form and a class of button and button hyphen primary which are bootstrap classes this button will have a text that can say save or submit whatever you prefer and this will be the button that is going to be used for submitting this form now we want to basically submit this form and capture the values inside the component dot typescript file but how to do that for this we are going to use template forms that are provided by angular so let's see how we can do that let's come back to visual studio code and open app.module.ts in here we want to import a module that is responsible for submitting these forms and that's called the forms module so I will write forms module over here press enter and this will import forms module from angular forward slash forms once we have done the import only then we can use the forms module inside the components of our application if we try to use the form submission without this it won't work and it will actually throw an error as well now to complete our form submission I can save this and I can close the app module file back inside the add hyphen category component HTML file I will give this form a variable name so hash form creates a temporary variable is equal to NG form and this NG form is basically coming from forms module and it tells that this is an angular form now that we have defined the form we also want to create an on submit method for this form so when we submit this form we want to actually start a method call so for that we will use round brackets and this is an event and we'll use the NG submit event and we will say on this submit of the form we will but instantiate the method on form submit and this is a method that we will create it doesn't exist at the moment so we will create this method inside the typegrip file over here so let's open the add category component typescript file and inside this class we have to create this method so let's create this method which is on form submit and the name could be totally different so that is all okay so this name has to match this name and you can Define this as or your own now that we have defined the method the red squiggly goes away because it is able to know that this form this method actually exists in the component file which is here so now we want to capture the values of these two input elements one for the category name and one for the category URL inside this form so that we can submit it to the API but how to do that for this we will use the two-way binding that angular provides us we will read the values coming from the input elements of the HTML back inside the component.ts file to do that we will create a model and for the model let's create a folder as well so I inside the category folder because that's highlighted in here I will create a folder called models and the models folder will have different types of models the first one we would need is the add category request model so inside the models folder I will create a new file and would call it add hyphen category hyphen request dot model dot DSM and that's the convention we follow when creating models and inside the model it will basically be an interface so we will write export interface add category request and open and close braces so this is going to be our model and this model will have two properties one will be name which will be of type string and after that we will have the URL handle is also of type string and these are the only two details needed by that form to able to collect the details and pass it to the API to create this category so we will use this request object inside the component so we are back inside the add category component.ts and in here we will create a new model I'll call this model and that is of type add category not the component but the add category request and we have to initialize the model because it says the property model has no initializer and it is not definitely assigned in the Constructor so let's use the Constructor to initialize this model so for the Constructor you can say Constructor open braces and curly braces and in here I can say this dot model is equal to new object and I'll say the name is an empty string and the URL handle is also an empty string and this will initialize the model that we have over here and now we basically have to apply two-way data binding and bind this model object with the HTML so that we can later on get it back inside the on form submit method so the way to bind the model inside the HTML is to use square brackets then round brackets and write NG model is equal to the property that you want to bind it against so that property is model dot name because this is the category name and we want to bind it against the name property inside the model that's why we'll say NG model is equal to model dot name and this is two-way data binding in two-way data binding the value of this name is actually coming from the initializer over here let me change this to Sameer what do you think will happen this model and the name value Samir is actually coming and displayed inside the input text over here to prove that I'll go back to the browser and you can see that we haven't typed anything in but it still displays the value of the model name over here now I can revert this back to empty list and this will still obey two-way data binding because when we submit this form the property name of name is now populated in this model and we can actually console this over here to prove this so let's console log this dot model now to test it let's go back and right click and inspect this website I'll come to the console tab and in here I will write let's say Sameer Sani it could be just anything and I'll save this and I can see in the console that there's an object with the name property as Samir Sani but the URL handle is still null and even if I bring anything over here let's say this is a test and submit this again we can still see that the URL handle is empty because we haven't applied two-way data binding to this property so let's quickly do that let's come back to the HTML and apply two-way data binding so NG model [Music] is equal to model dot URL handle and if you don't see a red squiggly that means everything is working fine it is able to recognize the property inside this class so now that we have two-way data binding for both these properties if I now say this is HTML HTML blogs let's save that and it says the name is HTML and the URL handle is HTML hyphen blocks so we are able to capture the values of these two input properties using template forms where we are submitting the form and capturing the results inside a method in the next lecture we are going to use these values and create a angular service to actually send these values to the API that is right for sending or communicating with a external API we use angular services and that's what we are going to do in the next lecture [Music] in this lecture we will create an angular service and we'll submit this form and give data to the angular service where it will talk to the API that we created the asp.net core API and it will submit the data using the angular service we will create a new Services folder inside the category feature so make sure category is selected and we will create a new folder called services so not here but inside the category folder so services and inside the services folder we will create this new service so let's browse inside the services folder so let's say CD services and I'm now inside the services folder of the category feature in here I will write the angular CI CLI command NG G4 generate s for service and then we'll write the name of the service that will be category and press enter to create this service so the service was created and it is inside the services folder over here if I open the Service it is a class that is called category service and it is basically injectable and it is provided in the root that means this service is available throughout the application and in every component whenever this category service or component is created it goes as a reference in the app dot module as declaration so you can see that the component is over here and we also have the service injected in the root now for the angular service to be able to talk to an external API we use the HTTP client module inside angular and we have to first import that in the app.module.ts file which is over here so inside the Imports array after the forms module I will write http client module and sometimes it just doesn't work because it's unable to import it but and we have to write the import statement ourselves so we'll write import inside the curly braces we'll say HTTP client module and make sure the spellings are all right with the module over here and this basically comes from at angular forward slash common forward slash http and put a semicolon after that so this way we have imported the HTTP client module and it sits in the Imports array now we can close the app module.ts and that basically means that the client module the HTTP client module is now available to be used inside components and services now as we know that the that the mission of this service is to create is to talk to the API we will create a method that will be something like add category it would take the request from the model so let's say something over here from this model and it will pass this request to the API using the HTTP clients module so first of all let me create a method and let's call it add category now add category would take the model that we defined inside here so this is the model and this is the type so I'll copy that and we'll say it will take a model of type add category request press Ctrl dot to add the import statement on the top and as a return type it will return an observable and observable comes from you know the NG the rxjs functionality it is basically like a promise to which you have to subscribe to and once you have subscribed you can get the values from that observable so it will be of type observable and press Ctrl dot to import this from rxjs and angular and rxjs are you know they just work very closely with each other so the observable will be of something and let's say this is of type void which is empty and after that we will have to return something from here using the HTTP because we want to communicate with the API or the external API so let's say return this Dot and we want to inject the HTTP module which is usually done in the Constructor so let's first inject the HTTP client module so private http and this is of type HTTP client and this comes from the you know HTTP folder as well so press that or control Dot and import it from angular common HTTP so now we have injected the HTTP client we can use this over here so return this dot HTTP Dot and it gives us various methods to either get or post or put to a different or external API so we want the post call because the ad category method is a post call so we'll say post return a type of void because we don't want a return from that method and in here it needs the URL which it has to go to if we come back to Swagger the one that we created our API in we have so we have the method defined in Swagger which is the categories endpoint and it is a post method API forward slash categories so this is the URL it should go to so to get the full URL it should go to this because that is the URL it which is My URL for the API yours could be totally different and then API forward slash categories so in here in back in the visual studio code we want to go to a a URL so we will write in in the strings so this is the the back apostrophe so I'll say dollar and I'll launch a dollar I'll just say the HTTP is localhost forward slash API forward slash categories and I can remove this as a normal string as well but later on we'll have to use this so this will be a string URL so this goes to API localhost categories but after that we also have to provide the body and the body is basically the model which we have defined and make sure that the properties of the model matches exactly to how it is expected inside the API so if I open the API this is the category request ETO the name and the URL handle has to exactly match how we have defined it over here so the name and the URL handle if it matches it will return a success so now I can say this and that completes our ad category method now we have defined the method but we want to invoke this method from the add category component so in the add category component we first want to inject this category service because it is injectable and it is provided in the root so it is available to this component if we inject it so in the Constructor I will say private the name of the category service or category service which is of type category service and it's imported from the services folder now we have injected it and we can use it inside the on form submit method so instead of using the console.log I can say this dot categoryservice dot it only exposes one method which is ADD category and to that method I can pass the model and say this dot model now let's put a breakpoint and make sure that your API is running otherwise you know it's not connected to anything and it's not able to call the API so make sure your API is running I will put a breakpoint on the first line of this method so that we know when this method is called and now that that's done and we have connected the service to the component we will try to call this using our browser so we will actually try to send values from the component to the service to the API so let's say we have the HTML service so HTML HTML blogs so let's save that or try to save that and see what happens so if I save it I have a breakpoint over here but it is not getting triggered why is that this is because if we come back to visual studio code I told you that the service method is a observable of type something and observable values they don't do anything on their own we have to subscribe to their values for us to be able to trigger something so for the service to be actually able to call the API we would have to subscribe to this observable and then it will actually trigger the call so let's subscribe to this to this observable so after the add category method I will say dot subscribe and this subscribe method takes an object in which we have two or three options so one is next next is basically what happens next if it was a success response we also have an error what in that case if it's an error the caller the Call Comes to this method and the last one is complete so if the process was completed do you want to clear anything or you know do side effects of this method so we will use the next method almost all the time so next is then a method which takes a response or which gets a response such that open and close braces so this is the format of the Subscribe method and we have the next which will get a success response you can call it a response or success response then we can put a comma and say error and it is the same format we get the error back and such that an object so you can do something over here when the error response is returned or you can do something in this method when the success response is done so in here we are working on the success response so when that happens we want to do something let's say when the success happens we want to console DOT log and say this was successful and that is it so now that we have subscribed to the method we would actually see the in the call actually going to the API so let's come back to the application and do this one more time let's say this was a C sharp blog let's say C sharp hyphen blogs save that and we've got some errors on the console window over here and it basically says cars missing allow origin so we have we the met the thing says the same origin policy this allows reading the remote resource at this because of course and course is basically a way of the API to protect its resources we are going to know more about cores in the next lecture and we'll see how to get rid of this in the last lecture we were trying to submit this form but we got a course error and now we are trying to remove or get rid of this course error by enabling it in the API so let's come back to the API and stop the API and let's try to enable cores so let's come to program.cs file and if we scroll down we have to enable use course inside the HTTP request pipeline so when the https redirection happens we want to say app dot use course and it basically takes a policy name or some options using the course policy Builder so we'll say options such that and we'll say options Dot and here we can Define the rules through which this API will work and will basically allow or disallow the requests coming in so for our convenience we will just say allow any header options dot allow any origin and last one will be options dot allow any method so using this we are basically making our API public but if you want to expose your apis for some type of headers or for some type of origins or for only some methods you would have to be more specific but for our application this is totally fine as well now that we have made the changes in the API we will run the API again and we will try to make a call from the browser from the angular application again so we can see that Swagger is running that means our API is running and make sure it is running so now we haven't made any change to our web application which is the angular application and we were seeing this error before but let's see what happens now let's try to send this request again so let's do that but this time it actually went to the API and it is stopped at the debugging point that we have I can get rid of it now and let it continue because we have already tested this functionality if you see the request we are getting the name and the URL handle over here so that means we are getting the correct request in the API and the API should be able to create this category so I let it continue and this time we get a text back saying that this was successful and this is coming back from the component and the Subscribe method that we had over here so we can say that our ad category form or the page is working as expected because we are doing subscriptions over here and we are subscribing to an observable it is equally important to have unsubscriptions and what are unsubscriptions we'll come back in the next lecture and understand and Implement unsubscriptions for our subscriptions [Music] in the last few lectures we subscribed to observables because observables need to be subscribed before we actually use them and use the values that they can provide us but it is equally important for us to unsubscribe from these observables let's see why unsubscribing from observables in angular is crucial for a pop proper management of memory optimizing performance preventing ghost subscriptions and avoiding unnecessary Network requests and improving the code maintainability so a lot of factors are there in the favor of unsubscribing observables it can lead to memory leaks it is always a best practice to unsubscribe from subscriptions when they are no longer needed to ensure the smooth functioning of your application so let's come back to the application and unsubscribe the observable so back into the app we will unsubscribe from this observable and it's very easy to do that as well all we have to do is to create a subscription so I'll create a private subscription so let's say the subscription name is ADD category subscription and this is of type subscription press Ctrl Dot and import this from rxjs and make it subscription or un undefined so by the question mark we are marking it as a subscription type or undefined so it's now time to use this and we basically assign the subscription coming from the ad category method and we just say this dot add category subscription is equal to the value coming from when we subscribe to it so if I hover over it it's an observable and it returns a subscription over here so we are actually assigning the subscription and now it's all about unsubscribing from the subscription when this component is no longer in use and we have life cycle hooks for angular applications and angular components so this component will basically implement the NG on Destroy method so let's say it says implements on Destroy [Music] press control Dot and import it from angular core so we have the on Destroy and we'll get the Reds quickly because we are not implementing this interface correctly so press or click the component over here and press Ctrl dot to quickly implement this interface and you get a the skeleton of this method so I'll bring that to the end and still inside the component so make sure it is still inside the component and in here we remove this exception and we say we want to unsubscribe when we destroy this component so we'll use the subscription again and say this dot add category subscription dot unsubscribe method and that is it so we have now unsubscribed from this subscription whenever the component is destroyed this basically completes the ad category functionality and we have now implemented the ad category functionality in the next section we are going to make use or create the API for the categories list over here so that we can display the categories found in the database and will also work in the angular application to display this in a table format [Music] if you have watched this video till here I'm pretty sure you'll love the entire course please use the link in the description of this video which will give you an instant discount the course has another 10 hours of development work in creating this application completely and covers a lot of other very important topics in great detail so don't wait for it click the link and I hope to see you in the course

Channel: Sameer Saini

Views: 43,287

Keywords: asp.net core web api, asp.net core api, asp.net core crud, asp.net core crud with entity framework, asp.net core crud with angular, angular crud with web api, angular crud with asp.net core web api, angular crud, angular crud tutorial, angular with asp.net core, angular with web api, asp.net core with angular, asp.net core with angular tutorial, .net 7 crud, .net7, Angular 16 crash course, Angular 16, Angular 16 Crud, .net 7, dotnet 7, Angular

Id: eNVbiIsoEUw

Length: 166min 45sec (10005 seconds)

Published: Thu Aug 03 2023