Integrate a custom NativeScript UI component plugin via npm and registerElement

[00:00] You can install any number of npm packages into your project. Let's install the NativeScript checkbox plugin. Interestingly, there is no checkbox component from NativeScript. In fact, this is because there is no checkbox component on iOS at all.

[00:17] In these cases, NativeScript leaves these type of components up to the community. If we look at the NativeScript checkbox plugin from Brad Martin, we'll see exactly how that component will behave on Android and iOS.

[00:28] This plugin was designed for a Vanilla NativeScript project. However, we can use it inside of a NativeScript for Angular project by importing from NativeScript Angular element registry. That provides a method called "register element."

[00:44] That will allow us to name the custom element that we want to register. In this case, we're just going to call it checkbox. Then, we pass a function that is going to point to that class. In this case, we want to require our NativeScript checkbox plugin. That provides a class called "checkbox."

[01:08] Whenever using a custom UI component that may be coming from a plugin, if you're questionable on what the actual class name is, you can find the .ios, and often the .android files in the root.

[01:22] If you double check their implementation, you can see that they export a class. It is that named class that is going to be available to us as our UI component.

[01:32] You can see android and iOS both export the same named class. It's exactly that class we are going to reference as our custom check box component.

[01:41] It's worth noting that you can register these elements really anywhere in your root component, or even in the bootstrap file, as well, once they're registered, once they are available to be used inside of any NativeScript xml view here.

[01:55] Let's try out our new checkbox component. Let's drop it inside of the dashboard view. We can find an implementation example on the README, and we can actually copy it and paste it as is, but we'll need to change a couple of things.

[02:08] First of all, there is no name space with NativeScript for angular. We just registered an element called checkbox. We can use that directly, and then, we want to make sure that we close it properly, because again, with NativeScript for angular, all your tags need to be closed properly.

[02:24] Then, we don't use this binding syntax with Angular. We just want to convert these to just use Angular's binding syntax. Instead of binding the text, we'll just use a label here, and we'll call it custom checkbox, and for fill color, we'll just say blue.

[02:41] Let's just add our check prop as bully in initialized false. When we run that, we'll see we now we have a checkbox that has a nice animation. On Android, we get the same nice effect.