Create Shareable Angular 2 Components
Components that you use across multiple applications need to follow a module pattern that keeps them separate from your application logic. This will allow you to make these Angular 2 components reusable and shareable and is the same pattern followed by many libraries that you may import into your projects.
[00:00] When you're building some widgets that you'd use across your entire application, you put them in their own module. I'll say widgets. It'll just create something called widget-1 component.ts. It'll create this widget one component with a selector of widget 1, a template of 1, and export the class called widget 1.
[00:30] Then we'll create a module to wrap these in called widgets.module.ts. This is an ng module that declares widget 1 and exports widget 1. Then just export this class widget module. Now with this widget module, we can hop into our home module and import the widget module.
[01:06] Inside of our home component, we can simply use that widget-1 inside of our home component template. You'll see I'm a home component which is this and then widget 1 which is this one because in our widget 1 component, the template is just one.
[01:26] One thing you'll notice right away if you try to add any Angular 2 feature in your component template such as ngIf...I'll say selected it's true. I'll say ngIf selected. Once I hit save, this will break. I'll pull up the Chrome dev tools here. You'll see the dev tools say template parse error. It can't find ngIf.
[01:50] That's because in our widget module, you also need to import the common module. The common module has everything you need to use those Angular 2 directive features. It's separate from that browser module because this can be used inside of the browser or any other platform.
[02:12] We'll want to import that as well as export it so that any other module using this would get that common module for free. Now I'll go ahead and hit save. You'll see that this works again. If I hop into widget 1, set this default, you'll see that 1 will go away because ngIf is false.
[02:32] Now we could create another widget. I'll just copy and paste widget 1. We'll call this one widget 2. In widget 2, I'll select 1. I'll call this 2, call this one 2. We want the selector to be widget 2. I don't really need this ngIf to show what I'm doing, so I'll just delete that, delete that. I do the same in widget 1. Delete that, delete that.
[03:04] Now inside of my home component I can just go ahead and use a widget 2. You'll see it didn't work that time. That's because I did not export it and declare it inside of my widgets module. Make sure every time that you export these, widget 2, declare and export them.
[03:25] Now I'll hit save. Now widget 2 is available to be used inside of other components. You might be thinking what's the difference between this widget module and the home module?
[03:36] The difference is that in here we had continued to declare routing and services and providers and things like that, whereas in the widgets module would limit it to just these features where you import other directives, components, and pipes.
[03:50] You'd declare them and export them whereas in a feature module such as home module, you would continue to declare services and routing and other features you would need to make this work with your specific application.
[04:03] The widgets because they're not written for your specific application could be used in this application or in any others, whereas the feature modules are limited to your application because of the routing and services you would be providing to it.