Required Inputs (v16)

📚 What are Required Inputs?

Required inputs ensure components receive mandatory data:

Compile-time check: Error if required input not provided
No undefined: TypeScript knows value exists
@Input decorator: { required: true }
input.required(): Signal-based required input (v18+)

🎯 Interview Questions

Q1: How do you make an input required?
A: Use @Input({ required: true }) or input.required() for signal inputs.
Q2: What happens if required input is not provided?
A: Compile-time error in template. Runtime error if bypassed.
Q3: What is the difference between input() and input.required()?
A: input() returns InputSignal<T | undefined>, input.required() returns InputSignal<T> (no undefined).
Q4: Can you provide a default value for required input?
A: No, required inputs cannot have defaults. If you need a default, use optional input with default value.

🔧 Live Demo - Required vs Optional

Component with Required Input

Required Input Component

Title: This is required!

Count: 42

Try removing [title] in the template - you'll get a compile error!

Component with Optional Input

Optional Input Component

Label: Default Label

Value: 0

Optional inputs use default values when not provided.

Optional with Custom Value

Optional Input Component

Label: Custom Label

Value: 100

📋 Input Types Comparison

Type	Decorator Syntax	Signal Syntax (v18+)	Type
Required	@Input({ required: true })	input.required<T>()	T
Optional	@Input()	input<T>()	T \| undefined
With Default	@Input() value = 'default'	input('default')	T

💻 Required Inputs Code


// ===== Decorator Syntax (v16+) =====

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

@Component({...})
export class UserCardComponent {
  // Required input - must be provided
  @Input({ required: true }) userId!: string;
  
  // Optional input with default
  @Input() showAvatar = true;
  
  // Optional input, can be undefined
  @Input() subtitle?: string;
}

// Usage:
// <app-user-card [userId]="'123'" />        ✅ Works
// <app-user-card />                          ❌ Compile error!

// ===== Signal Syntax (v18+) =====

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

@Component({...})
export class ProductCardComponent {
  // Required signal input - InputSignal<string>
  productId = input.required<string>();
  
  // Optional with default - InputSignal<number>
  quantity = input(1);
  
  // Optional without default - InputSignal<string | undefined>
  description = input<string>();
  
  // With transform
  price = input.required({
    transform: (value: string) => parseFloat(value)
  });
  
  // With alias
  externalName = input.required<string>({ alias: 'name' });
}

// In template, read signal value:
// {{ productId() }}
// {{ quantity() }}

// ===== Type Safety =====

// Decorator: requires ! assertion or initialization
@Input({ required: true }) name!: string;

// Signal: no assertion needed, type is guaranteed
name = input.required<string>();
// name() returns string, never undefined!

// ===== Input Transform =====

@Component({...})
export class ToggleComponent {
  // Transform string 'true'/'false' to boolean
  @Input({ 
    required: true,
    transform: booleanAttribute 
  }) 
  enabled!: boolean;
}

// Usage: <app-toggle enabled="true" />