How can you work with cookies in Angular?

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');
}

What is the difference between double equals (==) and triple equals (===) ?

In JavaScript, double equal operator (==) stands for value compare. The operands on either sides are converted into a common type and are compared for their values.

// JS converts the right type to equivalent left type
// 5 == '5'
// 5 == number('5') == 5
// result is true
5 == '5' 

the triple operator (===) stands for both value and type compare. The operands are not type converted and instead are looked for their type match as well.

5 === '5' // result is false since we're comparing a number and a string

What are tree shakeable providers?

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.

What are Pure Pipes and Impure Pipes?

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
}

What are Async Pipes?

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;
});

What are Hot Observables and Cold Observables?

  • 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

What is the difference between a Component and a Directive?

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