Angular 5 Components Tutorial

The following tutorial is a part of our 100% free course Learn Angular 5 from Scratch - Angular 5 Tutorial

In the previous lesson (How to Install Angular 5) we set up our Angular 5 project. In this lesson, we're going to take a look at the basic structure of an Angular 5 app. This will include looking at Components and how to use the Angular CLI to generate them.

Let's get started.

If you prefer watching a video instead..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Taking a look at our project..

If you open up our new Angular 5 project in a code editor (I'm using Visual Studio Code), it will look like this:

> e2e
> node_modules
> src
.angular-cli.json
.editorconfig
.gitignore
karma.conf.js
package-lock.json
protractor.conf.js
README.md
tsconfig.json
tslint.json

For the most part, when you're developing, you're only going to be working within the /src/ folder.

What are Components?

Angular components are the basic building blocks of your app. Each component defines:

• Any necessary imports needed by the component
• A component decorator, which includes properties that allow you to define the template, CSS styling, animations, etc..
• A class, which is where your component logic is stored.

Angular components reside within the /src/app folder:

> src
  > app
    app.component.ts     // A component file
    app.component.html   // A component template file
    app.component.scss   // A component CSS file
    
    > about              // Additional component folder
    > contact            // Additional component folder

By default, the Angular CLI that we used to install the project just includes the /src/app/app.component files. A little later on, we will use the CLI to generate a new component for us and you will see how the folder structure reacts.

The Basic Component File

Let's open up the /src/app/app.component.ts componen file that the CLI generated for us:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

As mentioned previously, at the top we have our imports, the component decorator in the middle (which defines the selector, template and style location), and the component class.

Notice the selector app-root? If you open up /src/index.html you will see a custom HTML tag noted as <app-root></app-root>. 

This is where that particular component will load! If you have ng serve running in the console from the previous lesson, you will note that in the browser at http://localhost:4200, the HTML matches the /src/app/app.component.html file.

You will learn more about components, but for now, let's generate a new component.

Creating a New Component

The Angular CLI is used for more than just starting new projects. You can also use it to generate new components.

In the console (you can open up a second console so that your ng serve command is not halted), type:

$ ng generate component home

  // Output:

  create src/app/home/home.component.html (23 bytes)
  create src/app/home/home.component.spec.ts (614 bytes)
  create src/app/home/home.component.ts (262 bytes)
  create src/app/home/home.component.scss (0 bytes)
  update src/app/app.module.ts (467 bytes)

It will generate a few files for us, located in /src/app/home/ and it also updated our app.module.ts file.

Let's generate one more component called about:

$ ng g c about

Notice how this time, I used shorthand syntax for specifying generate and component.

Nesting a Component

We now have 2 additional components. Let's look at how we can nest our home component into the base app component.

Open up /src/app/app.component.html. Replace everything there with:

<ul>
  <li><a routerLink="home">Home</a></li>
  <li><a routerLink="about">About</a></li>
</ul>

<app-home></app-home>

<router-outlet></router-outlet>

Notice the custom selector app-home tags? That's the selector given in our /src/app/home/home.component.ts file.

If you look at your browser, you will see home works! This comes from the CLI generated template for the home component. You can go look at it to see that HTML if you wish.

Also notice at the bottom, <router-outlet>? In a future lesson, we will actually make the router load our home component by default, but for now, we're going to leave things as they are.

Going Forward

In the next lesson, we're going to take a look at both templating and styling in Angular 5.