AngularJS Components


=For using two-way data binding. This means that if you update that variable in your component scope, the change will be reflected on the parent scope.
<One-way bindings when we just want to read a value from a parent scope and not update it.
@String parameters.
&For callbacks in case your component needs to output something to its parent scope.
LifeCycle HooksDetails (requires angular.version >= 1.5.3 )
$onInit()Called on each controller after all the controllers on an element have been constructed and had their bindings initialized. This is a good place to put initialization code for your controller.
$onChanges(changesObj)Called whenever one-way bindings are updated. The changesObj is a hash whose keys are the names of the bound properties that have changed, and the values are an object of the form { currentValue, previousValue, isFirstChange() } .
$onDestroy()Called on a controller when its containing scope is destroyed. Use this hook for releasing external resources, watches and event handlers.
$postLink()Called after this controller’s element and its children have been linked. This hook can be considered analogous to the ngAfterViewInit and ngAfterContentInit hooks in Angular 2.
$doCheck()Called on each turn of the digest cycle. Provides an opportunity to detect and act on changes. Any actions that you wish to take in response to the changes that you detect must be invoked from this hook; implementing this has no effect on when $onChanges is called.


Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure. Components were introduced in Angular 1.5, the examples in this section will not work with older AngularJS versions.

A complete developer guide about Components is avalable on