Angular Components

What is Components in Angular?

A component is a TypeScript class with an @Component decorator that pairs a template with logic. Every visible part of an Angular application is a component, and they nest to form a tree with one root.

Components example

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

@Component({
  selector: 'app-job-card',
  standalone: true,
  templateUrl: './job-card.component.html',
  styleUrl: './job-card.component.css',
})
export class JobCardComponent {
  title = 'Frontend Intern';
  stipend = 15000;

  apply(): void {
    console.log('Applied to', this.title);
  }
}

How this works

selector is the tag other templates use to place this component. templateUrl and styleUrl point at sibling files; small components can use inline template and styles instead. Styles are scoped to the component by default, so they cannot leak out.

Key points to remember

• Generate components with ng g c name — it creates all four files consistently.
• The class holds state and methods; the template reads them directly.
• View encapsulation scopes CSS per component automatically.
• A component must be declared standalone, or listed in an NgModule in older projects.

Common mistakes with Components

• Using a component without importing it into the consuming standalone component’s imports array.
• Choosing a selector without a prefix, which risks colliding with real HTML tags.