ANGULAR: Angular Components

Components in Angular allow you to define HTML, CSS, and JavaScript for a page or a section of a page. Every visible element in an Angular application is built from components — from the full page layout down to a single button.

+----------------------------------------------+
|              Angular Application              |
|                                               |
|   +----------+  +----------+  +----------+   |
|   |  Header  |  |   Nav    |  |  Footer  |   |
|   | Component|  |Component |  |Component |   |
|   +----------+  +----------+  +----------+   |
|                                               |
|         +---------------------+               |
|         |   Main Component   |               |
|         |  +-----------+     |               |
|         |  | Card Comp |     |               |
|         |  +-----------+     |               |
|         +---------------------+               |
+----------------------------------------------+

Generating a Component

The Angular CLI makes creating components simple:

ng generate component <component-name>
# or the shorthand:
ng g c <component-name>

This command does two things automatically:

1. Creates four files in /src/app/components/component-name/:

2. Registers the component in /src/app/app.module.ts:

import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [HomeComponent]
})

Anatomy of a Component File

The generated TypeScript file follows a consistent structure:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

}

Breaking this down:

• import { Component } — imports the Component decorator from Angular's core library
• @Component — a decorator that adds metadata to the class, telling Angular that this class is a component
• selector — the HTML tag used to include this component
• templateUrl — points to the external HTML file
• styleUrls — points to the external CSS/SCSS file(s)
• export class HomeComponent — the TypeScript class that holds the component's logic and data

The Selector

The selector is the custom HTML tag that renders the component in a parent template:

<app-home></app-home>

Angular sees this tag and replaces it with the component's template. The app- prefix is the default project prefix, and it can be changed in angular.json:

{
  "prefix": "app"
}

Template and Style Options

Angular gives you two ways to define templates and styles — inline or via external files.

External Files (Recommended for larger components)

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

External files are recommended because they give you better IDE support, syntax highlighting, and easier maintenance as the component grows.

Inline Template and Style

For small, self-contained components, you can define everything inline:

@Component({
  selector: 'app-home',
  template: `
    <p class="red">
      Inline home works!
    </p>
  `,
  styles: [`
    .red {
      color: red;
    }
  `]
})

Using the Component

Once a component is declared in a module, you can use it anywhere in that module's templates by adding its selector tag.

To render HomeComponent inside the root app template:

<!-- /src/app/app.component.html -->
<app-home></app-home>

Angular will inject the HomeComponent template at this location when the page renders.

Component Composition

Components can be nested inside other components, creating a tree structure that mirrors the visual hierarchy of the page.

AppComponent
  |
  +-- NavbarComponent
  |
  +-- HomeComponent
  |     |
  |     +-- ProductCardComponent
  |     +-- ProductCardComponent
  |
  +-- FooterComponent

Each component manages its own data, styles, and logic. This isolation is what makes Angular applications maintainable at scale.

Summary

Angular components are the core building block of every application. Understanding how to generate them, how the metadata decorator works, and how selectors connect templates together is essential before moving on to data binding, lifecycle hooks, and services.

Every Angular application is a tree of components — start building yours from the root.