2.3 The Application Component

Hi folks, in this lesson, we're going to take a look at the root component for our application, which the Angular CLI created for us. We can start out by taking a look at what we get from the CLI, and then we can modify this to suit our needs. One of the big differences between Angular 1.X, and Angular 2+, is that in Angular 2 and above, the component is the main building block of applications. A component is a single unit of our application, and is usually composed of a piece of view in the form of an HTML template. Some styling information created using Sass or regular CSS, and some TypeScript logic that defines the component's behavior. So let's open up the app.component.ts file. If you remember from the last lesson, the app component is the root component which gets bootstraps by the application module. Just like the app module which use the NG module decorator, components in Angular are also defined using a decorator. This is the component decorator and in fact, is the only identifier imported by the app component. This decorator also takes a configuration object, which specifies meta information about the component. We tell Angular the name of the custom element that Angular should render the component into, in this case, that is called app-root. If we open up the index.html file, We can see that this app-root custom element has been added into the body. So that's where the app.component will get rendered into. Another core part of the component is the HTML template. We tell Angular where the template is using the template URL property and in this case it maps to a file called app.component.html. And this contains the template for the app component. So this was generated for us by the Angular CLI and just contains some example mark up, which the comment at the top states, can be replaced. We will replace that, but not right at this moment. Lastly, the configuration objects passed to the component decorator also specifies where the style sheets for this component are kept. This is done using the style URLs key, and the value for this is an array, so we can pass multiple style sheets. And if we wish, in this case which is passing in one, and that is the app.component.scss file. This is empty at the moment and it's also a file that was created for us automatically by the CLI. The app component class is defined as an export from this file. The class itself is very simple and has just a single property called title, and this is used to display the title of the application. Let's just open up the template once again. So we can see that there is a binding for the title right at the top of the template in the h1 tag. Welcome to {{ title }}. So this Angular's standard interpolations syntax. And we can place simple proxy bindings within them that map to properties, or methods of the component. We'll look at templates much more in detail later in the course, so we'll come back and look at interpolation in much more detail. So that's the example at component which the CLI created for us automatically. So now let's customize things a bit. I don't really having the component files loose in the roots of the application with the module. So first of all, let's create a new folder inside the Apps folder called home. And then let's move all of the app.component files into this new folder. So now let's rename all of these files to be home.component instead of the app.component. And now let's make some changes to the module, because it will still be looking for the old components. So let's open up app.module.ts. And first we'll need to update the path to the component, you can see that there is some red underlining because the path is no longer correct. And let's change the name of the class being imported to home component, instead of app component. And we still got some red underlining here underneath HomeComponent. Because at the moment, the HomeComponent is still exporting a class called app component, so let's just fix that. And still in the home.component file, we'll just need to update the template URL and style URL. Cool. So let's change the selector as well from @python route to @python home. It's a limp rule to prefix app hyphen to the start of all of our component selectors. And now we'll need to updates the custom element in the index page to match the new element that we just defined Having the name of the application defined in code is useful in case we want to change it in some point later on. So let's keep the title proxy in the home component, but let's update it to the name of the app which is going to be js-blackjack. And let's now update the home components template. We'll use this as the shell of our application. So at this stage, it just needs to contain the title for the application. You can keep the h1, and let's just change the text inside it. We don't wanna say welcome to, we'll just print out the name. So the template just contains regular HTML elements and a single binding called title. The binding is contained within double curly braces and it points to the title property in the components class. Angular will evaluate this at run time, and inject the evaluated value from the component into the template. We'll look at bindings and templates in much more detail later in the course. So if we switch back to the command line now, Let's just run the ng serve command. Once the completion has been completed successfully, we should still be able to run the example app in the browser. And we've got that running, let's just refresh that. And now we can see the changes that we have made have been applied. So all we see is the name of the application now and all of the example stuff that the CLI added for us. So in this lesson we looked at components in Angular and saw that they are logical groupings of a view, styling information, data, and behavior. We saw how to use the component decorator to define the component, and we saw how to add a custom element to render the component into. And how to add bindings in the component's template that link back to data in the backing class. Thanks for watching.