In this video, Alex Ziskind introduces Angular components in the context of a NativeScript application. He starts with a review of the root app component and builds the classes for the RPS core components.
- [Instructor] A component is the building block unit of NativeScript Angular app user interface. All NativeScript apps consist of components that define the UI elements and screens. Every application has a root component, in our case it's called the app.component, and a set of child components, such as the pt-backlog-component that we've declared in the backlog module. Here are some rules about components and their behavior. A component knows how to interact with its host element, a component knows how to render itself, a component configures dependency injection, a component has a well-defined public API of inputs and output properties, and a component has a well-defined life cycle.
As we build out out app, we'll see examples of each of these rules. What we haven't done yet is hook everything together to see some results. Let's connect a few components together and see the results. First, we need to show the backlog in our app so we need to use its selector as an element in the root app-component. I'm gonna open up the root app-component, and instead of this label I'm gonna use the pt-backlog selector.
This'll tell the angular component rendering engine to place the pt-backlog in this space for the template of the component. Now let's open up the pt-backlog-component, and we'll take a look at the html file which is blank right now. I'm gonna use the NativeScript snippets again, and I'm gonna use the nslabel snipper to create a label. And let's take a look at that app now. We still don't see a backlog here, and we don't have any errors, but why? If we want to use a component that's part of the feature module in a component that's part of another module, we not only need to import the feature module in the root module, but we also need to export the child component from the feature module.
We'll add the export of pt-backlog-component to exports array in the ptBacklog module. Now if we take a look at the app, we see the backlog component in the app. But right now it's pretty dull. Let's add another component layer that will display a list of backlog items. Since it's related to the backlog feature, the item list component is going to live in its own folder inside the pt-backlog folder. I'm gonna close everything out, and inside the pt-backlog folder I'm gonna create a new folder for pt-item-list.
Here we're gonna create a new file, we're gonna call it pt-item-list-component. I'm gonna use Angular Snippets again to create a component, and the selector's gonna be called pt-item-list, and the template URL is gonna match the filename. And the class is gonna be called pt-item-list-component.
If you go to your exercise files and chapter 3, 3_01 in the steps folder, open up the resources text file. And we're gonna copy this constant array called items. Go ahead and paste that into our component. This is only temporarily here, we'll replace it later. This'll give us some mock data that we can show in a list of items. So TADScript is complaining right now because it doesn't know what item type Eenum is or StatusEnum.
We need to import these, and we're gonna import them from the files that we've already pasted into our application. I'm gonna import all the required Enums from shared/static-data, and if I hit control-space, it'll show me what's available in that file. So we need ItemTypeEnum, we need StatusEnum, and we need the PriorityEnum. We also need to import this IPTItem right here.
We're gonna import the pt domain from typings/domain. And finally we're gonna create a local alias for IPTItem from PTDomain.IPTItem. That's gonna make TADScript happy, basically we're creating an array of IPTItems, these are out backlog items.
- Setting up the development environment
- Using the NativeScript CLI
- Using Angular with NativeScript
- Angular bootstrap
- Application architecture
- User interface
- NativeScript widgets
- Application lifecycle
- Data and event binding