Angular Component Pattern

Author Angular components with correct inputs/outputs, change detection strategy, and lifecycle hooks

When to Use

• Creating a new Angular component and deciding on its API surface (inputs, outputs, queries)
• Choosing between

  Default

  and

  OnPush

  change detection strategies
• Wiring parent-child communication without a shared service
• Using lifecycle hooks (

  ngOnInit

  ,

  ngOnDestroy

  ,

  ngAfterViewInit

  ) correctly
• Querying child elements with

  @ViewChild

  or

  @ContentChild

Instructions

1. Declare the component with

   @Component

   and always set

   selector

   ,

   template

   /

   templateUrl

   , and

   changeDetection

   .
2. Prefer

   changeDetection: ChangeDetectionStrategy.OnPush

   for all new components — it prevents unnecessary re-renders and forces explicit data flow.
3. Declare inputs with the

   input()

   signal function (Angular 17+) or

   @Input()

   decorator. Prefer signal inputs for new code.
4. Declare outputs with

   output()

   (Angular 17+) or

   @EventEmitter

   with

   @Output()

   . Signal outputs compose with effects naturally.
5. Keep component logic in the class; keep templates declarative. Move complex expressions into computed properties or pipes.
6. Implement

   OnDestroy

   (or use

   DestroyRef

   ) to clean up subscriptions, timers, and manual DOM listeners.
7. Use

   @ViewChild

   to access child component or DOM element references after

   ngAfterViewInit

   . Never access them in

   ngOnInit

   — they are not yet rendered.
8. Scope CSS with

   ViewEncapsulation.Emulated

   (the default) unless you have a specific reason to pierce the shadow DOM.

import {
  ChangeDetectionStrategy,
  Component,
  input,
  output,
  computed,
  OnDestroy,
} from '@angular/core';

export interface Product {
  id: string;
  name: string;
  price: number;
}

@Component({
  selector: 'app-product-card',
  template: `
    <div class="card">
      <h2>{{ product().name }}</h2>
      <p>{{ formattedPrice() }}</p>
      <button (click)="onAdd()">Add to cart</button>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProductCardComponent implements OnDestroy {
  // Signal input — reactive by default
  product = input.required<Product>();

  // Derived value — recalculates only when product() changes
  formattedPrice = computed(() =>
    new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
      this.product().price
    )
  );

  // Typed output
  addToCart = output<Product>();

  onAdd(): void {
    this.addToCart.emit(this.product());
  }

  ngOnDestroy(): void {
    // Clean up any manual subscriptions here
  }
}

Details

Change detection in depth: Angular's default change detection walks the entire component tree on every browser event.

OnPush

restricts checks to components whose input references have changed, an async pipe resolves, or a signal emits. This makes rendering O(changed subtree) instead of O(entire tree). Adopt it globally by setting it as the default in

angular.json

under

schematics

.

Signal inputs vs

@Input()

: Signal inputs (Angular 17.1+) return a

Signal<T>

rather than a plain value. This means the input participates in the reactivity graph —

computed()

and

effect()

can read it without subscribing to a subject or change detection cycle. Prefer

input()

for new components;

@Input()

still works and is required for libraries targeting older Angular versions.

Lifecycle hook order:

1. ngOnChanges

   — fires before

   ngOnInit

   and on every

   @Input()

   change

2. ngOnInit

   — fires once after first

   ngOnChanges

   ; safe to read inputs but NOT view children

3. ngAfterViewInit

   — fires after the component's view and child views are initialized; safe to use

   @ViewChild

4. ngOnDestroy

   — fires just before the component is removed; clean up subscriptions and effects

ViewChild timing pitfall: Accessing a

@ViewChild

in

ngOnInit

returns

undefined

because the view hasn't been created yet. Move that logic to

ngAfterViewInit

.

Output naming: Angular convention for outputs is camelCase event names without the

on

prefix in the class, but HTML consumers use

(addToCart)

. Avoid naming outputs with the

on

prefix in the property name — it creates

(onAddToCart)

which reads redundantly in templates.

Host bindings: Use

host: { '[class.active]': 'isActive()' }

in the decorator instead of

@HostBinding

— it is more declarative and compatible with the component metadata compiler.

Source

https://angular.dev/guide/components

Process

1. Read the instructions and examples in this document.
2. Apply the patterns to your implementation, adapting to your specific context.
3. Verify your implementation against the details and edge cases listed above.

Harness Integration

• Type: knowledge — this skill is a reference document, not a procedural workflow.
• No tools or state — consumed as context by other skills and agents.

Success Criteria

• The patterns described in this document are applied correctly in the implementation.
• Edge cases and anti-patterns listed in this document are avoided.