Angular: Binding to custom properties

We can use property binding to bind to our own properties, properties of our components. By default all properties of components are available only inside these components. What to do if we want access some properties in another component ? We need to add decorator @Input.

So in other words, we have parent component and child component. We have array of objects defined in parent component and we want to display items of this array in child component in a loop.

app/server-element/server-element.component.ts

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

@Component({
	selector: 'app-server-element',
	templateUrl: './server-element.component.html'
})

export class ServerElementComponent implements OnInit {
	@Input() element: {type:string, name: string, content: string};

	constructor() {}

	ngOnInit() {

	}

}

app/server-element/server-element.component.html

 {{element.type}}
 

app/app.component.ts

import { Component } from '@angular/core';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html'
})

export class AppComponent {
	serverElements = [{type: 'server', name: 'Testserver', content: 'test'}];
}

app/app.component.html

<app-server-element 
	*ngFor="let serverElement of serverElements"
	[element]="serverElement"></app-server-element>

Binding to custom properties with alias

If we want to bind to different name, you can bind with an alias.

app/server-element/server-element.component.ts

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

app/app.component.html

<app-server-element 
	*ngFor="let serverElement of serverElements"
	[srvElement]="serverElement"></app-server-element>