Home / Angular / Angular 5 Components Tutorial

Angular 5 Components Tutorial

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:


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 .

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:

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 , otice at the bottom, ? 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.

About Mohammad Fareed

Software Engineer @ Tekzenit.

Check Also

What’s new In Angular 5? What Is the Difference Between Angular 4 and Angular 5?

Angular, one of the best open-source JavaScript frameworks for web application development, recently upgraded with …

Leave a Reply

Your email address will not be published. Required fields are marked *