Happy New Year everyone! Last year was quite a year with the release of The NativeScript Book and all. This coming year Mike and I plan on making some updates to the book to make sure it’s update to date with the latest updates to the NativeScript framework and to fix grammatical errors that have been found since release. But enough about the book; in celebration of the new year it is time to start blogging and I have decided to start with something I hope you find very helpful.
Reusable Components
I’m a big proponent of NativeScript with Angular. While I love NativeScript by itself, I believe that the seamless integration with Angular makes NativeScript even better. With Angular components you can easily create reusable components for your app. Let’s take a look at how we can create a reusable card component with NativeScript and Angular.
Card Component
We’ll be creating what I’m going to call a “card”. We’ll walk through the basics and then you can adapt this example and make the card to fit the style of your app. Here is an example of what we will be creating.
Card Example
The easiest way for us to get started will be to use the basic angular template. You can scaffold your app by running the following command:
tns create CardExample –ng
The hello world angular template comes with a basic list/detail example that should look like this if you run it right now.
Template App
If you take a quick look at the code in the scaffolded app, you will notice that list of items in the ItemComponent is using the following simple template that consists of a label that will navigate to the ItemDetailComponent:
The Code
The first step is to create the CardComponent:
Our CardComponent has two input properties title and subtitle. We don’t need to do anything else in our component because it will just be used as a structural element. Take note of the selector card because this is how we will reference and tell Angular to render our component.
The next step is to create the markup of our CardComponent:
Our card uses some basic styling from NativeScript theme support as well as some classes that we will create in a moment. We also use the Angular syntax to bind the title and subtitle inputs that we previously created to labels to create our card. Perhaps the most important part of the markup is the ng-content element. This element is a placeholder for Angular to tell it where to render anything that we nest inside the card element (more on this in a minute).
The last part of the CardComponent is some additional styling:
There isn’t a whole lot to talk about here we’ve just added some basic styling to make our card look like Monopoly!
To finish off, let’s update the list item template of the ItemComponent with our new CardComponent:
Note: Don’t forget to add the CardComponent to the declarations array in your app.module.
In the updated template, we added labels inside of it and these labels make up the contents of the card. We also used the Angular data binding syntax to give our cards titles and subtitles.
That’s really all there is to creating a reusable card component with NativeScript and Angular. The important items to keep in mind is how the ng-content element provides you a way to nest other elements (or components) inside of your component, the card selector that we defined is how to we utilize the component in the HTML markup, and input fields are how we can bind data to our component. Hopefully you can come up with some great reusable components of your own and share them with the community!
