Sharing Components Through a Lib

[00:00:00]
>> So now we're gonna, we're gonna just live in the visa logo here and I am going to now take a common component because there are times where you wanna do that, I'm going to extract it out and I'm going to share it across multiple applications. So what I'm gonna do here, let's hop into our command line yet again, and Let me open yet another tab and so let's just think about this for a second, if I wanted to create something to share across both applications, what do you think would be my first step?

[00:00:56]
>> Perfect. Thank you Lillian. So you would essentially extracted to a lib. So in this case, create a lib and then extract it to that lib. So from here, I am going to generate a lib so lib and we'll call this UI toolbar and I'm gonna set the style to SPSS and I've just messed this up too many times.

[00:01:24]
I'm going to run with the dry run flag and take that off. All right. And then from here, let's go ahead so we've generated the lib. Now let's generate the components that exist within that. So now we have the lib. Now we need to put the two components.

[00:01:45]
So we're gonna do is we're gonna take the toolbar across the top of this application Here, because we could use this across multiple applications, especially if it's consistent with your corporate brand styling. So we'll take this and we're going to extract it out. So NGC will do toolbar.

[00:02:10]
And now we're gonna say put this in your toolbar and give it a. Again classic SAS. All right. Let's roll the dice And I believe we are good to go. All right, so now we're going to do is within our code, we need to. Move or just extract the so again, I was talking about refactoring through promotion.

[00:03:04]
Well, this is what this looks like. Now the one thing that is interesting about having multiple applications in the same repos that occasionally, if you have your file names are the same. You do have to pay attention to the file path because you saw that I opened up app component HTML, but what I really wanted to do was open up the one in the dashboard.

[00:03:35]
So we have client dashboard and so you will occasionally stumble and you're reaching for one thing. And you just end up in the wrong app because your naming conventions are similar. Alright, so what we're gonna do is we're going to pick this up and we're going to move it into the toolbar component.

[00:04:03]
And then from here, we are going to change this side now toggle to an output. So what I'm gonna do is I'm gonna go toggle side down admit and this doesn't exist yet, but I'm gonna save this and let's go back into our component here. And we can just delete all this.

[00:04:36]
So we'll go output and we're going to call this Toggle, side nav, and it's going to be a new event emitter All right, I'm going to clean up my imports since I'm here, and output is a function, I need to make sure I get that right. And what I'll also do is I'm going to create another output called log out.

[00:05:11]
Now there's certainly more things that I could do with this, but we are going to keep this fairly simple for now. And what I can also do now is when we click this button over here, we can log out. There we go now make sure I got this right.

[00:05:46]
Log Out. Yes, yes, yes. You notice here that, angular is complaining about the fact that now I'm using material components and it does not know where to find them. So this is when you segment things into modules, aka the material module, then this is no problem at all, barely an inconvenience.

[00:06:23]
Except when it doesn't pick up. So I find typically when I create a new lib that I have to do this at least once and an insult to injury There we go. That was super weird. Let's check back here. And we're good. All right. So now let's go into our dashboard.

[00:06:56]
And I forgot something. Hopefully. Everybody was like no, don't do it. You're missing something and I am truly missing something. I just created a new lib and I need to import it. But that is also, there's one another step I need to do that I forget, thank you for reminding me.

[00:07:33]
Is I need to make sure that I make this available for consumption. So within my module itself, what I need to do is I need to, what did I have to do for material? I had to export it. And so to a bart component, Very good. And what I'm also going to do is in the index, I'm going to little trick typically I will just go type it in once, it'll add it up here.

[00:08:12]
I'll just change this to export and I think we are good to go here. And while I'm at it, I just prefer unless I'm exporting a bunch of things to be very explicit about what I'm actually exporting out. Okay, so I should be able to consume this now.

[00:08:31]
I am. Hopeful all right, UI toolbar module, Scope here in. It's correct, I believe I did and so now if we go into This is where I've just completely, forgot what is happening in this top level component. So I think actually nothing so we'll just go just create an empty method and since we're here we'll just do another one for logout.

[00:10:14]
All right, back to our template And last but not least, Log out. Save this. I'm rolling the dice. Let's see what happens. Module not found, cannot resolve F-E-M-U-Y toolbar. Let's think about why that may be happening. Alright, so let's go back to And let's see if this will work.

[00:11:24]
This hasn't been the first time in my life I've just had to restart the server to see if it would work. What do you know? Mystery solved. All right. So we have it working here and so it's displaying. Now let's go back into our code. And let's get this working in our client application.

[00:12:06]
Module. There we go. And feel like a restart of TS servers in order. It's like it knew what I wanted. Alright, save this. Let's organize our imports and now, let's go into the app.html and I think I could just put this in I don't even know if I have to bind to the events.

[00:12:59]
So, Wouldn't it be funny? Like 'haha' funny is What I had to do was just restart this. I'm hoping I'm crossing my fingers because then I know we have to break up and it's not me it's them. Alright so this is working with a little aspects, let me fix this.

[00:13:47]
So what happened is when we did NG add and we added a material, it added it to all this wonderful stuff into the dashboard. What it did not do when I created the new app, because I did not add material to it. We do not get the same benefits.

[00:14:08]
So, we just go here paste this in, and I believe I can just change this, and, What I will do as well, and somebody might be sitting there like. Shaking their finger at me but typically I like to keep styles unless there's a good reason not to, kind of concentrate it to the application itself.

[00:14:33]
So, all I've done here, and I may revisit this later but this is a workshop is I've just moved the styles over, and I could very well actually pull this into a lib if I wanted to. And at first this was like the best day of my life right here.