Skip to content
beginner Phase 2 · TypeScript Refresher for Angular

Classes and Decorator Syntax

Write class-based code that Angular decorators can attach metadata to.

40m
0 problems
Topic Progress 0%

TypeScript Classes for Angular

Angular is built on TypeScript classes. Every component, service, directive, and pipe is a class decorated with metadata that Angular's compiler reads.

Class Basics

class UserService {
  private apiUrl: string;
  protected timeout: number = 5000;
  public name: string;

  constructor(apiUrl: string, name: string) {
    this.apiUrl = apiUrl;
    this.name = name;
  }

  getApiUrl(): string {
    return this.apiUrl;
  }
}

Access Modifiers

Modifier Access
public Accessible anywhere (default)
private Only within the class
protected Within class and subclasses
readonly Cannot be reassigned after initialization

Parameter Properties

TypeScript shorthand for declaring and assigning constructor parameters:

// Verbose
class UserService {
  private http: HttpClient;
  constructor(http: HttpClient) {
    this.http = http;
  }
}

// Parameter property shorthand
class UserService {
  constructor(private http: HttpClient) {}
}

Inheritance

abstract class BaseService {
  protected abstract baseUrl: string;

  protected buildUrl(path: string): string {
    return `${this.baseUrl}${path}`;
  }
}

class UserService extends BaseService {
  protected baseUrl = '/api/users';

  getUsers() {
    return this.http.get(this.buildUrl('/'));
  }
}

How Angular Decorators Work

Decorators are functions that attach metadata to classes, methods, and properties. Angular's compiler reads this metadata to understand how to construct and wire together your application.

Core Angular Decorators

import { Component, Injectable, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-user-card',
  templateUrl: './user-card.component.html',
  styleUrls: ['./user-card.component.css'],
})
export class UserCardComponent {
  @Input({ required: true }) user!: User;
  @Input() showEmail: boolean = true;
  @Output() selected = new EventEmitter<User>();

  onSelect(): void {
    this.selected.emit(this.user);
  }
}

@Component Metadata

Property Purpose
selector CSS selector for the component's element
template / templateUrl Inline or external template
styles / styleUrls Inline or external styles
standalone Whether the component is standalone (default: true)
imports Other standalone components/directives/pipes used in template
changeDetection Change detection strategy
providers Component-level service providers

@Injectable

Marks a class as available for dependency injection:

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}
}

Decorator Execution Order

  1. Parameter decorators (bottom-up)
  2. Method decorators
  3. Property decorators
  4. Class decorator
// TypeScript compiles decorators to:
__decorate([
  Component({ selector: 'app-example', template: '<p>hi</p>' })
], ExampleComponent);

Custom Decorators

function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with`, args);
    return original.apply(this, args);
  };
}

class ExampleService {
  @Log
  getData() {
    return 'data';
  }
}

Quiz

1. What does the @Component decorator do?

Question 1 options

2. What is the purpose of @Injectable?

Question 2 options

3. What does 'private' access modifier do in a TypeScript class?

Question 3 options

Flashcards

Question

What are Angular decorators?

Click to reveal answer

Answer

Functions that attach metadata to classes, methods, and properties. Angular's compiler reads this metadata to wire the application together.

Question

What does @Component do?

Click to reveal answer

Answer

Attaches metadata (selector, template, styles) that tells Angular how to create and render the component.

Question

What is the parameter property shorthand?

Click to reveal answer

Answer

constructor(private http: HttpClient) {} — declares and assigns the property in one step.

Revision Notes

Key Takeaways

  • 1. Angular components, services, and directives are TypeScript classes
  • 2. Decorators attach metadata that Angular's compiler reads
  • 3. Access modifiers control visibility (private, protected, public)
  • 4. Parameter properties simplify constructor declarations

Interview Tips

  • • Explain how Angular's compiler reads decorator metadata
  • • Be ready to describe the difference between @Component and @Injectable
  • • Mention that decorators are evaluated at class definition time

Cheat Sheet

Classes and Decorators Cheat Sheet

Class with access modifiers:

class Example {
  private secret: string;
  protected internal: string;
  public name: string;
  readonly id: number;
}

Angular decorators:

  • @Component — component metadata
  • @Injectable — DI registration
  • @Input — parent-to-child data flow
  • @Output — child-to-parent events

Parameter property shorthand:

constructor(private http: HttpClient) {}

Continue Learning

Related Reading