Angular 9 : Bind to an @Input alias of custom properties

This tutorial guides you on how to bind to an @Input alias of custom properties. Let’s see how to assign alias to custom property and bind to that custom property using the assigned alias.

Angular 9 : Bind to an @Input alias of custom properties

First, let’s define custom property in our class as shown below. Later, we will see how to assign alias to a custom property.

export class ItemElementComponent implements OnInit {

  itemElem : {type: string, title: string, desc: string, spec: string};

  constructor() { }

  ngOnInit(): void {
  }

}

For example, “itemElem” is the custom property defined which is of type {type: string, title: string, desc: string, spec: string}. Note, this is the way we need to define type for a property if the property is object literal.

And, the type definition is not the value and it is TypeScript’s syntax for defining the type to make sure that item element object may have only this type.

But still the property “itemElem” is part of this component only i.e., ItemElementComponent. And we can’t access it from outside. Note, by default all the properties defined in the component will be accessible within that component only.

Generally the above restriction is good one way, so that you don’t have to make all properties bindable from outside. Therefore, you have to define explicitly in Angular Component which properties that you wanted to expose outside or bindable from outside.

If you wanted to allow the parent component to bind to this custom property defined in the child component (ItemElementComponent), you need to add a decorator called @Input decorator to that property as shown below.

@Input() itemElem : {type: string, title: string, desc: string, spec: string};

And make sure that “Input” is imported from “@angular/core“.

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

In the next section let’s see how to define Input alias and bind to an @Input alias.

How to bind to an @Input alias ?

First, you need to define an @Input alias or assign an alias to the input property. Sometimes, you don’t want let use the same property name (itemElem) outside the component to bind to that property.

For example, you can assign alias “itemElement” to the property name “itemElem” by adding an argument to the @Input decorator as shown below.

@Input('itemElement') itemElem : {type: string, title: string, desc: string, spec: string};

And now, to access this property from outside this component let’s say parent component, you need to target “itemElement” to bind to this property.

For example, to bind to an @Input alias of custom property you need to target the alias “itemElement” in the template as shown below.

<app-item-element *ngFor="let elem of itemElems"
                        [itemElement] = "elem"></app-item-element>

That’s it. You had learnt how to define custom properties, assign alias and how to bind to an @Input alias of custom property.

Hope it helped 🙂

Also See:

References:

Angular Docs