7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 The Application Component

In this lesson we'll see how the root component works with the module to define the root of our app. We will also customize this file to suit the example application.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


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.

Back to the top