How components work

- [Instructor] An Angular component allows you to define both the logic and the views for your app. A component is structured in three different sections. First we have the imports, which reside at the top of the file. These imports allow you to use a variety of code that your component may require. The component decorator which consists of metadata; this lets Angular know how to process our class. And then we have the component class. This is where you define the logic that's specific to the given component.

Now let's open up the project that we created in a code editor and look at what an Angular component actually looks like. So now we're going to navigate to the source: app and app.component.tsfile. As you can see, we have three different sections as mentioned above. On line one, we have our imports. And right now, we only have a single import, which is a required import from the Angular Core Library. On line three, we have our component decorator with its associated metadata.

And then finally, on line eight, our component class. Now, notice within the component decorator, we have a property called selector bound to the app-root value. We also have a template URL property which denotes the app.component.html as the template file for this component. The selector is designated within the source index.html file. We can see here, it's designated as a custom html tag on line 12.

This is where the app.component.ts view will be loaded. If we navigate back to our app component file, notice the title property that the Angular's command line interface generated. And that is on line nine. It's bound to a string of app works!. Well, remember the template URL is app.component.html. Let's look at that file. Here, we see an h1 tag that's referencing that title property through what's known as interpolation.

This is what gives us the app works! title that we see in the browser. This, in a nutshell, are how components work in Angular. In the next video, let's take a closer look at how to define html templates within the component decorator.