Angular : Assigning alias to custom properties

Introduction

here we are passing or binding properties from parent to the child component. but what if we wants to give some other name to property

Child component

• here we have given custom name as srvElement, so in the parent component we will use the same value to refer this property.

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

@Component({
  selector: 'app-server-element',
  templateUrl: './server-element.component.html',
  styleUrls: ['./server-element.component.css']
})
export class ServerElementComponent implements OnInit {

  @Input('srvElement') element:{
    type:string,
    name:string,
    content:string
  };
  constructor() { }

  ngOnInit(): void {
  }

}

Parent Component.

• here we can see we have bind to srvElement property but there is no such property in child component. but still working since alias is given int he child component.

<div class="container">
  <app-cockpit></app-cockpit>
  <hr>
  <div class="row">
    <div class="col-xs-12">
      <app-server-element *ngFor="let serverElement of serverElements" [srvElement]="serverElement">
      </app-server-element>
    </div>
  </div>
</div>