Angular - 5.5-Assigning an alias to custom properties

When a child component exposes an @Input() property, the parent template binds to it using the property name as declared in the class. That tight coupling becomes a problem the moment the property name is not the cleanest possible identifier from a public API point of view. Aliases let you decouple the two: the child keeps a descriptive internal name while the parent template binds to a friendlier, shorter alias.

The mechanism is straightforward. You pass a string to the @Input() decorator and that string becomes the name to use in the parent template's property binding. The original property name still drives every reference inside the child class. Aliases are also useful when you want to keep backward compatibility after renaming an internal property, or when a binding clashes with a reserved word or with another binding in the parent context.

// child component
@Input('srvElement') element: { type: string; name: string };

// parent template
<app-server-element [srvElement]="serverElement"></app-server-element>

Conceptually the alias is the public contract, while the property is the internal implementation detail. Renaming the property in the class does not break consumers as long as the alias stays stable. Inside the component you keep working with this.element, but every parent template addresses it as [srvElement]. In the next lesson we will apply the same idea to events emitted with @Output() and see how custom event bindings stay readable and stable.