Angular 4 Tutorial - CRUD Operations (get/put/post/delete) #1

hi guys this is Umair in this video i'll be talking about current operations in angular 4 as you can see on my screen that I have a table of different products that I've created in my a JSON file and I can add a product I can delete product I can update my product and obviously I have get different products and show those products in this table so let's first add our product if I click on add product I can go back if I click on add product and let's add products let's say hat and it has a color green and if I click on add product I'll show a message new product has been added if I go back you can see that the product has been added in my table and in the same way I can delete my product if I click on delete it will ask me do I really want to believe my product I'll click OK and you can see that it has been deleted if I click on delete if I click on cancel it will not be deleted and if I want to update any particular product like let's say I want to update this t-shirt and the color of this t-shirt and if I click on update it will show my name and the color and if I want to change the color let's say the t-shirt color is red and if I click on update it will navigate to the home page and it will you can see that the color has been updated of my t-shirt ok and I have added the different validations as well like if I different route and it will if it doesn't find that particular route it will navigate to our home page if I click on update and you can see that I am going to update my first broke that has an ID one if I click back and if I click the third one you can see that 3 1 if I change to 21 we know that the 21 product of ID that has a 21 ID doesn't exist and if I click on enter it will show me a message that the product doesn't exist so that's why both the things are empty if I change to four you can see that the error message has gone and we have got the name and the color of our fourth product so these are the validations that I'll be doing and click on back a so I'll be starting from the beginner level from creating a new project and creating a new JSON file so stay tuned and let's start working on this project so I have opened webstorm and I've created an empty project it is just an empty folder in my specific directory in my system so first if I go to my browser and if I open up CLI toward angular that IO we can see that we have different steps I hope that you have seen my previous angular 4 tutorial series I'll be giving the link of that series in the description below in which I have shown you what are these steps and how to use these commands npm install' - angular CLI is used to install the CLI globally in our system that I have already done if you haven't installed it make sure you install this angular CLI in your system by running this command and now navigate to specific directory where I want to create my new project of angular 4 I'll run this command ng new and the name of my project so let's open up my webstorm and in this ng new and I will name this project grunt operations and I'll press ENTER and it will take some time a few minutes that depends upon your system and it will create all the dependencies that are required for running angular for application so after a few minutes it has installed all the dependency modules and created my project within this app folder so if I click on it you can see that it has created different JSON files package or JSON file karma for JUnit testing for automatic testing we don't need to install these things later on it it has automatically installed all the required things our angular 4 app so if I click on source folder you can see that inside it we have different bunch of folder that we are gonna be working with so before starting working on add I just want to show you that the JSON file that I'll be working for this tutorial will be running on a local server I can also add a JSON file directly in any directory and fetch and delete and update data directly in that folder but I'm not gonna be doing it what I need to do is if you open up the Jason - server it will show you a github directory of this JSON server what you need to do is you need to install this JSON server in your system globally if you're run in your CMD and Kim installed - G JSON server make sure you have installed NPM and nor the latest version of both the things and once you install those you need to run this command in order to install the JSON server and once it is installed we can run our JSON file in our local server in different ports if you want to change up what we can change the port as well so let's open up our project and I'm going to create my JSON file directly in my app folder noddings my angular 4 project folder that is what crud operations but in my app folder you can save it or create it anywhere you want so I will name it product store Jason ok certain C the JSON file has been created named product store JSON so inside it I'm going to create a default or two three products that will be default showing rather than adding my products from the start so let's create an object inside this object I'm going to name my array products and inside this array let's create two three objects and first one is the name tshirt and it's other property is color that is red okay so I'm going to copy this object comma paste comma and paste and change the name and color of both the objects that I have pasted so let's add trouser it's color is yellow and the third one is let's say hat it's color is blue so I've created my JSON file starting with an object inside this object with the key and then array contains different objects of my products so I've created a JSON file now I've already installed my JSON server in order to run this products dot JSON files using the JSON server let's open up my CMD and I'm going to open up my bot where my app folder exists in my system so let's open this is where my products exist so let's copy this part and in my D directory CD and I'm going to paste it so I have navigated to my app folder where my products dot JSON file exists so in order to run the JSON server jason - server i want to change a port okay so for changing the port - p and i'm going to a name let's say tetra file and the name of five products dot JSON let's press enter so we can see that this a server has been started in my url localhost colon tetra v if i go to my browser and localhost tetra v means that what jason sir what is working this is locally it has created the default fake rest api is for my products so if i click on products we can see that we can see different products that are created from my fight okay so over server is working so let's go ahead and write start writing and get these products in our angular 4 app so for any angular 4 app or we can see that we are we have opened the terminal in my webstorm and in order to run my application I need to navigate to my crud operations folder that is actually the name of my project so CD crud operations and ng space so so combined successfully if I navigate to my browser and if I localhost 42-hundred so app works so over angular for application has started working so an or server is working as well so let's open our app folder and in my current operations folder I have the source folder and this is the folder that is used to create component services directives pipes and so on so this is the index file where my app works content is being running and this is the app folder and this is the title coming from this is where the app works is written so this is the main component but I've bought to create my component even for my home page I don't want to make this app component as my home page because this is the app component that is used to dynamically generate the content so I don't want it to create be used as a home component so what I'm gonna do is I'm going to create a new component and I'm going to name my component home for creating a home component let's come to the terminal and in the terminal I would write ng space G and component and the name of my component is home so let's press ENTER and it has created my new component if I open up my app you can see that the home folder has been created and all the required files have been created created for my component because the CSS HTML and the TS file combined to form one component so in my app dot module dot TS we can see that it has already created home component and given the path of that component it has added the home component in my declarations ok so now I'm going to first create the route because I fought when the app starts I fought this page to navigate to my home component and fester that of home component and show that data in my this browser okay so for running it I'm going to fetch different modules so for adding the routes I need to write import router module from angular slash router alright so first of all let's copy this router module and come inside the imports I'll add a comma paste it dot for root path and I'm not going to give any path because the home page will remain the default domain that is the localhost for 200 in our case so I will write component and after that I'm going to name the class of my home component so paste it ok so I've created a role for my home component so in order to run the data of my home component in my app component and to open my channel and rather than writing the title I will write div and inside eight I will use outer outlet alright so that has been done now let's go back and save all the files and if I go back and run it again actually my project is not running ng so in order to run my project so let's go back and reload it so you can see it has shown me a message homeworks because this is the content that is coming from the home so in our app component we are fetching the data from the home component using the router and we are showing the data in the HTML of our home component okay so if we go back to home component and this is where the data is coming from okay so now this component is running now let's open up the home component dot TS file and inside it we need to write some corn or to fetch the data of this product or JSON file so in order to face the data we need to use the HTTP calls so I will import the HTTP HTTP I need to use the response module and I need the headers and that is coming from angular - HTTP all right so inside my home component I need to add this HTTP in my constructor so I will write private HTTP and HTTP okay so ng on in it is a function that automatically calls whenever overview initialized okay so I want to create a function first so let's create fetch data function and inside this function let's use this dot HTTP dot get and I need to give the part the URL where my file resides so my file reside localhost colon d'etre five slash products okay I'm not using the local server I can't directly give the part of my products to our JSON file okay so I would write dot subscribe response colon response equal to greater than and this dot products equals two response dot Jason let's create the products irate products equals to a rig alright so this is the array that is used right here the data that we'll set from this URL is going to be stored within this response and I'm calling the Jason functions and store the result in my product sorry okay but I don't want to call this function from my HTML I want this function to be called from this function because this function is automatically is going to call whenever or home view is going to initialize actually there is an error I need to write equals two so from ng in it I'm going to call this dot fetch data so now for getting the data over code has been written now let's write HTML for showing that data so open up my home component HTML and in my HTML I need to create a table so let's add a table th and first one is the ID the JSON server automatically creates ID so copy copy okay so second one is the name third one is the color okay and after that let's add alright so this is the rope but we don't know how many products are going to be fresh so on this TR I'm going to use ng for for right rating all the products and showing it and create the TR as much times as over products are so I will choose static ng for equals to let product of products ok so inside my TR I'm going to use DD actually above I need to write the edge for headings so let's change it later on so product dot ID copy it product dot name and product dot color okay let's add a heading above so h1 products th and the th and the th so let's save this file and if I navigate to my browser you can see that all the products have been fetched t-shirt browser and the Hat okay in order to show the ID I created a default products and by creating the default products it is not going to generate the IDS if I create my Prada using the Jason a server then it's going to initialize and assign the ID to that particular product okay so for now that's pretty much fine I need to write some CSS so for writing CSS let's open up the Styles dot CSS and write table comma th coma TD and I will write boarder one pixels solid black font size needs to be let's say 30 pixels the bedding is 10 pixels so let's save it and navigate to a browser you can see that the D shirt red trouser yellow hat blue and the data has been fetched from these products the same data that are written in our JSON server okay so what data has been fetched if we have run over come on now let's add our new products so for adding our new product let's first create our ad product link in our home HTML so for adding our product let's say a inside the a let's say plus ad product okay so let's open up the star store CSS and to a false size 30 pixels so let's navigate so over link is right here right now I can't click on it because I need to write H ref for making this work but I'm not going to use the H ref instead I need to create a new component that is going to be used for creating the new product okay so for creating a new component as I created the home component I need to close my project and I will write ng g component and let's say product so it's going to process it and it's going to create a new folder in my app and this is the product this has been created so let's go to app dot module and create a different route for it so copy and I'm going to change it product and component is product component if I open up this is the name that I need to write right here ok so that has been created so now let's come back to our home component and for navigating to that particular URL I need to use route link property so let's say I think it was a router link okay so equals to slash product let's save it actually I needed to run it so project has been compiled let's go back and click on it let's inspect it there is an error so invalid configuration product path god start with slash alright so I need to go back and open up my app dot module dot d s and remove this slash so let's save it and go back and a new error 'invalid configuration product path can't start I have removed it and let's save it let's try to run my project again sometimes that reloading project doesn't update the code changes that we make in our files so let's run it again it is running see that our no error here because now the changes have been compiled successfully so if I click on it it has navigated to slash product URL ok and the product works coming from the products component HTM and that is written by default by when we create a new component so inside this page I need to create different forms for writing the name and the color and if I click on the add product button it should go to the JSON server and create a new product so let's go ahead and write some HTML right here and if I click on the button it should create a new product

Channel: Awais Mirza

Views: 118,417

Rating: 4.7117119 out of 5

Keywords: Angular 4, learn angular 4, angular 4 from scratch, angular 4 crud, http in angular 4, json-server, get request in angular 4, put request in angular 4, delete request in angular 4, post requestn in angular 4

Id: HCHvrbAd1QA

Length: 23min 52sec (1432 seconds)

Published: Sun Oct 22 2017