Join Justin Schwartzenberger for an in-depth discussion in this video Component metadata, part of Angular 2 Essential Training.
- Okay, let's build the first component, the app component, in a file named app.component.ts, inside the app directory. To build an Angular component, you need to use the component decorator on a class. The component decorator comes from the core scope package in Angular. So, we can add an import statement for the component decorator from the Angular core scope package. And then we can call the decorator, using the app component syntax with the parentheses.
Then, we need to export a class for the component. We will name this class AppComponent. So, the class definition reads as: export class AppComponent, and a pair of curly braces. Now, just like the NG module decorator, the component decorator takes in a metadata object, with some known properties, to configure a class you decorate as an angular component. To decorate a component, you need to provide two metadata properties at a minimum.
Selector, and template, or template url. We will pass in an object literal, inside the component decorator parentheses. And for now, we will set the selector property to the stringed value of app. And the template property to a string with an HTML H1 tag. The selector property is what Angular will use to locate a custom HTML element, and apply the component too. I will cover this in more detail in an upcoming video.
The index.html file in the project has a custom HTML element named app in it, so this selector will target that. Angular will use the template property content to fill the inner HTML of the targeted custom element when it's processed. You will see both of these in action in the next video, when I cover how to kick an Angular application off with the bootstrap call.
Justin Schwartzenberger steps through the framework one feature at a time, focusing on the new component-based architecture of Angular 2. You'll learn what Angular is and what it can do, as Justin builds a full-featured web app from start to finish. After mastering the essentials, you can tackle the other project-based courses in our library and create your own Angular app.
- What is Angular?
- Setting up an Angular template
- Creating a component
- Binding events and properties
- Getting data to components
- Using directives and pipes
- Creating Angular forms
- Validating form data
- Understanding dependency injection
- Providing services
- Making HTTP calls
Skill Level Intermediate
Q: This course was updated on 03/01/2018. What changed?
A: The following topics were updated: directives and pipes, forms, dependency injection and services, HTTP, and routing.
1. Architecture Overview
3. Directives and Pipes
5. Dependency Injection and Services
Router links2m 36s
Next steps1m 20s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.