28.6. Components¶

28.6.1. Start Fresh¶

In the terminal, navigate back to the angular_practice folder you created on the Angular First Steps page. Create a new project called component-practice.

$ ng new component-practice

Open the app.component.html file in VSCode. Remove ALL of the code and replace it with an empty div element.

1<div>
2
3</div>

OK, the stage is set for a closer look at components.

28.6.2. Component Files¶

Angular components consist of 4 files:

1. an HTML file (.html)
2. a CSS file (.css)
3. a typescript file (.ts)
4. a test file (.spec.ts)

Looking at the file tree, we see that all four files contain the name of the component---header, in this case. Also, the files are located in a folder named after the component.

If we add a new component named task-list, the four files created inside the task-list folder would be called:

1. task-list.component.html
2. task-list.component.css
3. task-list.component.ts
4. task-list.component.spec.ts

Each file contains information specific to that component. task-list.component.html holds the HTML required for the task-list and no other component. task-list.component.css only styles html within the task-list folder, the typescript code in task-list.component.ts only applies to this component, and all the tests for task-list will be found in task-list.component.spec.ts.

28.6.3. Adding a New Component¶

Each component is a smaller part of an overall web application. The main component, app, serves as a base structure, and it comes standard with all Angular applications. It is the container that holds all of the other components, and it organizes them into the web application.

When you generate a new component using the Angular CLI, it is automatically added to app. Let's explore how this process works.

28.6.3.1. ng generate¶

To create a new Angular component, the terminal syntax is:

$ ng generate component component-name

Warning

A common mistake is to create a new component in the wrong location, say in the src folder instead of in app.

ng generate places the new component folder within your current directory. Use the terminal to navigate to where you want the component to go BEFORE running the generate command.

Creating a task-list component looks something like this:

From the output, we see that the ng generate command created four new files in the src/app/task-list folder.

Note

Recall that ng generate can be shortened to ng g.

28.6.3.2. Try It¶

1. Use the terminal panel in VSCode to navigate into the app folder.

   $ ls
      first-project  component-practice
   $ cd component-practice
   $ cd src
   $ cd app
   $ ls
      app.component.css    app.component.spec.ts   app.module.ts
      app.component.html   app.component.ts
   

2. Run ng generate component task-list.

3. Add a header component by running ng generate component header.

When done, your file structure in VSCode should look something like:

28.6.4. app.module.ts¶

In order to communicate with the new components, app.module.ts needs new import statements. Fortunately, ng generate updates the code automatically. We do not need to worry about taking care of this task ourselves.

Before ng generate:

 1import { BrowserModule } from '@angular/platform-browser';
 2import { NgModule } from '@angular/core';
 3
 4import { AppComponent } from './app.component';
 5
 6@NgModule({
 7   declarations: [ AppComponent ],
 8   imports: [ BrowserModule ],
 9   providers: [],
10   bootstrap: [AppComponent]
11})
12export class AppModule { }

After generating the header and task-list components:

 1import { BrowserModule } from '@angular/platform-browser';
 2import { NgModule } from '@angular/core';
 3
 4import { AppComponent } from './app.component';
 5import { TaskListComponent } from './task-list/task-list.component';
 6import { HeaderComponent } from './header/header.component';
 7
 8@NgModule({
 9   declarations: [
10      AppComponent,
11      TaskListComponent,
12      HeaderComponent
13   ],
14   imports: [ BrowserModule ],
15   providers: [],
16   bootstrap: [AppComponent]
17})
18export class AppModule { }

Angular updates app.module.ts by adding new import statements on lines 5 and 6 as well as expanding the declarations array on line 9.

28.6.5. Arranging Components¶

Run ng serve to launch the webpage. The page shows up empty because we removed all of the code from app.component.html except for the div tags.

Modify app.component.html as follows:

1<div>
2   <app-header></app-header>
3</div>

Save your change and wait for the webpage to refresh. You should now see the text "header works!" at the top of the page.

This is another helpful feature with Angular---when you correctly implement a new component, confirmation text appears on the screen.

How did <app-header></app-header> make this happen? Open header.component.ts in VSCode:

 1import { Component, OnInit } from '@angular/core';
 2
 3@Component({
 4   selector: 'app-header',
 5   templateUrl: './header.component.html',
 6   styleUrls: ['./header.component.css']
 7})
 8export class HeaderComponent implements OnInit {
 9
10   constructor() { }
11
12   ngOnInit() {
13   }
14}

Line 4 defines the HTML tag for the header component to be app-header. If we try changing the string to 'orange', we would see the "header works!" text disappear from the webpage. This is because the HTML tag <app-header> is no longer linked to the component. The string assigned in line 4 MUST match the tags used in app.component.html.

1<p>header works!</p>

28.6.5.2. Bring in task-list¶

Line 4 in header.component.ts defined the app-header tag, and line 4 in task-list.component.ts does something similar.

Modify app.component.html as follows:

1<div>
2   <app-header></app-header>
3   <app-task-list></app-task-list>
4</div>

Your webpage should look similar to:

Try It

Move <app-task-list></app-task-list> above <app-header></app-header> and see how the webpage changes.

28.6.6. Component Nesting¶

Components can be put inside of other components. In essence, this is how the app component works. It is the component that holds all other components.

However, sometimes you might want to nest a new component inside of another one rather than in app.

Let's assume we want to add a new component within our task-list folder. In this case, we navigate into the task-list directory and then run the ng generate component command.

$ ls
   app.component.css    app.component.spec.ts   app.module.ts   task-list
   app.component.html   app.component.ts        header
$ cd task-list
$ ng generate component inside-task-list

Running this command nests our new folder inside of the task-list folder, and it contains the four files we would expect.

When we place one component inside of another, we must pay attention to how the components interact. The nested component is called the child, while the original component is called the parent. In our example, task-list serves as the parent, while inside-task-list is the child.

1. Any CSS, HTML, or JavaScript we write for the nested component (the child) only affects that component. Changes to the child do NOT affect the parent.
2. The parent component DOES influence the nested one. For example, any CSS within task-list.component.css applies to both task-list.component.html AND inside-task-list.component.html.
3. If we want inside-task-list to have different styling, we need to add code to inside-task-list.component.css to override the parent.

28.6.7. Check Your Understanding¶

If you have not already done so, use ng generate to nest the inside-task-list component inside the task-list component.