22 Expert Angular Interview Questions and Answers in 2018
Tags: angular, career, interview, questions
Published: 2018-09-13 13:05:40

---
title: 22 Expert Angular Interview Questions and Answers in 2018
published: true
description: 22 Expert Angular Interview Questions and Answers to hire or mock your lead dev 
tags: angular, career, interview, questions
canonical_url: https://www.fullstack.cafe/blog/21-expert-angular-interview-questions
---
![22 Expert Angular Interview Questions and Answers in 2018](https://images.pexels.com/photos/70402/pexels-photo-70402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350)
The ultimate list of senior and expert level Angular Interview Questions. Use it to hire a new team member, test yourself, mock your lead dev or completely ignore. Questions sourced from [khan4019/angular-interview-questions](https://github.com/khan4019/angular-interview-questions) and answered on [FullStack.Cafe](https://www.fullstack.cafe).

> Originally published on [FullStack.Cafe - Never Fail Your Tech Interview Again](https://www.fullstack.cafe)

### Q1: What is difference between "declarations", "providers" and "import" in NgModule?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

*   `imports` makes the exported declarations of other modules available in the current module
*   `declarations` are to make directives (including components and pipes) from the current module available to other directives in the current module. Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported.
*   `providers` are to make services and values known to DI. They are added to the root scope and they are injected to other services or directives that have them as dependency.

A special case for `providers` are lazy loaded modules that get their own child injector. `providers` of a lazy loaded module are only provided to this lazy loaded module by default (not the whole application as it is with other modules).

🔗 **Source:** [medium.com](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)
### Q2: Explain the difference between "Constructor" and "ngOnInit"
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

* The `Constructor` is a default method of the class that is executed when the class is instantiated and ensures proper initialization of fields in the class and its subclasses.
* `ngOnInit` is a life cycle hook called by Angular to indicate that Angular is done creating the component. We have to import OnInit in order to use like this (actually implementing OnInit is not mandatory but considered good practice).

Mostly we use `ngOnInit` for all the initialization/declaration and avoid stuff to work in the constructor. The constructor should only be used to initialize class members but shouldn't do actual "work".

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit/35763811#35763811)
### Q3: What's new in Angular 6 and why shall we upgrade to it?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

* **Angular Elements** - Angular Elements is a project that lets you wrap your Angular components as Web Components and embed them in a non-Angular application. 
* **New Rendering Engine: Ivy** -  increases in speed and decreases in application size.
* **Tree-shakeable providers** - a new, recommended, way to register a provider, directly inside the @Injectable() decorator, using the new `providedIn` attribute
* **RxJS 6** - Angular 6 now uses RxJS 6 internally, and requires you to update your application also. RxJS released a library called rxjs-compat, that allows you to bump RxJS to version 6.0 even if you, or one of the libraries you’re using, is still using one of the “old” syntaxes.
* **ElementRef`<T>`** - in Angular 5.0 or older, is that the said ElementRef had its nativeElement property typed as any. In Angular 6.0, you can now type ElementRef more strictly. 
* **Animations** - The polyfill web-animations-js is not necessary anymore for animations in Angular 6.0, except if you are using the AnimationBuilder.
* **i18n** - possibility to have “runtime i18n”, without having to build the application once per locale. 


🔗 **Source:** [ninja-squad.com](https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/)
### Q4: What is AOT?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

The Angular Ahead-of-Time compiler pre-compiles application components and their templates during the build process.
Apps compiled with AOT launch faster for several reasons. 
* Application components execute immediately, without client-side compilation. 
* Templates are embedded as code within their components so there is no client-side request for template files. 
* You don't download the Angular compiler, which is pretty big on its own. 
* The compiler discards unused Angular directives that a tree-shaking tool can then exclude.

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/39488266/what-is-aotor-ahead-of-time-compilation-in-angular2?rq=1)
### Q5: Why would you use renderer methods instead of using native element methods?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

Angular is a platform, and the browser is just one option for where we can render our app. When we access the native element directly we are giving up on Angular’s DOM abstraction and miss out on the opportunity to be able to execute also in none-DOM environments such as: 
* native mobile, 
* native desktop, 
* web worker
* server side rendering.

The `Renderer2` class is an abstraction provided by Angular in the form of a service that allows to manipulate elements of your app without having to touch the DOM directly. This is the recommended approach because it then makes it easier to develop apps that can be rendered in environments that don’t have DOM access, like on the server, in a web worker or on native mobile.

🔗 **Source:** [alligator.io](https://alligator.io/angular/using-renderer2/)
### Q6: What is Zone in Angular?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

`NgZone` is a wrapper around `Zone.js` which is a library that creates a context around asynchronous functions in order to to make them trackable. Angular's change detection is heavily dependent on Zones.

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/45903493/zones-in-angular)
### Q7: Why would you use lazy loading modules in Angular app?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

To load a feature module lazily we need to load it using `loadChildren` property in route configuration and that feature module must not be imported in application module. Lazy loading is useful when the application size is growing. In lazy loading, feature module will be loaded on demand and hence application start will be faster. 

```js
const routes: Routes = [
  {
    path: 'customers',
    loadChildren: 'app/customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: 'app/orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];
```



🔗 **Source:** [concretepage.com](https://www.concretepage.com/angular-2/angular-module-loading-eager-lazy-and-preloading)
### Q8: What are the lifecycle hooks for components and directives?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

A component in Angular has a life-cycle, a number of different phases it goes through from birth to death. We can hook into those different phases to get some pretty fine grained control of our application.

* **constructor**
This is invoked when Angular creates a component or directive by calling new on the class.
* **ngOnChanges**
Invoked every time there is a change in one of th input properties of the component.
* **ngOnInit**
Invoked when given component has been initialized.
This hook is only called once after the first ngOnChanges
* ** ngDoCheck**
Invoked when the change detector of the given component is invoked. It allows us to implement our own change detection algorithm for the given component.
* **ngOnDestroy**
This method will be invoked just before Angular destroys the component.
Use this hook to unsubscribe observables and detach event handlers to avoid memory leaks.

These hooks are only called for components and not directives.
* **ngAfterContentInit**
Invoked after Angular performs any content projection into the components view (see the previous lecture on Content Projection for more info).
* **ngAfterContentChecked**
Invoked each time the content of the given component has been checked by the change detection mechanism of Angular.
* **ngAfterViewInit**
Invoked when the component’s view has been fully initialized.
* **ngAfterViewChecked**
Invoked each time the view of the given component has been checked by the change detection mechanism of Angular.
<div class="text-center">
<img src="https://codecraft.tv/assets/images/courses/angular/4.components/lifecycle-hooks.png" class="img-fluid" style="max-width: 300px;"/>
</div>

🔗 **Source:** [codecraft.tv](https://codecraft.tv/courses/angular/components/lifecycle-hooks/)
### Q9: How would you insert an embedded view from a prepared TemplateRef?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

You can create an embedded view using `createEmbeddedView` method then attach that view to the DOM via `TemplateRef`:

```js
@Component({
    selector: 'app-root',
    template: `
        <ng-template #template let-name='fromContext'><div>{{name}}</ng-template>
    `
})
export class AppComponent implements AfterViewChecked {
    @ViewChild('template', { read: TemplateRef }) _template: TemplateRef<any>;
    constructor() { }

    ngAfterViewChecked() {
        this.vc.createEmbeddedView(this._template, {fromContext: 'John'});
    }
}
```

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/40423772/what-is-the-difference-between-a-view-a-host-view-and-an-embedded-view)
### Q10: How to detect a route change in Angular?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

In Angular you can `subscribe` (Rx event) to a Router instance. So you can do things like:

```js
class MyClass {
    constructor(private router: Router) {
        router.subscribe((val) => /*whatever*/ )
    }
}
```

🔗 **Source:** [medium.com](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)
### Q11: What does a just-in-time (JIT) compiler do (in general)?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

A JIT compiler runs **after** the program has started and compiles the code (usually bytecode or some kind of VM instructions) on the fly (or just-in-time, as it's called) into a form that's usually faster, typically the host CPU's native instruction set. A JIT has access to dynamic runtime information whereas a standard compiler doesn't and can make better optimizations like inlining functions that are used frequently.

This is in contrast to a traditional compiler that compiles **all** the code to machine language **before** the program is first run.

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/95635/what-does-a-just-in-time-jit-compiler-do)
### Q12: How do you create application to use scss? What changed for Angular 6?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

This is how the style config in the CLI v1.x looks like in .angular-cli.json file.

```js
"defaults": {
  "styleExt": "scss",
  "component": {}
}
```

But if you take a look into a config schema of angular.json file in version 6, you will no longer find this config anymore. To use SCSS, simply import you scss files (the default value is ‘src/styles.scss’) in your project level in an angular.json file like this.

```js
{
  ...
  projects: {
    [your_project_name]: {
      ...
      architect: {
        build: {
          ...
          options: {
            styles:{
              "src/styles.scss"
            }
          }
        }
      }
    }
  }
}
```

🔗 **Source:** [medium.com](https://medium.com/@vissanu_s/quick-tip-how-to-use-scss-in-angular-cli-6-63d263b3481c)
### Q13: What is ngUpgrage? 
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

**NgUpgrade** is a library put together by the Angular team, which we can use in our applications to mix and match AngularJS and Angular components and bridge the AngularJS and Angular dependency injection systems.

🔗 **Source:** [blog.nrwl.io](https://blog.nrwl.io/ngupgrade-in-depth-436a52298a00)
### Q14: What is Reactive programming and how does it relate to Angular?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

Reactive programming is programming with asynchronous data streams. RxJs stands for Reactive Extensions for Javascript, and it's an implementation of Observables for Javascript. An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each event. Angular currently uses RxJs Observables in two different ways:

* as an internal implementation mechanism, to implement some of its core logic like `EventEmitter`
* as part of its public API, namely in `Forms` and the `HTTP module`

You do not need to know Reactive Programming or RxJS in order to build even the most complex applications with Angular. It can however make some types of applications easier to architect.

🔗 **Source:** [github.com/WebPredict](https://github.com/WebPredict/angular-2-interview-questions)
### Q15: Name some security best practices in Angular
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

1. To systematically block XSS bugs, Angular treats all values as untrusted by default (sanitation)
2. Angular templates are the same as executable code: HTML, attributes, and binding expressions (but not the values bound) in templates are trusted to be safe. To prevent these vulnerabilities, use the offline template compiler, also known as template injection.
3. Avoid interacting with the DOM directly and instead use Angular templates where possible.
4. Injecting template code into an Angular application is the same as injecting executable code into the application. So, validate all data on server-side code and escape appropriately to prevent XSS vulnerabilities on the server. 
5. Angular HttpClient provides built-in support to prevent XSRF attacks on the client side.
6. Servers can prevent the XSSI attack by prefixing all JSON responses to make them non-executable, by convention, using the well-known string `")]}',\n"`. Angular’s `HttpClient` library recognizes this convention and automatically strips the string `")]}',\n"` from all responses before further parsing.

🔗 **Source:** [ordina-jworks.github.io](https://ordina-jworks.github.io/angular/2018/03/30/angular-security-best-practices.html)
### Q16: Could I use jQuery with Angular?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

First install jQuery using npm as follows

```sh
npm install jquery — save
```
Second go to the `./angular-cli.json` file at the root of your Angular CLI project folder, and find the `scripts: [] property`, and include the path to jQuery as follows

```sh
“scripts”: [ “../node_modules/jquery/dist/jquery.min.js” ]
```

Now to use jQuery anywhere in your application, all you have to do is to import it as follows in `app.component.ts` file.

```js
import * as $ from ‘jquery’;
```
Consider:

```js
import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
    $(document).ready(function(){
        $("button").click(function(){
            var div = $("div");  
            div.animate({left: '100px'}, "slow");
            div.animate({fontSize: '5em'}, "slow");
        });
    });
  }
}
```

🔗 **Source:** [medium.com](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)
### Q17: What is the Angular equivalent to an AngularJS "$watch"?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐⭐

The solution is the `set` syntax from ES6. The `set` syntax binds an object property to a function to be called when there is an attempt to set that property.

```js
import { Component, Input } from '@angular/core';
@Component({
  selector: 'example-component',
})
export class ExampleComponent {
  public internalVal = null;
  constructor() {}
  
  @Input('externalVal')
  set updateInternalVal(externalVal) {
    this.internalVal = externalVal;
  }
}
```

🔗 **Source:** [medium.com](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)
### Q18: Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation. Explain the difference.
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐⭐

**JIT** - Compile TypeScript just in time for executing it:
 - Compiled in the browser. 
 - Each file compiled separately.
 - No need to build after changing your code and before reloading the browser page.
 - Suitable for local development.

**AOT** - Compile TypeScript during build phase:
 - Compiled by the machine itself, via the command line (Faster).
 - All code compiled together, inlining HTML/CSS in the scripts.
 - No need to deploy the compiler (Half of Angular size).
 - More secure, original source not disclosed.
 - Suitable for production builds.

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/95635/what-does-a-just-in-time-jit-compiler-do)
### Q19: Do you know how you can run angularJS and angular side by side?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐⭐

In order to run both frameworks side-by-side and make components interoperable, the Angular projects comes with a module **ngUpgrade**. The module basically acts as an adapter facade, so we don’t really feel that there are two frameworks running side-by-side.

For this to work, four things need to interoperate:

* Dependency Injection - Exposing Angular services into Angular 1.x components and vice-versa.
* Component Nesting - Angular 1 directives can be used in Angular 2.x components and Angular 2.x components can used Angular 1 directives
* Content Projection / Transclusion - Angular 1 components transclude Angular 2.x components and Angular 2.x component project Angular 1 directives
* Change Detection - Angular 1 scope digest and change detectors in Angular >= 2.x are interleaved

Here’s what a typical upgrade process would look like:

* Include Angular and upgrade module
* Pick component to upgrade and change its controller and template Angular 2.x syntax (this is now an Angular 2.x component)
* Downgrade Angular 2.x component to make it run in Angular 1.x app
* Pick a service to upgrade, this usually requires little amount of change (especially if we’re on ES2015)
* Repeat step 2 and 3 (and 4)
* Replace Angular 1 bootstrap with Angular 2.x bootstrap

🔗 **Source:** [blog.thoughtram.io](https://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html)
### Q20: Could you provide some particular examples of using ngZone?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐⭐

There would be a lot of cases when you want to use `NgZone`, I can name two :
1. When you want something to run outside of Angular's change detection.
Lets say we want to do some calculation when user is scrolling and don't want you to run change detection, in this case, you'd use NgZone:

```js
constructor(private zone:NgZone){
   this.zone.runOutsideOfAngular(()=>{
      window.onscroll = ()=>{
       // do some heavy calculation : 
      }
    })
  }
```

2. The exact opposite of above, where you have a function that is somehow outside of Angular's zone and you want it to be inside, like when a third party library is doing some stuff for you and you want it to be bound to your Angular cycle.

```js
this.zone.run(()=>{
    $.get('someUrl').then(()=>{
        this.myViewVariable = "updated";
    })
});
```

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/45903493/zones-in-angular)
### Q21: Why angular uses url segment?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐⭐

A **UrlSegment** is a part of a URL between the two slashes. It contains a path and the _matrix parameters_ associated with the segment.

Matrix parameters are tied to a path segment, while query parameters are tied to the URL. They have different semantics. 

Consider:
```sh
localhost:3000/heroes;id=15;foo=foo/bar/baz
// instead of localhost:3000/heroes/bar/baz?id=15&foo=foo
```

The parameters are _tied to heroes_ no to the URL. When you access the route.url, you will see this

```js
this.route.url.subscribe((url: UrlSegment[]) => {
  let heroes = url[0];
  let heroesMatrix = heroes.parameters();
  // heroes should contain id=15, foo=foo
  let bar = url[1].path; // 15
  let baz = url[2].path; //foo
})
```
For matrix parameters you can also subscribe to params instead of peeling them out of url.
```js
this.paramSubscription = this.activeRoute.params.subscribe(params => {
  const bar = params['bar'];
  const baz = params['baz'];
});
```
With an Angular app, the only people who really care about these parameters are us the developer. The user doesn't care. It is not a REST API where we should stick to well known semantics. For out Angular app, as long as we the developer know how to use params (whether matrix or query), it shouldn't matter which one we use.



🔗 **Source:** [https://stackoverflow.com](https://stackoverflow.com/questions/40171262/angular2-with-matrix-url-notation)
### Q22: When to use query parameters versus matrix parameters?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐⭐

* Query parameters: http://example.com/apples?order=random&color=blue
* Matrix parameters: http://example.com/apples;order=random;color=blue

---
The differences between Matrix parameters and Query Parameters are much more than just convention.

The main differences are:

* urls with query params won't have their response cached by intermediaries/proxies (at present)
* matrix parameters may appear anywhere in path
* calculating the relative uri is different
* query params are generally abused to add new verbs instead of using existing methods on resources
* matrix parameters are not resources, they are aspects that help reference a resource in an information space that is difficult to represent within a hierarchy

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/401981/when-to-use-query-parameters-versus-matrix-parameters)

> *Thanks 🙌 for reading and good luck on your interview!* <br/>*Check more FullStack Interview Questions & Answers on 👉 [www.fullstack.cafe](https://www.fullstack.cafe)*