Angular Input enhancements

The Angular 16 release adds useful enhancements to the @Input decorator. We can make an input required, we can transform the input value, and we can bind inputs route data (parameters, query parameters, and the route data property).

We can transform the input value by providing a transform method, which is invoked with the input value. Angular already provides the numberAttribute and booleanAttribute transform methods, but you can also implement your own.

 child.component.ts 
import { Input, numberAttribute, booleanAttribute } from '@angular/core';
 
@Component()
export class ChildComponent {
  // Required when a parent component renders this component
  // <child-component [componentParam]="parameterValue" />
  // If the param is not provided, this turns into the following compile error
  // Required input 'param' from component ChildComponent must be specified.
  @Input({ required: true })
  componentParam = '';
 
  // Parameter based on the :paramKey route parameter
  // /child-route/abc
  @Input()
  paramKey = '';
 
  // Parameter based on the :paramKey query parameter ?queryId
  // /child-route/abc?queryId=123
  // When the query parameter is not provided, or is not a number
  // then the fallback value (3) is assigned to the property
  @Input({
    transform: (value: unknown) => numberAttribute(value, 3),
  })
  queryId = 0;
 
  // Parameter based on the data `dataParam` property of the route
  // data: { dataParam: { layout: 'medium' } }
  @Input()
  dataParam?: { layout: string };
}

To be able to bind the route data to component inputs, you need to configure the Angular router by including the new withComponentInputBinding().

 app.config.ts 
import { ApplicationConfig } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      [
          {
            path: 'child-route/:paramKey',
            loadComponent: () =>
              import('./child/child.component').then((mod) => mod.ChildComponent),
            data: {
              dataParam: { layout: 'medium' },
            },
          }
      ],
      // 👇 Add this line to enable component input binding
      withComponentInputBinding(),
    ),
  ],
};

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Share this bit on