Understanding how to accept data with Angular input properties is essential for creating dynamic, data-driven Angular applications. This guide will cover the basics of using input properties, customizing them, and best practices for ensuring your components are efficient and maintainable.

What are Input Properties?

Input properties in Angular are similar to props in other frameworks. By using the @Input decorator, you can mark specific class properties as bindable, allowing data to be passed into the component.

Basic Usage

To define an input property, use the @Input decorator in your component class:

@Component({...})
export class CustomSlider {
  @Input() value = 0;
}

You can then bind to this property in a template:

<custom-slider [value]="50"></custom-slider>

Angular treats properties marked with @Input as inputs, which are settable via template bindings.

Customizing Inputs

The @Input decorator accepts a configuration object that allows you to customize how the input works.

Required Inputs

You can enforce that an input must always have a value using the required option:

@Component({...})
export class CustomSlider {
  @Input({required: true}) value = 0;
}

If a required input is not provided, Angular will report an error at build-time.

Input Transforms

Input transforms allow you to modify the value of an input when it's set by Angular. Use the transform option to specify a transformation function:

@Component({
  selector: 'custom-slider',
  ...
})
export class CustomSlider {
  @Input({transform: trimString}) label = '';
}


function trimString(value: string | undefined) {
  return value?.trim() ?? '';
}

In this example, the trimString function trims whitespace from the input value.

Built-in Transformations

Angular provides built-in transformation functions for common scenarios, such as coercing values to booleans and numbers:

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


@Component({...})
export class CustomSlider {
  @Input({transform: booleanAttribute}) disabled = false;
  @Input({transform: numberAttribute}) number = 0;
}

Input Aliases

To avoid naming conflicts or provide a more descriptive name, you can alias input properties using the alias option:

@Component({...})
export class CustomSlider {
  @Input({alias: 'sliderValue'}) value = 0;
}

In the template, you can now bind to the alias:

<custom-slider [sliderValue]="50"></custom-slider>

Advanced Techniques

Inputs with Getters and Setters

You can define inputs using getters and setters to control how values are set:

export class CustomSlider {
  private _value = 0;


  @Input()
  get value(): number {
    return this._value;
  }
  set value(newValue: number) {
    this._value = newValue;
  }
}

Specifying Inputs in the @Component Decorator

Instead of using the @Input decorator, you can list inputs directly in the @Component decorator, which is useful for inheriting properties:

@Component({
  ...,
  inputs: ['disabled'],
})
export class CustomSlider extends BaseSlider { }

You can also alias inherited inputs:

@Component({
  ...,
  inputs: ['disabled: sliderDisabled'],
})
export class CustomSlider extends BaseSlider { }

Best Practices for Angular Input Properties

  1. Avoid Naming Collisions: Choose input names that do not collide with properties on DOM elements.
  2. Avoid Prefixes: Unlike selectors, input properties do not need prefixes as they are unique to the component.
  3. Keep Inputs Simple: Avoid complex logic in input getters and setters to maintain performance.

FAQs about Angular Input Properties

  1. What are Angular input properties?
  2. Input properties are class properties marked with the @Input decorator, allowing data to be passed into a component.
  3. How do you define an input property?
  4. Use the @Input decorator on a class property within your component.
  5. Can you enforce required inputs in Angular?
  6. Yes, by using the required option with the @Input decorator.
  7. What are input transforms in Angular?
  8. Input transforms allow you to modify the value of an input when it is set.
  9. How do you alias input properties?
  10. Use the alias option in the @Input decorator to provide an alternative name.
  11. Can input properties have getters and setters?
  12. Yes, you can define inputs with getters and setters to control how values are set and retrieved.
  13. What are built-in transformations in Angular?
  14. Angular provides built-in functions to coerce values to booleans and numbers.
  15. How do you inherit input properties in Angular?
  16. List the input properties in the inputs array of the @Component decorator.
  17. Why avoid complex logic in input setters?
  18. Complex logic can impact performance, as Angular may call setters multiple times.
  19. Do input names need prefixes?
  20. No, input names do not need prefixes as they are unique to the component.
Recent Articles