Angular CRUD with Web API Tutorial Part #10 - Creating Interface Model For Feature Module

hi friends welcome to our tutorials we are continuing with our angular tutorial series this is part 10 of it where we are trying to build a feature module called products for our e-commerce application so far we have been able to do a lot of ground work we have learned how to create components services and also we have used angular application from scratch we installed bootstrap we created mock endpoints it's getting turning out to be really good it's finally shaping up in this particular episode we will learn about creating an interface which is an extremely important part of type script which is to bind the data type right so we'll learn all about it in today's episode welcome back i'm your host my name is sridhar i bring over 10 years of experience as a full stack developer and i'm here to share my knowledge on modern web technologies i will share my knowledge on angular react node express mongodb of course and much much more like html css javascript i'm here to share my knowledge of course but at the same time i'm here to learn from you so during the course of this tutorial series when you are building your own feature modules if you have any doubts just ask me in the comment section i'll be happy to help you i can assure you that at the end of this particular series you will be able to build your own feature modules with angular crud functionality like i said again the best way to learn is to code and let me know if you have any doubts this is part of the angular correct full tutorial series and the description in the description box i have shared the playlist link make sure you check it out so that you don't miss out on any steps and you get it end to end working in your local machine just to give you a recap we are trying to build a feature module for products for our e-commerce shopping cart application all right so we are nearing the end of uh building the entire feature module we have done a lot of groundwork if you see here in the screen today is the tenth part of it where we are trying to create a model or an interface which we will bind it into a service to make sure that it's always written up certain data type all right so why do you need to create a interface or a model so so far if you see what we have done is we have used https right and we have called the api we get some results but how do we make sure that it is of a certain data type right and typescript allows us to define our own data types which means i can have a data type called product and then export that class and use it right so that way i can always enforce that i am looking forward for certain details which i expect in the end point the result object should be having the same so that helps in strict type checking right and it's always a good practice to have models because you know the data type and the contracts that you are defining extremely important when you are working with multiple team members offshore teams or teams which are scattered or remote so this is an extremely important step let's get started how do you do it we'll use angular cli to generate the interface for us so we'll give the command ng generate interface and the name of the type that you want to use okay it's always a good practice to keep all the models in one single place okay but since you're building a feature module which has its own uh kind of a bundled code together i can add it into this particular feature module but usually when you work in large applications you'll have a dedicated folder by the name models or interfaces and you'll have all the interfaces there right so let's get started and let's let me show you how to do it all right so we have our application compiled we have our application here if you see the products okay so this is what we are building products module and what i'm going to do is i'm going to tweak little bit in terms of the routes okay i'll go to the products routing and instead of saying list products i just want to have it at the top level itself right so what i'm going to do is remove this and instead of just saying that having a blank page whenever user comes to products page he will see this particular screen that's what i've done now right looks good also a little tweak i want to do is is in the styling so i'll go to style.css and i i really particularly not i'm not a really fan of this black color kind of a layout so instead we can take some other color which is little bright and maybe indigo that will work for us so if you see just take this class it is bootstrap navbar right uh and it is bg dark that's the class that it is accepting so let's go to our header in the site framework header here so i'll remove this bg dark and i'll remove navbar instead i'll give nav bar custom so this is again a class name which i am giving uh you can give any name that you want to give i have our custom and here i will say background on color should be indigo okay so it didn't apply it so i'm going to call it right so no still doesn't look nice let's pick up some other color you can pick any color this i'm just doing it to make it a little better in terms of how we look and feel of the application right okay this looks much better at least the green and we are going to style this color and we are going to say navbar item that's now you can leave it as it is also friends like i said again there is no hard and fast rule you have to use certain color but uh just if you want to make it look good it makes sense that you can give these styling the whole point that we are trying to do here is to improve the application so i'm just giving that so here i'm going to say dot nav bar brand okay all righty so we got the slide clicker now it looks much better uh in terms of the application look and feel so we have the products feature module we have it here let's go ahead now and do the work of this tutorial which is to create a particular shop for less i'm going to go to source app and then i'm going to go into products and here i'm going to say ng generate interface by the name product right so this will generate as an empty class basically so if you see here in the products you would see a model uh product.ts okay and now let's export the some properties of it right so we can say product id right it's again say string again these are something that you will customize you can give anything that you want to uh mention because it's just key value pairs so here i'm going to say description string right what does it say property should be separated by semicolon okay all right and then we are going to give rating again string you can give any anything so this is kind of building a data type on its own right so we can use number and and similarly right so you can go ahead and add product image be a string right so you have a simple product that you have it here let's add some more say category id number make sure you select the correct one and then you can add some more properties like product pricing category id description and then you can add say is available i'll call it boolean and then we are going to use say product color right and then we can also say reviews again i'll say number of reviews how many are there uh description then i will say title product name string right so this is this is kind of a data type now that we want to use in our application so how do we bind it go to our service and import it product so just import it product dot ts right and here we will import that class now it's important friends make sure you see it correctly and understand it each of these methods right i'm telling that this particular method should return a data type right which is an observable basically okay of what type i'm saying of product right and remember whenever you mention the observable product you have to make sure you are mentioning it in the post also because you are telling that what type of i am expecting i am expecting a product to be returned so when we receive or when we post data it is of type product right that's what we are trying to send it here similarly when you say get you will say i am expecting the data to be returned as product right and then similarly here when you are updating the observable you will say product and we'll say observable product right so it's important that you mention this data type that way you are allowing for strict data type access so for all of the methods let's just import them some people tend to import it here but they don't add it to the actual get call so that's way that way it will give you error so remember you have to mention the product to the http methods all right so we're almost done so now see what we have done here is we have created an interface and we are telling our service that an observable the data that will be done will be an observable of type product and what does product have if you click on it and navigate you see you have product id this is the data type right so this is how we will define our product and our service is updated now we are ready to go to call start calling into our application crud operations right so this is how we'll create an interface and models we use in our application in real time in the next episode we start implementing the crud methods we'll do some cleanup of ui make it link all the data together bind the data make it much more enrich and beautiful and functional i hope you are following along in the series and you are enjoying building this if it sounds anything sounds complicated tricky just let me know i will cover the topic again for you the whole idea here is for you to learn so please ask me if you have any doubts i'll be happy to help you see you in the next episode where we start implementing current methods thank you so much see you in the next episode

Channel: ARC Tutorials

Views: 7,375

Keywords: angular crud with web api, angular crud tutorial, angular crud operations, angular crud project, angular crud example, angular crud with json server, angular crud application tutorial, angular crud table, angular crud mysql, crud angular 9, crud angular 8, angular bootstrap crud example, angular bootstrap crud, Interface for feature module, models in angular, models in angular 9, interface in angular, interface in angular 9, creating interface in angular

Id: R6ENu1n1dNo

Length: 12min 20sec (740 seconds)

Published: Mon Aug 03 2020