Skip to main content

​
Introduction

The Angular Core API provides the fundamental building blocks for creating Angular applications. This module contains decorators, functions, and interfaces that enable component creation, dependency injection, lifecycle management, and reactive data handling.

​
Key Concepts

​
Decorators

Angular uses TypeScript decorators to add metadata to classes and class members:
  • @Component - Defines a component with template and styles
  • @Directive - Creates reusable behaviors for DOM elements
  • @Injectable - Marks a class as available for dependency injection
  • @Input - Declares input properties for data binding
  • @Output - Declares output properties for event emission

​
Components and Directives

Components are the basic UI building blocks of Angular applications. They combine:
  • A TypeScript class with application logic
  • An HTML template that defines the view
  • CSS styles for appearance
  • Metadata that tells Angular how to process the class
Directives extend HTML by attaching custom behavior to DOM elements.

​
Dependency Injection

Angular’s dependency injection system allows you to declare dependencies in class constructors. The framework automatically provides instances when needed, promoting loose coupling and testability.

​
Lifecycle Hooks

Components and directives have lifecycle hooks that provide visibility into key moments:
  • Initialization (OnInit)
  • Change detection (OnChanges, DoCheck)
  • View and content queries (AfterViewInit, AfterContentInit)
  • Cleanup (OnDestroy)

​
API Categories

Component

Define components with templates and styling

Directive

Create reusable DOM behaviors

Injectable

Enable dependency injection for services

Input & Output

Define component communication interfaces

Lifecycle Hooks

React to component lifecycle events

​
Common Imports

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

​
Standalone Components

Starting with Angular 14, components can be standalone, eliminating the need for NgModules: 
@Component({
  selector: 'app-hello',
  standalone: true,
  template: '<h1>Hello {{name}}</h1>'
})
export class HelloComponent {
  name = 'World';
}

​
Signal-Based APIs

Angular 16+ introduces signal-based reactivity:
  • input() - Signal-based input properties
  • output() - Signal-based output properties
  • computed() - Derived reactive values
  • effect() - Side effects based on signal changes

Components Guide

Learn how to build components

Dependency Injection

Master Angular’s DI system