To work with Cookies, we can make use of the CookieService which is a part of the ngx-cookie-service module.

• Install: npm install --save ngx-cookie-service
• Include:

import { CookieService } from 'ngx-cookie-service';
@NgModule({
  providers: [ CookieService ],
})
export class AppModule { }

• Use:

constructor( private cookieService: CookieService ) { 
  this.cookieService.set( 'MyCookieKey', 'Hello There!' );
  this.cookieValue = this.cookieService.get('Test');
}

When we register providers in @NgModule(), angular internally includes all those related classes in the final bundle, irrespective of their actual use in the application. To overcome this, it is recommended to use @Injectable() decorator when creating a service as below:

@Injectable({
  providedIn: 'root'
})
export class MyShakeableService {
  // some logic
}

This enables the Angular to inspect which services are actually being used in the application and 'exclude' unused service classes from the final bundle - there by reducing the bundle size. These kind of providers are called as 'tree shakeable'. This was introduced in Angular 6.

Pipes by default are "Pure" - they can't detect changes when a value of the primitive type or the reference of the complex type changes. Example: when an array gets a new value inserted but the Pipe applied on that array during view binding can't detect its change.

To Solve this, we can mark the pipe as "Impure" - which forces the Pipe to detect change and update the view each time the dataset changes.

<span>{{ myData | doPipe }}</span>

@Pipe({name:'doPipe', pure: false})
export class DoPipe implements PipeTransform {
  /// pipe code
}

Async Pipes help transforming data coming from an Observable and resolve into desired dataset. It also takes care of the Subscription and Unsubscription of the Observable.

this.http.get(url).pipe((map((res) => {
    // some handling of the response here
    return res;
});

• Cold Observables are observables where data is produced inside the Observable. It can be treated as a unicast.

const obs$ = new Obserable((observer) => {
    observer.next(Math.random());
});
obs$.subscribe((data) => console.log(data)); // prints different value
obs$.subscribe((data) => console.log(data)); // prints different value

• Hot Observables are observables where data is produced outside the Observable. It can be treated as a multicast.

const data = 5;
const obs$ = new Obserable((observer) => {
    observer.next(data);
});
obs$.subscribe((data) => console.log(data)); // prints 5
obs$.subscribe((data) => console.log(data)); // prints 5

Directive:

• Directives help in modifying the behavior of an existing DOM element or adding new behavior to the DOM.
• Directives are created by using the @Directive() decorator, and can be structural (which modify the DOM structure - ngIf, ngFor or ngSwitchCase) or behavioral (add new behavior to the existing DOM elements - ngStyle, ngClass or ngModel)
• Directives don't possess their own View

Component:

• Components are considered as a special branch of directives which can control a small portion of the View
• Components are associated with an encapsulated View Template, Style and the View Logic (class) parts
• These are created by using the @Component() decorator