Monday, November 19, 2018

Types of Angular Directives

Angular has 3 different types of directives
       1.       Component Directive 
       2.       Structural Directive &
       3.       Attribute Directive

What is an Angular Directive

Directives in angular are special notations which allows us to extend the behavior of DOM elements in the view template. For example the ngFor is a built-in Angular directives, the ngFor directive is used to repeat a set of HTML elements for a predefined number of times thereby creating a table/list structure in the view template.

Directives are not totally new to the Angular world, we had directives like ng-repeat in AngularJS which did the same thing as ngFor. Since Angular has evolved from AngularJS, the Directives structure and templates have also evolved with it since Angular 2+

Directives are classes declared using @Directive. Directives also have different life-cycle hooks which we can implement to alter the behavior of the Directives.

A new directive can be created using the following CLI command.

ng generate directive

Sunday, November 18, 2018

Angular Lifecycle Hooks

ngOnDestroy lifecycle hook

The ngOnDestroy lifecycle hook gets executed just before Angular destroys the directive/component. Use this event to unsubscribe Observables and detach event handlers to avoid memory leaks.  It is the perfect place to clean the component. Let us see on how to use this lifecycle hook with a simple example.

Similar to our ngOnOnit example, we have a service call using an observable to make a http ajax call to get data from a service, in this example we will use the ngOnDestroy hook to unsubscribe the observable and do a cleanup when the component in unloaded.

ngDoCheck lifecycle hook

The ngDoCheck lifecycle hook gets executed when Angular runs the change detection process. ngOnChanges also gets executed when changes are detected the difference is that ngOnChanges() detects changes for those properties which are passed by value. ngDoCheck() detects changes for those properties also which are passed by reference such as arrays. For performance reasons OnChanges does not fire when the input property is an array/object, in these cases we can use ngDoCheck to perform our own custom change detection.

Let us see how this works with a simple example. We will extend the example which we used for ngOnChanges, we will add one more @Input property to the child component, this time we will add an object instead of a string so that we can see that ngDoCheck gets triggered but not ngOnChanges when the object is changed.