Thursday, November 4, 2021

Angular Interview Question

 

Q. 1   What is TypeScript?

TypeScript is a typed superset of JavaScript created by Microsoft that adds optional types, classes, async/await, and many other features, and compiles to plain JavaScript. Angular built entirely in TypeScript and used as a primary language. You can install it globally as



Q 2 What are directives?

Directives add behaviour to an existing DOM element or an existing component instance.

import { Directive, ElementRef, Input } from '@angular/core';


@Directive({ selector: '[myHighlight]' })

export class HighlightDirective {

    constructor(el: ElementRef) {

       el.nativeElement.style.backgroundColor = 'yellow';

    }

}

Now this directive extends HTML element behavior with a yellow background as below

<p myHighlight>Highlight me!</p

Q 3 What are lifecycle hooks available?

Angular application goes through an entire set of processes or has a lifecycle right from its initiation to the end of the application. The representation of lifecycle in pictorial representation as follows,

ScreenShot

The description of each lifecycle method is as below,

  1. ngOnChanges: When the value of a data bound property changes, then this method is called.

  2. ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.

  3. ngDoCheck: This is for the detection and to act on changes that Angular can't or won't detect on its own.

  4. ngAfterContentInit: This is called in response after Angular projects external content into the component's view.

  5. ngAfterContentChecked: This is called in response after Angular checks the content projected into the component.

  6. ngAfterViewInit: This is called in response after Angular initializes the component's views and child views.

  7. ngAfterViewChecked: This is called in response after Angular checks the component's views and child views.

  8. ngOnDestroy: This is the cleanup phase just before Angular destroys the directive/component.

 

Q 4. What is the difference between constructor and ngOnInit?

TypeScript classes has a default method called constructor which is normally used for the initialization purpose. Whereas ngOnInit method is specific to Angular, especially used to define Angular bindings. Even though constructor getting called first, it is preferred to move all of your Angular bindings to ngOnInit method. In order to use ngOnInit, you need to implement OnInit interface as below,

export class App implements OnInit{

  constructor(){

     //called first time before the ngOnInit()

  }

 

  ngOnInit(){

     //called after the constructor and called  after the first ngOnChanges()

  }

}

 

 

Q 5 What is a service?

A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components.

Let's create a repoService which can be used across components,

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';


@Injectable({ // The Injectable decorator is required for dependency injection to work

  // providedIn option registers the service with a specific NgModule

  providedIn: 'root',  // This declares the service with the root app (AppModule)

})

export class RepoService{

  constructor(private http: Http){

  }


  fetchAll(){

    return this.http.get('https://api.github.com/repositories');

  }

}

The above service uses Http service as a dependency.


Q  6  What are observables?

Observables are declarative which provide support for passing messages between publishers and subscribers in your application. They are mainly used for event handling, asynchronous programming, and handling multiple values. In this case, you define a function for publishing values, but it is not executed until a consumer subscribes to it. The subscribed consumer then receives notifications until the function completes, or until they unsubscribe.


Q 7  What is the difference between promise and observable?

Below are the list of differences between promise and observable,

Observable

Promise

Declarative: Computation does not start until subscription so that they can be run whenever you need the result

Execute immediately on creation

Provide multiple values over time

Provide only one

Subscribe method is used for error handling which makes centralized and predictable error handling

Push errors to the child promises

Provides chaining and subscription to handle complex applications

Uses only .then() clause


Q 8  What are the various kinds of directives?

There are mainly three kinds of directives,

  1. Components — These are directives with a template.

  2. Structural directives — These directives change the DOM layout by adding and removing DOM elements.

  3. Attribute directives — These directives change the appearance or behavior of an element, component, or another directive.

 

Q 9 What are different types of compilation in Angular?

Angular offers two ways to compile your application,

  1. Just-in-Time (JIT)

  2. Ahead-of-Time (AOT)

 

 

Q10 What is Angular Ivy?

Angular Ivy is a new rendering engine for Angular. You can choose to opt in a preview version of Ivy from Angular version 8.

Q11 what are the applications of HTTP interceptors?

Http Interceptors are part of @angular/common/http, which inspect and transform HTTP requests from your application to the server and vice-versa on HTTP responses. These interceptors can perform a variety of implicit tasks, from authentication to logging.

The HTTP Interceptors can be used for different variety of tasks,

  1. Authentication

  2. Logging

  3. Caching

  4. Fake backend

  5. URL transformation

  6. Modifying headers

providers: [

  { provide: HTTP_INTERCEPTORS, useClass: MyFirstInterceptor, multi: true },

  { provide: HTTP_INTERCEPTORS, useClass: MySecondInterceptor, multi: true }

],

 

Q 12   how to pass data one component to another component

 

Angular provides us @Input decorator by using that we can pass data from parent component to child component.

 

 

Q 13 What is Main Features ES6 and ES5

 

ES 6 Features

New Features in ES6

  1. The let keyword

  2. The const keyword

  3. JavaScript Arrow Functions

  4. JavaScript For/of

  5. JavaScript Classes

  6. JavaScript Promises

  7. JavaScript Symbol

  8. Default Parameters

  9. Function Rest Parameter

  10. Array.find()

  11. Array.findIndex()

  12. New Math Methods

  13. New Number Properties

  14. New Number Methods

  15. New Global Methods

  16. JavaScript Modules

 

ES5 Features

  1. "use strict"

  2. String.trim()

  3. Array.isArray()

  4. Array.forEach()

  5. Array.map()

  6. Array.filter()

  7. Array.reduce()

  8. Array.reduceRight()

  9. Array.every()

  10. Array.some()

  11. Array.indexOf()

  12. Array.lastIndexOf()

  13. JSON.parse()

  14. JSON.stringify()

  15. Date.now()

  16. Property Getters and Setters

  17. New Object Property Methods

 

 

Q 14  What is diffefferent Between  == and === ?


== in JavaScript is used for comparing two variables, but it ignores the datatype of variable.


=== is used for comparing two variables, but this operator also checks datatype and compares two values.


Q 15  What is Box Model ?


The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Explanation of the different parts:

  1. Margin - Clears an area outside the border. The margin is transparent

  2. Border - A border that goes around the padding and content

  3. Padding - Clears an area around the content. The padding is transparent

  4. Content - The content of the box, where text and images appear

The box model allows us to add a border around elements, and to define space between elements. 


No comments:

Post a Comment

How to build an Express and Node.js app with Typescript

  In this tutorial, you will learn how to set up a Node.js and Express project with Typescript and live auto-reloading. Note that this metho...