Angular - 2-4 Creating a new component

We have established that components matter. AppComponent is a regular Angular component but also a special one: it acts as the root component, registered in AppModule in the bootstrap array. Every other component we create will not be listed in index.html - instead, its selector will be added inside app.component.html (or any other parent template). Let's create our first non-root component.

Suppose we are building a server-management application and we want to display information about a server. We start by creating a sub-folder named server inside app/. By convention each component lives in its own folder named after the component itself. Inside that folder we create a new file server.component.ts. The naming convention (name.component.ts) is useful because we will later add other artefacts (services, pipes, directives) with their own suffixes - the suffix makes the role of each file obvious.

Anatomy of a component

  • A plain TypeScript class: export class ServerComponent { }.
  • A class decorator from @angular/core: import { Component } from '@angular/core';.
  • Configuration object passed to the decorator: selector (the HTML tag), templateUrl (the markup), optionally styleUrls.

The decorator turns the class into something Angular understands: @Component({ selector: 'app-server', templateUrl: './server.component.html' }). The selector must be unique - we prefix it with app- by convention to avoid colliding with native HTML elements or third-party components. The template lives in an external file server.component.html in the same folder, containing something simple like <p>Server component is alive</p>.

The relative path ./server.component.html works because the Angular CLI bundles everything through webpack and locates files relatively to the TypeScript file. With this in place, our first custom component exists - but we still need to declare it in the AppModule so Angular recognises the selector. We will do that in the next lesson when we dig into the module file.

Summary

This lesson covers the fundamentals of creating new Angular components, using a practical example of building a server management component. It explains how components work in Angular, the role of the root AppComponent in bootstrapping the application, and the step-by-step process of creating a component class with the @Component decorator. The lesson demonstrates proper file naming conventions, folder organization, and how to configure components with a selector and external template reference.

Key points

  • Angular components are TypeScript classes decorated with @Component that Angular can instantiate and manage.
  • The AppComponent is special as it serves as the root component that bootstraps the entire application; other components are added through their selectors.
  • Folder and file naming conventions are important for organization: the folder name should match the component name, and files follow the pattern component-name.component.ts.
  • The @Component decorator must be imported from '@angular/core' and requires configuration metadata including the selector and template.
  • The selector defines the HTML tag (e.g., <app-server>) that allows you to use the component in other templates; it should be unique and typically prefixed with 'app-'.
  • Templates can be defined externally by referencing an HTML file with templateUrl, requiring a corresponding .component.html file.

FAQ

What is the purpose of the selector property in a @Component decorator?

The selector defines the HTML tag name that allows you to use the component in other templates. It should be unique and typically prefixed with 'app-' to avoid conflicts with default HTML elements (e.g., <app-server>).

Why must we import the @Component decorator from '@angular/core'?

The @Component decorator is not a default TypeScript feature; it is a special Angular feature. The import statement makes the decorator available for your component class so Angular can recognize and manage it.

Can I define the template inline instead of in a separate HTML file?

Yes, the lesson mentions this as an alternative. You can use the template property directly in the decorator instead of templateUrl to define HTML inline, though external templates are a common best practice for larger applications.