Target selection for binding

The target specified in [] is not limited to a component/element property. While the property name is a common target, the Angular templating engine actually does heuristics to decide the target type. Angular first searches the registered known directives (attribute or structural) that have matching selectors before looking for a property that matches the target expression. Consider this view fragment:

<div [ngStyle]='expression'></div> 

The search for a target starts with a framework looking at all internal and custom directives with a matching selector (ngStyle). Since Angular already has an NgStyle directive, it becomes the target (the directive class name is NgStyle, whereas the selector is ngStyle). If Angular did not have a built-in NgStyle directive, the binding engine would have looked for a property called ngStyle on the underlying component.

If nothing matches the target expression, an unknown directive error is thrown.

That completes our discussion on target selection. The next section is about attribute binding.