Component metadata - lordoftheflies/angular-essential-training GitHub Wiki

Selecting transcript lines in this section will navigate to timestamp in the video

• [Instructor] Okay, let's build the first component, the app component in a new 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 at the top of this file. And then we can call the decorator using the add 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, just like the NgModule decorator. The component decorator takes in a metadata object with some known properties to configure the 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 string value of app-root and we'll set 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 to. 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-root 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 processes it. You will see both of these in action in the next video