Angular 15 CRUD with Bootstrap v5 | JSON-Server | Standalone Components

hello everyone and welcome to another episode with me babatani in today's video we want to look at angular crud that is we're building an application um using the create read update and delete so this is the application we'll be building in this course let me just give you a run through of what this does so we have this application here you can see we have a list of books that we've created and you can update each of the books for example I want to update this subject Tab and the country is Liberia and I click update so you get updated all right and then it takes you to the list of all of the books you can see the updated book here you can also delete a book I'm going to click on this to delete a book and you get this beautiful toast message that says deleted successfully you can also add a book and you can land a book so we'll be doing all of this in this course so without further Ado let's Dive Right In okay so with here I have an angular application that I just created using the angular CLI command that is NG new then the name of the application and you created this and this is what it looks like here um nothing fancy uh so first off we are going to um create our own database using Json server and then we are going to install the ngx toast um library that we saw earlier on so let's do that quickly so to install the Json server I'm going to do npmi Json server and that gets installed right so let's install the ngx toast alrighty so we have uh Json server installed and we also have the ngx toast installed so let's set up our Json server to do that I'm going to create a file in The Roots folder I'm going to call this book books.json like that and then I'm going to create the schema for this application so let's do we have posts um posts and it is an array of objects right so an array of object to the first object so let's create one and we're going to have also the author of the book and let's call this chimamanda uh I call the spelling right and then the country and that would be Nigeria right and then the language the language is English sorry about the fun of my MacBook Pro I'm still using a MacBook Pro 2018. and maybe one day when I become so successful I'm going to get myself maybe M2 or M3 depending on whatever it's available at the time right just kidding so the title of this book is call this half of a yellow sun beautiful book by the way and yeah I'm just gonna put a random here here so let's see whatever right so the ID is going to be one all right so this looks good okay so let's create another for land actually just gonna copy this blend I'm gonna copy this posts paste it right here for the land and I'm going to call this length the ID is going to be one all right and then the name who is lending this book John priyatz please oh prayer this is prayer I know I know book title call this my book pay Book auto because it's also about sunny day then the title oh sorry Landing date 2008 let's continue drink I'm going to remove this all right so we are done with our schema let's see if we have any errors no errors okay so let's move on to the next thing which is to create all of our components you can see in this application here we have um a component that lists all of our books we have a component to add a book we have a component to learn the book and you have a confident to update a book all right so let's go over to application here and add all of the components that we're going to need and these components are going to be Standalone by the way so I'm going to create NGC remember our standalone API so NGC I'm going to call this book and add the stand alone flat to it okay so what I want to do is in this book I want to add another component some all of the components basically so I'm going to come over here open in integrated terminal that is I want to open create another component in the book so we're going to call this NGC add book and it's going to be a standalone as well after that we are going to create another component we're going to call the components land so let's create another component let's call it land right one more creating that component we are going to call this update book updates Dash book okay we are done with all of the components right so let's go over to our book which is right here okay you can see it as the stand alone flag turned on for the book so what we want to do is we want to import all of our components um inside this book component so come right here on the Imports come right here in the Imports and I'm going to import first of all I'm going to import ad book okay that's the first one the second one remember land book on land components that is complemented then updates book components all right so we have our component um imported here in our book components okay so let me go back right console my Channel all right so we're also going to need a service okay we're going to need a service and actually I'm going to open this we're going to create our service inside the book components all right so Ng then s for service we are going to call this book that's the name of the service and we have our service right here right so in our service what we want to do is we want to call ah uh Json schema um the Json schema we created right here we want to call it and first off I'm going to do data normally this should be inside your environment variables but because you just I'm doing this right here so I'm going to call this http localhost all right three thousand slash posts this this is me making our API call normally your API call should be in your environment variables all right so your environment variables like staging environmental production environment okay right then we have the other one which is land that you have to know which is length to http local host three thousand and like okay so let's go ahead and inject the HTTP client all right so to inject HTTP client we do private HTTP and we call the HTTP client s where are you we're going to import http HTTP client and that is from at angular at angular slash common slash HCC all right now our error is gone okay so let's do a couple of API calls here the first thing we need to do right here is our update book so we need a call for update book and to update the book we need the ID and the ID can be any or a string and you also need the input or the payload for it okay so to do that we're going to return this dot HTTP and then we are going to call patch and then we are going to call our URL so this is this dot data and then slash you know i d okay and we're going to pass in the input that's for updates but second one is to get books okay to get books and write our method get book and we're going to trade today's as an observable sorry about that that's a complete misbehaving and it's supposed to behave all right so took any right so we are going to return this dot HTTP dot get and I think at this point I should just just copy this guy this dot data and that's it for that forget books today we need to get a book to get a book we need the ID of the book and it can be string all right it can also be unobservable I'm just making them observable observable it's like any and we are going to return fees dot HTTP dot What DOT get to get it right dot get and we are going to call our these dots data slash ID all right let's forget book and we need to delete book so at this point just copy this and paste it here so call this delete book right we're also taking the string idea of string observable any and we call this delete and that's that for that we need another which is land book and to learn the book to learn the book we are going to do a post so we have posting type any and you don't need this we need to change this actually to land to land and then we are taking the input Okay so language book should be inputs the dangers of copying and paste last but not the least we need another call for posting a book some post book impute post any they will change this to data so we are done with our API call oops that was a long one all right so let's move on to let's move on to styles let's style this application currently right now we still have this guy running so let's clear this and borrow a couple of styles you can see this background here I borrowed it you can see the background is right here so I'm going to borrow this okay let's go to our app.components components and I'm going to clear everything here you need to clear everything here all right right here okay okay let's also look at the styles copying a couple of styles here from Angela you know it's a gap company in the CSS paste it right here right and we are done with that so let's let's check it out first okay looks good so we have this right here looking good all right let's look at what we have here um right here we have our style for the upcoming.css um just normal styles right so let's go and add like a couple of um Global Styles in our styles.css okay first off I want to add a castle pointer then I'm going to do form control we're going to use bootstrap by the way and just laying this down now for that color it okay and box shadow into none then perform control all right then we also do for the form control group then the margin this level then imagine margin bottom it's eight pixels then margin top is eight pixels as well okay so let's add our bootstrap link okay so come over here to the index.html right here and we have a link from bootstrap here in the hit tag okay your speed is right here and we also need our scripts that would be in the body just underneath the body tag right above the closing body tag so we have our bootstrap there okay so this looks good so let's change this title to a Booker 23. okay that looks nice let's see what we have here okay still good now let's go over to our book component and what we have here in the book component as you can see we have this title here and this search button and we have the audiobook learn the book and we have the table for the books okay so a book component over right here not here at the moment so we are going to start building all right so let's have a class a piece is slow today what could be the problem so the class and we call this row give it a class of row and then we are going to have this right here so let's have a call MD -10 I really use bootstrap by the way lately I have been building my own styles from scratch and I remember starting out I was so much in love with Boost shop but yeah bootstrap is still nice but writing your own CSS and style it's more nicer by the way right so I know there's another one here called um tailwind and are you still in sometimes but like I said lately I've been building applications I'm using my own Styles you know from the ground up I think basically I think because it's just fun so improve your mind and we need that emoji come and get the Emoji somewhere yes I have it right here all right so we have our header just look at how it looks the Ada is showing okay let's see what the problem is let's go to our route okay we need to add a couple of routes here and we need to add a couple of rounds okay so let's start with the path for the page itself so and it's going to be the component book components we're going to make this not prefix all right and let's also add let's add all of the since we are here let's just add all of the routes then okay so we're going to do path for other book and you can call this add Dash book and components a component for this is the ad book component all right so I'm going to copy this that's because I love to copy and paste then we do updates book for this updates but you're taking the ID all right and we are calling the updateable component right copy this again by your comma here and we are going to call this land so call this lens and we are attributing the length component to this I think we are good on this front and we also need to import book components here all right so let's see how it goes okay so we have uh improved your mind okay looks good so let's continue with that we have the Steve here so what you want to do is you want to have another teeth and I'm gonna take Flex justify content between and margin bottom is five and what is this for this is for our inputs search inputes tag okay this takes a class of form Dash control and place over the is such buka what's your word name if you have a better name please drop it in the comments below okay uh we're going to set our autocomplete to be of autocomplete all to complete right that works now we need another for our buttons I'm going to use the attack and router link you're going to have an error but I'm going to explain why okay so we have this router link we don't need this active property and where you need a button and the class we need the button and the class is going to be BTN BTM the success and this is going to be at ebook right so let's have another one here let's copy this and just paste this right here so this is going to be going to say land ebook this should be added book as well and for the lender book we are going to call the route Lending so we have this error right here because we have not imported the router module okay I'm going to close all of this and open right here so we need to import the router module in our book Dot UMTS right so to do that I'm just going to type router module whole pin that what a complete does it work and if I come right here the arrow is gone okay so we have this two right here and let's keep going okay so for this it's going to be class of beating warning and we're going to add another class cm that's pattern of two okay right here looks good okay say let's add our table now all right let's add our table for table we are going to do a div and style we're going to just overflow X overflow X and it's going to be Auto okay let's bring in our table here the table we have a class called table and we have the table head which is called T head for short and we're going to have our rules okay just going to copy to go right here and paste it here okay all right so we also need the body okay just right after the end so tea body and ideally we we're going to be looping through you know the books to get the books and then display all right using our ng4 directive okay um let's see this is how it looks like now okay let's go to our component.ts and let's consume our API okay so let's create variable I'm going to call this variable books and just type any and I'm going to create like a Constructor here where we are going to inject the services that we just created hope you enjoyed this tutorial by the way I hope it's not too long private book and we're going to call our book service actually we need to provide our book service here so provide us provide us book service all right so that's good so we've we are injecting our book service so we are saying oh we cannot create this method or function on our own let us you know call this method of function from another A Plus or another component so we are depending on it right so dependency injection in a nutshell NG on it we need our engine underneath here the so first off we need to X okay which okay that's fine we need to call our get all books here okay so let's create a method forget all books okay to get all books we are going to call this DOT book Dot get books all right from our service class then we are going to subscribe to it and the response which we get represent the response that we get we are going to bind the response to these dot books right okay since we are here let's create that for on delete as well so on delete on delete we are taking the ID and we are calling this DOT book dots delete book and the ID dots subscribe the response and let's call our test message it's also called a test message let's add our toast message to the Constructor private toasts are and it's from chose also complete where are you to service K good looking good okay so once this is successful what you want to do is this dot toasts dots we are going to call the success method and message that says deleted successfully and you also want to do a timeout and once it's deleted successfully once it's deleted successfully it's going to route to the home page in this case the books page that has all of you know the books the location that we load also when we updates we are going to be routing to the updates page so on updates on updates we are taking the ID any and this dot router let's call our router let's inject the router here so private router to your calling is the router okay I want to complete to the rescue yes router quote so cool this dot router dot navigate okay navigate and what we're simply doing is you're navigating to this URL slash updates updates slash ID okay all right so let's let's get back to our book components and let's get the books and display on on the screen for for a table so to do that I'm going to do a row okay and this rule we're going to do our ng4 and let's book of books case books um let's ID or let I is equals to index okay something like that and inside our row we're going to have the others some th so this is the scope is a row and this takes in and this takes in the book dot ID okay so I'm going to copy this and paste for the others okay so to be honest to auto hook that also and Country and pages and tied to and here okay I think that's all for now take this out so we have the auto we have the country we have the pages we have the title and we also have the here so let's add our buttons let's add our buttons so so row so this is going to be TD or table data zero doing this this yep okay so let's add one more for our button CD and TD is going to take a class of TD button and you're going to have videos as well so this class of BTN Dash group BTN Dash group and the role of this is a group this is just a strap and in this group we're going to have a button so type is the button and the class is spotting Dash outline success in between smoke okay remember the function we created so on updates on update should route to the update component on update so we are taking one book dot ID the book that ID is coming from this book here okay all right so we're going to call this guy updates so pen paste viewed one here paste the others so you're going to call this delete all right and we're going to call this until it's remember we've created the on delete delete it also takes about ID and so we have the outline and this should be Danger and small and then you happen to have like margin rights that should be true let's add our HTTP client in the app dot module so we need to add HTTP clients here so import and we also need to add our toasts module in The Roots right you also need to add the browser animation browser animations module it's going to be platform browser slash animations okay let's run our server mpm run starts server all right so let's refresh this nice so we have a book book one of the first book that we created and we have it right here and so let's add let's go to the delete updates rather let's go to the updates okay so we're going to create a class as usual class of container let's be fast as possible container and now continue I want to have a class of row class of row and we're going to have um or cool MD that's four and also let's catch up for the large screen and offset space on both sides md4 and you also have to draw like a call for small size as well for small size going to be 12. for the margin bottom we are taking five nice obtained let's add a form here for a form because it form group boy for a form group we're going to call this guy from data so I'm going to group from form data and don't worry about that era we need to fix this in a bit and the role of this guy is the form and we are using NG submits on submits from data this this form data right here dots value is what you are returning for us okay and let's start with our title so call this give it a class of form Dash group mb3 and we're taking H2 of updates a okay okay it's a book in the book so what we're going to have next is um div and this div it's going to take a class of form group from group and the Imagine bottom of three and what we have here is the label and which is for the author then I'm just going to do one and copy the rest input of type text then we're going to have like a form control name control is offer and the class is form Dash control okay let's copy this and paste for the others so this one is going to be country all right country and this is country okay no need for the Imagine all right so let's put the others see next one is language and language all right and the next one is pages okay under type number and we have pages and the next one came is type two and this is a text type text and this one is try to form control okay all right so the next one is yeah okay here and the text and from control name is here and that okay so let's add the bottom okay about any of the class you're taking margin top should be two right and the button itself should be of types of meat then the class should be button then button success but in success and we want to disable this guy when it is loaded disabled yes is loading okay so I just want to go to the updates all right so let's go to update component.ts update book dot yes so for this guy we want to first of all introduce or import the reactive forms module that takes away the error we had earlier on and so let's Dive Right In so let's create from group and we have is loading so let's be brilliant then your serve books we are going to be making a call okay typescript type script typescript so let's go to our Constructor so Constructor a Constructor we do private Builder we are calling our form Builder we also need to call our toast all right so let's create our own engine on in it all right so this dots route Dot paramap we want to subscribe to it and get the data so params and you want to say this dots ID equals to params parents don't get ID okay and whatever we are getting we're getting the ID we want to pass that ID to our get book this dot ID And subscribe to it okay and we are going to bind this DOT book so whatever we get some furthermore you're also going to bind it off from data from data that's value and this dot update foreign actually I can do this const ID and then call ID here all right okay so let's create okay we have this so let's create our form data so these dots from data equals to these dots Builder dot group right so we have the auto and you also new phone control okay new phone control so let's copy this and paste for everything so here country here language pages title and one more yeah writing okay so let's create our on submit function okay so first of we are getting from data of any format form and you are seeing these dot update book this book that's for my service dot update book from our servers and we are passing this dot ID and they are passing this form data and we are subscribing and we're getting the results okay so I'm just going to this dots toolsr dot success and message updated successfully and we are going to do is say timeout to two seconds I said two thousand location [Music] dot href basically is equals to the home page right which contains all of the books you've created nice so one last method update form values so I want to update the form values it's only getting from our route and this is going to return um this guy is right here so we'll do for one then place for the others so also on this DOT book let's do the book Mr book Dot also awesome all right so copy this all right so here is going to be country here is going to be language here is going to be pages here it's going to be day two yeah it's going to be here uh yep so let's start for that so let's come over here and change this country language pages let's go let's go let's go let's go try two if you're falling along don't give up yet keep typing then page all right so essentially what we're doing is remember we created a route called update ID which is dynamic um right here right here so whatever ID is being passed to this update slash ID in our update component what we want to do is we're going to subscribe to the power map get the ID then pass the ID to our get a book from our book service whatever we get in the response we append it to this.book and then immediately we call this this form dot patch values and this updates values now for this update form values we are appending the results from the book um object you've gotten to our um to match our this format this um form data all right everyone so this is our application and we have the update working fine and you can update a particular book you can update the country and do whatever I just want to do and let me change this here to 2020 2020 click update update updated successfully and it writes you back to the own page all right so in the next tutorial we're going to look at lending a book um we've not done anything here and we are going to add a little bit of research functionality to this application but currently our ad book work works and um you know our updates we can also delete and all of that delete I'll delete all functionality is also working fine that's it everyone the tutorial was already getting too long I had to shorten it and we're going to continue in the next one all right if you like this tutorial make sure you like this video and you know subscribe to the channel and um make sure you drop your comments in the comment section below let me know if you found this very useful all right until next time keep learning bye for now

Channel: Babatunde Lamidi

Views: 5,485

Keywords: Angular, CRUD, JSON-Server, REST API, Front-end Development, Web Development, HttpClient, RxJS, Typescript, Bootstrap, UI Design, Routing, Observables, Data Binding, Components, Forms, Validation, Pagination, Sorting, Filtering, Dependency Injection, NgModules, State Management, Angular 15, Project based, angular tutorial for beginners

Id: 8hNxZZ5LA0k

Length: 60min 13sec (3613 seconds)

Published: Sat Feb 25 2023