or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

application-management.mdchange-detection.mdcomponent-system.mddependency-injection.mdindex.mdmodern-authoring.mdresource-api.mdrxjs-interop.mdtesting.mdutilities-helpers.md
tile.json

tessl/npm-angular--core

Angular - the core framework providing foundational infrastructure for building modern web applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@angular/core@20.2.x

To install, run

npx @tessl/cli install tessl/npm-angular--core@20.2.0

index.mddocs/

Angular Core

Angular Core is the foundational framework library for building modern web applications. It provides the essential infrastructure including component system, dependency injection, change detection, reactivity primitives, and platform abstractions that form the backbone of Angular applications.

Package Information

  • Package Name: @angular/core
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @angular/core

Core Imports

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

For CommonJS (Node.js):

const { Component, Injectable, NgModule } = require("@angular/core");

Basic Usage

import { Component, Injectable, Input, OnInit } from "@angular/core";

// Basic component
@Component({
  selector: 'app-greeting',
  template: '<h1>Hello {{name}}!</h1>'
})
export class GreetingComponent implements OnInit {
  @Input() name: string = '';

  ngOnInit(): void {
    console.log('Component initialized');
  }
}

// Basic service
@Injectable({
  providedIn: 'root'
})
export class GreetingService {
  getGreeting(name: string): string {
    return `Hello, ${name}!`;
  }
}

// Modern signal-based component
import { Component, input, computed, signal } from "@angular/core";

@Component({
  selector: 'app-counter',
  template: `
    <div>Count: {{displayCount()}}</div>
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
  `
})
export class CounterComponent {
  // Signal-based input
  initialValue = input(0);
  
  // Internal signal state
  count = signal(0);
  
  // Computed signal
  displayCount = computed(() => this.count() + this.initialValue());
  
  increment() {
    this.count.update(val => val + 1);
  }
  
  decrement() {
    this.count.update(val => val - 1);
  }
}

Architecture

Angular Core is built around several key architectural concepts:

  • Component System: Declarative components with templates, lifecycle hooks, and data binding
  • Dependency Injection: Type-safe service injection with hierarchical injectors and providers
  • Change Detection: Efficient DOM update system with automatic and manual change detection strategies
  • Reactivity: Signal-based reactive programming primitives for state management
  • Platform Abstraction: Cross-platform DOM manipulation and rendering APIs
  • Module System: Organization of applications into cohesive feature modules
  • Testing Infrastructure: Comprehensive testing utilities for components, services, and integration tests

Capabilities

Component System & Decorators

Core decorators and lifecycle interfaces for building Angular components, directives, pipes, and modules. Includes traditional decorator-based APIs and property binding.

// Core decorators
@Component(config: ComponentDecorator): TypeDecorator;
@Directive(config: DirectiveDecorator): TypeDecorator;
@Pipe(config: PipeDecorator): TypeDecorator;
@NgModule(config: NgModuleDecorator): TypeDecorator;
@Injectable(config?: InjectableDecorator): TypeDecorator;

// Property decorators
@Input(bindingPropertyName?: string): PropertyDecorator;
@Output(bindingPropertyName?: string): PropertyDecorator;
@HostBinding(hostPropertyName?: string): PropertyDecorator;
@HostListener(eventName: string, args?: string[]): PropertyDecorator;

// Lifecycle interfaces
interface OnInit {
  ngOnInit(): void;
}

interface OnDestroy {
  ngOnDestroy(): void;
}

Component System & Decorators

Modern Authoring (Signal-Based APIs)

New signal-based APIs for inputs, outputs, queries, and two-way binding. These provide better type safety and integration with Angular's reactivity system.

// Signal-based inputs
function input<T>(): InputSignal<T | undefined>;
function input<T>(initialValue: T): InputSignal<T>;
function input.required<T>(): InputSignal<T>;

// Model signals for two-way binding
function model<T>(): ModelSignal<T | undefined>;
function model<T>(initialValue: T): ModelSignal<T>;

// Output signals
function output<T>(): OutputEmitterRef<T>;

// Query functions
function viewChild<T>(locator: ProviderToken<T>): Signal<T | undefined>;
function viewChildren<T>(locator: ProviderToken<T>): Signal<ReadonlyArray<T>>;
function contentChild<T>(locator: ProviderToken<T>): Signal<T | undefined>;
function contentChildren<T>(locator: ProviderToken<T>): Signal<ReadonlyArray<T>>;

Modern Authoring APIs

Dependency Injection System

Comprehensive dependency injection system with providers, injectors, and injection tokens for managing services and dependencies throughout the application.

// Core injection
function inject<T>(token: ProviderToken<T>): T;
function inject<T>(token: ProviderToken<T>, options: InjectOptions): T | null;

// Injector classes
abstract class Injector {
  abstract get<T>(token: ProviderToken<T>): T;
  static create(options: StaticProvider[]): Injector;
}

// Provider types
interface ClassProvider {
  provide: any;
  useClass: Type<any>;
  multi?: boolean;
}

interface ValueProvider {
  provide: any;
  useValue: any;
  multi?: boolean;
}

interface FactoryProvider {
  provide: any;
  useFactory: Function;
  deps?: any[];
  multi?: boolean;
}

// Injection tokens
class InjectionToken<T> {
  constructor(desc: string, options?: {
    providedIn?: Type<any> | 'root' | 'platform' | 'any';
    factory?: () => T;
  });
}

Dependency Injection

Change Detection & Reactivity

Change detection system with manual control, differs for collections, and reactive primitives including signals, computed values, and effects.

// Change detection
abstract class ChangeDetectorRef {
  abstract markForCheck(): void;
  abstract detach(): void;
  abstract detectChanges(): void;
  abstract checkNoChanges(): void;
  abstract reattach(): void;
}

// Reactive signals
function signal<T>(initialValue: T): WritableSignal<T>;
function computed<T>(computation: () => T): Signal<T>;
function effect(effectFn: (onCleanup: EffectCleanupRegisterFn) => void): EffectRef;

interface WritableSignal<T> extends Signal<T> {
  set(value: T): void;
  update(updateFn: (value: T) => T): void;
  asReadonly(): Signal<T>;
}

// Zone management
class NgZone {
  run<T>(fn: (...args: any[]) => T): T;
  runOutsideAngular<T>(fn: (...args: any[]) => T): T;
}

Change Detection & Reactivity

Application & Platform Management

Application lifecycle management, platform abstraction, bootstrapping, and initialization services for creating and managing Angular applications.

// Application management
class ApplicationRef {
  bootstrap<C>(componentOrFactory: ComponentFactory<C> | Type<C>): ComponentRef<C>;
  tick(): void;
  attachView(viewRef: ViewRef): void;
  detachView(viewRef: ViewRef): void;
}

// Platform management
abstract class PlatformRef {
  abstract bootstrapModule<M>(moduleType: Type<M>): Promise<NgModuleRef<M>>;
  abstract destroy(): void;
}

// Platform creation
function createPlatform(injector: Injector): PlatformRef;
function createPlatformFactory(
  parentPlatformFactory: PlatformFactory | null,
  name: string,
  providers: StaticProvider[]
): PlatformFactory;

// Application configuration
interface ApplicationConfig {
  providers: Provider[];
}

function mergeApplicationConfig(
  ...configs: ApplicationConfig[]
): ApplicationConfig;

Application & Platform Management

Testing Utilities

Comprehensive testing infrastructure including TestBed for configuring test environments, ComponentFixture for component testing, and async testing utilities.

// Test bed
class TestBed {
  static configureTestingModule(moduleDef: TestModuleMetadata): TestBed;
  static createComponent<T>(component: Type<T>): ComponentFixture<T>;
  static inject<T>(token: ProviderToken<T>): T;
  static runInInjectionContext<T>(fn: () => T): T;
}

// Component testing
class ComponentFixture<T> {
  componentInstance: T;
  debugElement: DebugElement;
  nativeElement: any;
  detectChanges(): void;
  whenStable(): Promise<any>;
  autoDetectChanges(autoDetect?: boolean): void;
}

// Async testing
function fakeAsync(fn: Function): (...args: any[]) => any;
function tick(millis?: number): void;
function flush(): number;
function flushMicrotasks(): void;

Testing Utilities

RxJS Interoperability

Seamless integration between Angular's signal-based reactivity system and RxJS observables, enabling bidirectional conversion and lifecycle integration.

// Signal to Observable conversion
function toObservable<T>(source: Signal<T>, options?: { injector?: Injector }): Observable<T>;

// Observable to Signal conversion
function toSignal<T>(source: Observable<T>, options?: { initialValue?: T; injector?: Injector }): Signal<T | undefined>;

// Lifecycle integration
function takeUntilDestroyed<T>(destroyRef?: DestroyRef): MonoTypeOperatorFunction<T>;

// Output integration
function outputFromObservable<T>(source: Observable<T>): OutputRef<T>;
function outputToObservable<T>(output: OutputRef<T>): Observable<T>;

RxJS Interoperability

Resource API (Experimental)

Declarative data loading with built-in loading states, error handling, and server-side rendering support for managing asynchronous operations.

// Resource creation
function resource<T>(loader: ResourceLoader<T>, options?: ResourceOptions): WritableResource<T>;

// Resource interfaces
interface Resource<T> {
  value(): T | undefined;
  status(): ResourceStatus;
  error(): unknown;
  isLoading(): boolean;
}

interface WritableResource<T> extends Resource<T> {
  reload(): void;
  set(value: T): void;
  update(updateFn: (current: T | undefined) => T): void;
}

// Resource utilities
function localResource<T>(value: T): WritableResource<T>;
function mapResource<T, U>(source: Resource<T>, transform: (value: T) => U): Resource<U>;

Resource API

Utilities & Helpers

Core utilities including version information, error handling, debugging tools, transfer state, and various helper functions.

// Version information
const VERSION: Version;
class Version {
  readonly full: string;
  readonly major: string;
  readonly minor: string;
  readonly patch: string;
}

// Error handling
abstract class ErrorHandler {
  abstract handleError(error: any): void;
}

// Debug utilities
class DebugElement extends DebugNode {
  readonly nativeElement: any;
  query(predicate: string): DebugElement | null;
  triggerEventHandler(eventName: string, eventObj?: any): void;
}

// Transfer state for SSR
class TransferState {
  get<T>(key: StateKey<T>, defaultValue: T): T;
  set<T>(key: StateKey<T>, value: T): void;
}

function makeStateKey<T>(stateId: string): StateKey<T>;

Utilities & Helpers

Types

Core Types

// Basic types
interface Type<T> extends Function {
  new (...args: any[]): T;
}

interface AbstractType<T> extends Function {
  prototype: T;
}

// Provider token
type ProviderToken<T> = Type<T> | InjectionToken<T> | string;

// Event emitter
class EventEmitter<T> extends Subject<T> {
  emit(value?: T): void;
  subscribe(next?: (value: T) => void): Subscription;
}

// Element reference
class ElementRef<T = any> {
  nativeElement: T;
  constructor(nativeElement: T);
}

// Template reference
abstract class TemplateRef<C> {
  abstract elementRef: ElementRef;
  abstract createEmbeddedView(context: C): EmbeddedViewRef<C>;
}

Configuration Enums

enum ViewEncapsulation {
  Emulated = 0,
  None = 2,
  ShadowDom = 3
}

enum ChangeDetectionStrategy {
  OnPush = 0,
  Default = 1
}

enum SecurityContext {
  NONE = 0,
  HTML = 1,
  STYLE = 2,
  SCRIPT = 3,
  URL = 4,
  RESOURCE_URL = 5
}