In this video, learn how to create a component with the component decorator and how to set values in the component metadata.
- [Instructor] Okay let's build the first component, the app component. In a new file named app.compenent.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 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 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. Just like the ngModel 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 parenthesis 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 the 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 when I cover how to kick off an angular application with the bootstrap call.
- What is Angular?
- Working with components
- Binding events and properties
- Getting data to components
- Using directives and pipes
- Creating Angular forms
- Validating form data
- How Angular does dependency injection
- Making HTTP calls
- Styling components
Skill Level Intermediate
Angular: Building an Interfacewith Ray Villalobos2h 20m Intermediate
1. Architecture Overview
3. Directives and Pipes
5. Dependency Injection and Services
8. Styling Components
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?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.