Shared Modules in Angular in about 10 Minutes

hello in today's video we are going to talk about shared modules in angular what is a shared module shared module in angular is a module where we put directives pipes and components and then import just that module wherever we need it in other parts of our app so here on the left side i have a basic structure which i covered in the previous video so you can go there and take a look at it here i will create a shared module so i'm going to add it by typing this into terminal ng gm which is a shortcut of ng generate module and call it share okay enter and now we'll get a shared module here generated on the left side so this is a shared module this is a basic module which has no any routing so this is just a module which will uh have components so i'll create a folder here and call it components okay so i will put a component into that uh more into that folder here and now we are generating a new component ngg new nggc which is a shorthand shortcut shortcut of ngg engine generate component and we'll put it in the share folder and into components and name it share component and also i'll add flag export [Applause] okay and hit enter and now into this folder here we have a shared component so it's basically here share component which is exported here in the in the shared module so if you haven't added this export flag here we wouldn't have this module export this component exported here so it won't be able it won't be shared with other modules where we imported this shared module so now i'm going to generate a new module called let's say nggm and call it new module one okay so we have a new module one here but uh what am i going to do is here i'll delete it and i'll generate it here again but with a routing flag so it will create a routing module as well here as you can see now and also i will add a new module a component component uh into this new module one and call it new one then i'll add a flag flat which means that this component is going to be generated here into the into the root of this new module one okay this is the journey again new module new module one new module one flat okay let's try again okay we have it here i'll re delete this one here and also i will uh from the app motion okay here and here okay going back here we have a component and we have our out thing here and we'll just say that root here path which is nothing is going to component component and new module one component so this is it and here in this april thing i'll just add here okay path path let's say new new module is going to load children lazy load a module and say import import and source app which is a new module and the new module this one and then i'll say done and module as new module okay that's it and now i save it i have to do is ngs to serve this app and then we will get it into this let it just finish okay now we're going to localhost and when we add the new [Applause] new module we have new module one works and now we are going to add this share module into our new module here so what we have to do is to import shared module here and then automatically all exported components from this shared module will be available for use here in this module so basically we're going here to add app share component and it will use that component here okay you see share components works so that is it basically now i have to show you how you can use uh you can use any libraries within this shared module and get them uh get them available to other modules where you import the share modules so here i'll say okay ng and at i'm going to use angular material just for demonstrating demonstrating purposes angular material material and it will automatically add and import this okay let's see okay this okay so the pressure okay and okay package installed so basically uh we have here uh just a second okay and now i'm going to use a button from here i'm going to import uh let's say mad button module actually i'll i'll use it here imports let's see but not but the module receive now okay components so i'll just add matte pattern module here from angular material and now this matte button is available everywhere so i can say here that i want to have a let's say just a matte button actually button which is matte button and we'll call it button and this is a basic button it was uh oh i haven't exported okay i i was about to show you how to use that into the shared module for example i'll use this share component okay and now you see we have a mud button but we cannot use it here in our component like this [Applause] okay this is uh this button is outside shear component and this one is inside the share component so as you can see here this is a style and it uses material design but this one doesn't and why is that happening because here in the shared module we just imported this and we want to use it and to make it available to our module here but as we are using this shared module in this module here what we have to do is just export this mapped button module and now we'll get that module available to this new module so basically if you have any kind of library or modules imported here into this shared module and if you don't want it to use them outside the shared module or you just want to use them into your uh for your shared components it's okay you just have to import it but if you want to uh export that module you have to add it here to exports so it will be available to all components where the shared module is imported so that's basically it thank you for watching the video and i hope this video helped you

Channel: ADNAN HALILOVIC

Views: 623

Rating: 5 out of 5

Keywords: Angular, Shared Modules

Id: Gjs6uWI9cmQ

Length: 11min 38sec (698 seconds)

Published: Sat May 15 2021