Blog>
Snippets

Default Value for @Input

Explain how to set a default value for an @Input property if no value is provided by the parent component.
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<p>{{ myInputValue }}</p>'
})
export class ChildComponent {
  // Define the @Input with a default value
  @Input() myInputValue: string = 'Default Value';
}
In this TypeScript code for an Angular component, an @Input property named 'myInputValue' is given a default value of 'Default Value'. If the parent component does not provide a value, this default value will be used.