Creating Reusable Components in Angular

hello in today's video i'm going to show you how to create reusable or share components in angular as you already know angular is component based framework or platform as they call themselves so it is important and a good practice to create a lot of reusable or shared components in your application so why is that important because if you create a shared component and you use the it across your application and once when you have to change something you'll just change it uh in your shared component and the change will apply to all places where you called your component or you're just going to save on a code lines because you will call a shared component in one line instead of writing everything from the beginning on all places where you need a feature you're creating so here in our visual studio code on the left side i have shared module which is just a module uh which has no route thing as you can see here and the module is holding my shared components here in this components folder that module is exporting the components i want to share with others and the module is important let's say here in app module or anywhere where you want to have these components available in your application so that's basically it just share it create a module and call it here and export components in this module to make them available to the other places you call this component and module so here we are going to create a navigation bar to the uh which is reusable component which you can see okay here ng generate component and we'll place in the share folder and we'll put that in components folder and with the name bar also which is important to add flag export because that export flag we'll add our component to the exports here and make it available when we call this shared module here and also what i like to do and what is good practices to change the change detection strategy from default to on push we'll talk about this change detection strategy in future videos but uh you just follow this let's get best practices thanks okay change detection and you'll see on push and hit enter and it is going to create a component here and this components folder and as you see you can see here it is automatically exported here and edited declarations in our shared module so this is it basically and here in our navbar component uh we are going here and i'm going to add just temporary an array of items let's see items equals okay one two three okay this will be our testing array components and here in a navbar component i'm going to create just a list ulpi and let's see ng and g4 equals let item of items items and we'll just call it here item and check this here actually uh we're not going to check here before we call this uh this shared component so in my public component here i'll just before the router outlet call this app now bar component to have it here in the in the components so as you can see here we have one two three our navigation bar so here in the navbar component i have already added actually i'm not i'm going to add some stylings here so i'll say okay ul and the list list will know will be just uh without any styling so i'll say let's start type none and display inline online and i'll add the class sorry active uh which will be applied when the li is li has a an active class that class will say okay or right and you can wait okay and here are just for testing purposes uh add class here say okay active and then we'll switch to our here and you can see here we have one two three which is bold but we just have to say okay margin let's say 10 pixels and here i'm adding padding 0 and margin to 0 as well okay here it is so now what we have to do here uh instead of this active we'll remove it for a second and we are going to add a here a variable which will store an active item so we'll say active item is a type of number number and here what we can do is say okay on click click will make this active item item equals to i but i will be our index here so we just have to add an index uh so let's let i equals index of the loop here so when i click here we'll add this index to our active item why is that important here on this step because that active class we're going to add as ng class and we'll say okay we'll apply active class if this here easy to i so if this uh this is true uh active class will be applied so any class you want to here here is just uh by role and by this checking checking the statement if the statement is true it will apply here and let's test that okay if i click here we have one we have two we have three so i have just fixed something uh i'll move this margin up okay so that's it it works now uh if we just want to have a first item in our navigation bar active on load we can just say okay active item instead of this or just say zero and we don't have to add types as uh typescript would automatically uh select a number as a type because it is number or the string it will be string so no need for adding types so this is just uh one thing which we can use and now we are going to uh to convert this to something reusable so here instead of these items array here i'm going to add an input named items which is going to be type of string array so we are expecting a string here array of strings and now here i just have to import from angular core this input and now we'll move this items sorry okay input here and now in the public component where i called this uh navbar i'll add the following but first i'll just put this items here in a typescript of public folder save it and go to public component and here in the app now bar i'll say ok items equals to our items in the public component so they'll be they'll show here so as you can see we already created these items so to be sure that this here are sure like this okay uh now are in the public component okay okay now we're in the public components so we have created this and we are using it here but the thing is we want this snare bar to do actually something here and we just don't want to have these items like this and we want to emit something uh to see the parent component that we actually did something and we selected something so here i'm going to add an output which will be called select that which is a new event emitter here and the output from angular core so uh take a look at this at this here uh it happens sometimes times that this wrong event emitter is important and uh this shouldn't be here so we want the event emitter from angular core not from node events so here this is this is better and now here we are going to create a function which will get the data and emit that data to the parent component so we'll say okay call it on select let's say unselect and provide an item which we selected and the index why am i providing the index here because of the following i'll say whenever we click on that we are not going to call that from the uh html here so we don't need this anymore here we will add here okay say this active item equals the index index so every time we we click on this select or an item we'll add an active item index to that an active item here and also we will emit this item here so this selected emit and we'll emit an item so that's it we just have to go to the implementation of the navbar and change these things here i'll see i'll see on select and add this item and i as an eye index here so that's it we have to click this and the check does it work so it still uh still changes these colors so which means that it works and we are going to output something here in our public component so basically we don't need this navbar component anymore here to do anything instead of just calling it and doing some things here uh as we have added this items here and we want uh to have something actually something to happen when we click on any of these here we can add a new function here and say uh um select that item let's go like that and uh for for example i'll add some item resistor string so no when we select this here from our html i will change this selected item to something we selected so this selected item equals to item here and we just have to init this so uh if as we have added an event emitter here in our app number we are calling it differently anything instead of these items in square brackets we will just say like this selected equals to unselected item and as this is event emitter we have the forward event which is actually the thing we the item we passed through the clicking that and here i will just show that selected item so select them from that bar is like this okay here we have nothing on right now but we when we click we have this two three so as you could see on the first uh as we have selected this like uh made it pre-selected we haven't uh we haven't folded anything to this so we haven't passed the data but if we want this to be selected and to pass the data we're just going here in the number component and say okay uh on init we'll see the same thing here select just second active item items you can see like this items from zero so let's okay so we have it and when we click on any that's it and this is basically it when it comes to these components but if you want to reuse that component see that scenario we can uh create another navbar here in our public component and say okay we just want another items to show somewhere let's see i items 2 and we'll call that something like 4 4. five six here we can call numbers doesn't matter and what we just have to do is just call this navar somewhere here hr okay and say items is now items too so uh we can change this also if you want to show another animals so selected items too let's see select item two and this okay this is just for testing purposes so it's going to be like just test but we're going to add it to see actually how this works so as you can see here the first item first number has selection of one two three and uh [Music] okay my bad i'll just change this here too so i have seen that they have the same thing okay here okay okay that was that was the issue i just uh call it same same item twice okay here so the first one here and first one here are selected and they are one and four and we can see here like three and show it like three and the eighth number will be like a number here and so on and so on so this is basically reusable and if we want to change something to this uh navbar here we can just go here and change let's say standing that we want to be blue and to all places where we call it it will be blue so that's it as a you could see it's really easy and you just have to take a look at these things and also you just have to know that these components have inputs and outputs and depends on our needs inputs could be anything or outputs are just going to be events with something following this you can create also a forms or anything which could be reused across your application so that's it for today's video and uh thanks for watching and if you like the video we don't have to share and subscribe just save it somewhere thank you very much see you

Channel: ADNAN HALILOVIC

Views: 2,063

Rating: 4.9215684 out of 5

Keywords: Angular, Reusable Components, JavaScript, Shared Components, angular 12 tutorial, angular reusable component, angular tutorial, reusable component, angular, angular 12, angular tutorial for beginners

Id: 7-U-Sh9h2E4

Length: 21min 34sec (1294 seconds)

Published: Wed May 05 2021