Google has finally released the Angular 7 on 18th October 2018. Angular 7 now supports Typescript 3.1, RxJS 6.3 and Node 10. Let's brush up your Angular knowledge and learn some latest Q&As you could encounter on your next Angular Interview.

Originally published on FullStack.Cafe - Never Fail Your Tech Interview Again

Q1: What are pipes? Give me an example.

Topic: Angular
Difficulty: ⭐

A pipe takes in data as input and transforms it to a desired output. You can chain pipes together in potentially useful combinations. You can write your own custom pipes. Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe.

Consider:

<p>The hero's birthday is {{ birthday | date }}</p>

In this page, you'll use pipes to transform a component's birthday property into a human-friendly date.

🔗 Source: angular.io

Q2: What is the minimum definition of a component?

Topic: Angular
Difficulty: ⭐⭐

The absolute minimal configuration for a @Component in Angular is a template. Both template properties are set to optional because you have to define either template or templateUrl.

When you don't define them, you will get an exception like this:

No template specified for component 'ComponentName'

A selector property is not required, as you can also use your components in a route.

🔗 Source: stackoverflow.com

Q3: What's the difference between an Angular component and module?

Topic: Angular
Difficulty: ⭐⭐

Components control views (html). They also communicate with other components and services to bring functionality to your app.

Modules consist of one or more components. They do not control any html. Your modules declare which components can be used by components belonging to other modules, which classes will be injected by the dependency injector and which component gets bootstrapped. Modules allow you to manage your components to bring modularity to your app.

🔗 Source: stackoverflow.com

Q4: How can I select an element in a component template?

Topic: Angular
Difficulty: ⭐⭐

You can get a handle to the DOM element via ElementRef by injecting it into your component's constructor:

constructor(myElement: ElementRef) { ... }

🔗 Source: medium.com

Q5: What is an observer?

Topic: Angular
Difficulty: ⭐⭐

Observer is an interface for a consumer of push-based notifications delivered by an Observable. It has below structure,

    interface Observer<T> {
      closed?: boolean;
      next: (value: T) => void;
      error: (err: any) => void;
      complete: () => void;
    }

A handler that implements the Observer interface for receiving observable notifications will be passed as a parameter for observable as below,

    myObservable.subscribe(myObserver);

Note: If you don't supply a handler for a notification type, the observer ignores notifications of that type.

🔗 Source: github.com/sudheerj

Q6: What is an observable?

Topic: Angular
Difficulty: ⭐⭐

An Observable is a unique Object similar to a Promise that can help manage async code. Observables are not part of the JavaScript language so we need to rely on a popular Observable library called RxJS.
The observables are created using new keyword. Let see the simple example of observable,

    import { Observable } from 'rxjs';

    const observable = new Observable(observer => {
      setTimeout(() => {
        observer.next('Hello from a Observable!');
      }, 2000);
    });`

🔗 Source: github.com/sudheerj

Q7: What is TestBed?

Topic: Angular
Difficulty: ⭐⭐⭐

The Angular Test Bed (ATB) is a higher level Angular Only testing framework that allows us to easily test behaviours that depend on the Angular Framework.

We still write our tests in Jasmine and run using Karma but we now have a slightly easier way to create components, handle injection, test asynchronous behaviour and interact with our application.

The TestBed creates a dynamically-constructed Angular test module that emulates an Angular @NgModule.

🔗 Source: angular.io

Q8: What is Redux and how does it relate to an Angular app?

Topic: Angular
Difficulty: ⭐⭐⭐

Redux is a way to manage application state and improve maintainability of asynchronicity in your application by providing a single source of truth for the application state, and a unidirectional flow of data change in the application. ngrx/store is one implementation of Redux principles.

🔗 Source: github.com/WebPredict

Q9: What are the Core Dependencies of Angular 7?

Topic: Angular
Difficulty: ⭐⭐⭐

There are two types of core dependencies, RxJS and TypeScript.

• RxJS 6.3 - RxJS version 6.3 is used by Angular 7. It has no changes in the version from Angular 6

• TypeScript 3.1 - TypeScript version 3.1 is used by Angular 7. It is the upgrade from the version 2.9 of Angular 6.

🔗 Source: onlineinterviewquestions.com

Q10: Why Incremental DOM Has Low Memory Footprint?

Topic: Angular
Difficulty: ⭐⭐⭐

Virtual DOM creates a whole tree from scratch every time you rerender.

Incremental DOM, on the other hand, doesn’t need any memory to rerender the view if it doesn’t change the DOM. We only have to allocate the memory when the DOM nodes are added or removed. And the size of the allocation is proportional to the size of the DOM change.

🔗 Source: blog.nrwl.io

Q11: What are the ways to control AOT compilation?

Topic: Angular
Difficulty: ⭐⭐⭐

You can control your app compilation in two ways

1. By providing template compiler options in the tsconfig.json file
2. By configuring Angular metadata with decorators

🔗 Source: github.com/sudheerj

Q12: What is activated route?

Topic: Angular
Difficulty: ⭐⭐⭐

ActivatedRoute contains the information about a route associated with a component loaded in an outlet. It can also be used to traverse the router state tree. The ActivatedRoute will be injected as a router service to access the information. In the below example, you can access route path and parameters,

@Component({
    ...
 })
class MyComponent {
    constructor(route: ActivatedRoute) {
        const id: Observable < string > = route.params.pipe(map(p => p.id));
        const url: Observable < string > = route.url.pipe(map(segments => segments.join('')));
        // route.data includes both `data` and `resolve`
        const user = route.data.pipe(map(d => d.user));
    }
}

🔗 Source: github.com/sudheerj

Q13: What is router outlet?

Topic: Angular
Difficulty: ⭐⭐⭐

The RouterOutlet is a directive from the router library and it acts as a placeholder that marks the spot in the template where the router should display the components for that outlet. Router outlet is used as a component,

    <router-outlet></router-outlet>
    <!-- Routed components go here -->

🔗 Source: github.com/sudheerj

Q14: What are the utility functions provided by RxJS?

Topic: Angular
Difficulty: ⭐⭐⭐

The RxJS library also provides below utility functions for creating and working with observables.

1. Converting existing code for async operations into observables
2. Iterating through the values in a stream
3. Mapping values to different types
4. Filtering streams
5. Composing multiple streams

🔗 Source: github.com/sudheerj

Q15: What is multicasting?

Topic: Angular
Difficulty: ⭐⭐⭐

Multi-casting is the practice of broadcasting to a list of multiple subscribers in a single execution. Let's demonstrate the multi-casting feature,

    var source = Rx.Observable.from([1, 2, 3]);
    var subject = new Rx.Subject();
    var multicasted = source.multicast(subject);

    // These are, under the hood, `subject.subscribe({...})`:
    multicasted.subscribe({
      next: (v) => console.log('observerA: ' + v)
    });
    multicasted.subscribe({
      next: (v) => console.log('observerB: ' + v)
    });

    // This is, under the hood, `s

🔗 Source: github.com/sudheerj

Q16: What is subscribing?

Topic: Angular
Difficulty: ⭐⭐⭐

An Observable instance begins publishing values only when someone subscribes to it. So you need to subscribe by calling the subscribe() method of the instance, passing an observer object to receive the notifications.

Let's take an example of creating and subscribing to a simple observable, with an observer that logs the received message to the console.

    Creates an observable sequence of 5 integers, starting from 1
    const source = range(1, 5);

    // Create observer object
    const myObserver = {
      next: x => console.log('Observer got a next value: ' + x),
      error: err => console.error('Observer got an error: ' + err),
      complete: () => console.log('Observer got a complete notification'),
    };

    // Execute with the observer object and Prints out each item
    myObservable.subscribe(myObserver);
    // => Observer got a next value: 1
    // => Observer got a next value: 2
    // => Observer got a next value: 3
    // => Observer got a next value: 4
    // => Observer got a next value: 5
    // => Observer got a complete notification

🔗 Source: github.com/sudheerj

Q17: How to set headers for every request in Angular?

Topic: Angular
Difficulty: ⭐⭐⭐⭐

You could provide a service that wraps the original Http object from Angular.

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';

@Injectable() export class HttpClient {
    constructor(private http: Http) {}

    createAuthorizationHeader(headers: Headers) {
        headers.append('Authorization', 'Basic ' + btoa('username:password'));
    }

    get(url) {
        let headers = new Headers();
        this.createAuthorizationHeader(headers);
        return this.http.get(url, {
            headers: headers
        });
    }

    post(url, data) {
        let headers = new Headers();
        this.createAuthorizationHeader(headers);
        return this.http.post(url, data, {
            headers: headers
        });
    }
}

And instead of injecting the Http object you could inject this one (HttpClient).

import { HttpClient } from './http-client';

🔗 Source: medium.com

Q18: Why would you use renderer methods instead of using native element methods?

Topic: Angular
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

Q19: What is Zone in Angular?

Topic: Angular
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

Q20: What does a just-in-time (JIT) compiler do (in general)?

Topic: Angular
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

Q21: What is ngUpgrage?

Topic: Angular
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

Q22: Why would you use lazy loading modules in Angular app?

Topic: Angular
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.

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

Q23: What is Ivy Renderer? Is it supported by Angular 7?

Topic: Angular
Difficulty: ⭐⭐⭐⭐

The purpose of Angular view engine is to translate the templates and components that we have written into the regular HTML and JavaScript so it is easy for the browser to read it comfortably. Ivy is the next generation of Angular Renderer. It is third in line after the original compiler (for Angular 2) and Renderer2 (for Angular 4 and above).

Angular Ivy is a new Angular renderer, which is radically different from anything we have seen in mainstream frameworks, because it uses incremental DOM. No, it is not yet released.

🔗 Source: onlineinterviewquestions.com

Q24: What is incremental DOM? How is it different from virtual DOM?

Topic: Angular
Difficulty: ⭐⭐⭐⭐

Incremental DOM is used internally at Google, and it is defined by this key idea:

Every component gets compiled into a series of instructions. These instructions create DOM trees and update them in-place when the data changes.

React was the first mainstream framework to use** virtual DOM**, which is defined by this key idea:

Every component creates a new virtual DOM tree every time it gets rerendered. React compares the new virtual DOM tree with the old one and then applies a series of transformations to the browser DOM to match the new virtual DOM tree.

🔗 Source: blog.nrwl.io

Q25: What are the advantages with AOT?

Topic: Angular
Difficulty: ⭐⭐⭐⭐

Below are the list of AOT benefits,

1. Faster rendering: The browser downloads a pre-compiled version of the application. So it can render the application immediately without compiling the app.
2. Fewer asynchronous requests: It inlines external HTML templates and CSS style sheets within the application javascript which eliminates separate ajax requests.
3. Smaller Angular framework download size: Doesn't require downloading the Angular compiler. Hence it dramatically reduces the application payload.
4. Detect template errors earlier: Detects and reports template binding errors during the build step itself
5. Better security: It compiles HTML templates and components into JavaScript. So there won't be any injection attacks.

🔗 Source: github.com/sudheerj

Q26: Do I need to bootstrap custom elements?

Topic: Angular
Difficulty: ⭐⭐⭐⭐

No, custom elements bootstrap (or start) automatically when they are added to the DOM, and are automatically destroyed when removed from the DOM. Once a custom element is added to the DOM for any page, it looks and behaves like any other HTML element, and does not require any special knowledge of Angular.

🔗 Source: github.com/sudheerj

Q27: What is the difference between pure and impure pipe?

Topic: Angular
Difficulty: ⭐⭐⭐⭐

• A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe. For example, any changes to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).
• An impure pipe is called for every change detection cycle no matter whether the value or parameters changes. i.e, An impure pipe is called often, as often as every keystroke or mouse-move.

🔗 Source: github.com/sudheerj

Q28: What is the difference between BehaviorSubject vs Observable?

Topic: Angular
Difficulty: ⭐⭐⭐⭐⭐

BehaviorSubject is a type of subject, a subject is a special type of observable so you can subscribe to messages like any other observable. The unique features of BehaviorSubject are:

• It needs an initial value as it must always return a value on subscription even if it hasn’t received a next()
• Upon subscription it returns the last value of the subject. A regular observable only triggers when it receives an onnext
• at any point you can retrieve the last value of the subject in a non-observable code using the getValue() method.

Unique features of a subject compared to an observable are:

• It is an observer in addition to being an observable so you can also send values to a subject in addition to subscribing to it.

In addition you can get an observable from behavior subject using the asobservable() method on BehaviorSubject.

In Angular services, I would use BehaviorSubject for a data service as a angular service often initializes before component and behavior subject ensures that the component consuming the service receives the last updated data even if there are no new updates since the component’s subscription to this data.

🔗 Source: medium.com

Q29: What is the Angular equivalent to an AngularJS "$watch"?

Topic: Angular
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.

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

Q30: Name some differences between SystemJS vs WebPack?

Topic: Angular
Difficulty: ⭐⭐⭐⭐⭐

SystemJS:

• SystemJS is known to be quirky with dependencies that it uses for its own polyfill
• Importing libraries/modules from npm is not as simple as it is using WebPack
• As you add dependencies and the code starts to grow, a fatal flaw of JSPM( systemjs) is revealed. It becomes extremely sluggish. A single refresh can take about 15-20 seconds as the browser will load 100s of different JavaScript files
• Gulp is still required for:
  • Minification
  • Envification (envify)
  • Generating unique hashname for bundle file

WebPack:

• Changes are now shown in milliseconds; Webpack’s dev server is designed for speed. Not only does it support incremental builds, it serves directly from memory
• You can easily import libraries from npm (e.g. Bootstrap or Foundation) without worrying about their exact path within node_modules
• No need of gulp. Webpack itself takes care of doing all the tasks that require Gulp in SystemJS
• It appears that Webpack was designed from the ground-up for large applications and it shows in the development process

🔗 Source: vteams.com

Q31: Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation. Explain the difference.

Topic: Angular
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

Q32: Why angular uses url segment?

Topic: Angular
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:

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

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.

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

Q33: Why did the Google team go with incremental DOM instead of virtual DOM?

Topic: Angular
Difficulty: ⭐⭐⭐⭐⭐

They have one goal in mind: applications have to perform well on mobile devices. This mainly meant optimizing two things: the bundle size and the memory footprint.

To achieve the two goals:

• The rendering engine itself has to be tree shakable
• The rendering engine has to have low memory footprint

🔗 Source: blog.nrwl.io

Q34: Why Incremental DOM is Tree Shakable?

Topic: Angular
Difficulty: ⭐⭐⭐⭐⭐

When using incremental DOM, the framework does not interpret the component. Instead, the component references instructions. If it doesn’t reference a particular instruction, it will never be used. And since we know this at compile time, we can omit the unused instruction from the bundle.

Virtual DOM requires an interpreter. What part of that interpreter is needed and what part is not isn’t known at compile time, so we have to ship the whole thing to the browser.

🔗 Source: blog.nrwl.io

Q35: What's new in Angular 7?

Topic: Angular
Difficulty: ⭐⭐⭐⭐⭐

• Angular Elements - now supports content projection using web standards for custom elements.

• Angular 7.0 applications will use the Bundle Budget feature of Angular CLI. This will warn developers if the application bundle size exceeds the predefined limit.

• The Component Dev Kit (CDK) of Angular Material also receives some new features

  • Virtual Scrolling
  • Drag and Drop

• The mat-form-field will now support the use of the native select element. This will provide enhanced performance and usability to the application.

• Angular 7.0 has updated its dependencies to support Typescript 3.1, RxJS 6.3 and Node 10.

• Setting Budgets for New Apps

• For some clarification, the Angular** Ivy renderer** has NOT been released.

🔗 Source: medium.freecodecamp.org

Thanks 🙌 for reading and good luck on your interview!
Please share this article with your fellow devs if you like it!
Check more FullStack Interview Questions & Answers on 👉 www.fullstack.cafe