What are the different lifecycle hooks available to Components in Angular?

The below are the lifecycle hooks available in Angular. These are added by implementing the respective interface on the component.

  1. ngOnChange - before OnInit and whenever Input property changes in value
  2. ngOnInit - called once the Input properties are set, used to fetch initial data
  3. ngDoCheck - detect and act upon any changes that are by default on detected
  4. ngAfterContentInit - after loading any external entity into the component, such as a directive
  5. ngAfterContentChecked - after the content loaded is checked
  6. ngAfterViewInit - after the view is initialized
  7. ngAfterViewChecked - after the view is checked
  8. ngOnDestroy - just before the component is destroyed

How can you use .NET framework class libraries in a .NET Core application?

  • Class libraries which are built against .NET framework can be referenced and used inside a .NET Core application starting from .NET Core 2.x by means of a Compatibility Shim that was included in the .NET Core 2.x
  • .NET Framework and .NET Core are based on different BCL (base class libraries). The code can be reused, but if the class libraries make use of any .NET Framework BCL specific references (such as Object types - which are different in .NET Core), the application might throw runtime exceptions.

Where is Session stored?

  • Session is stored on the server-side while the ID of the session resides on the client browser as a Session cookie.
  • In the server, the Sessions are managed by the module w3wp.exe

What is the difference between SingleOrDefault() and FirstOrDefault() methods?

  • Both SingleOrDefault() and FirstOrDefault() LINQ methods return default value of the passed collection data type when there are no matching elements found for the condition predicate.
  • Both methods return only one record from the collection that matches the predicate.
  • SingleOrDefault() expects the condition predicate to match only one record in the set - for example, a postUrl in a collection of BlogPost objects. If there are more than one objects that match the predicate, SingleOrDefault() method throws exception.
  • Whereas the FirstOrDefault() method returns the first object in the collection that matches the prerequisite and so no such exception is thrown.

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
}