35 Top Angular 7 Interview Questions To Crack in 2019
Tags: angular, typescript, javascript, interview
Published: 2019-04-24 01:11:41

---
title: 35 Top Angular 7 Interview Questions To Crack in 2019
published: true
description: 35 Top Angular 7 Interview Questions To Crack in 2019
tags: #angular #typescript #javascript #interview
canonical_url: https://www.fullstack.cafe/blog/angular-7-interview-questions-to-crack-in-2019
---
![35 Top Angular 7 Interview Questions To Crack in 2019](https://images.pexels.com/photos/2116475/pexels-photo-2116475.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=350)
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](https://www.fullstack.cafe)

### Q1: What are pipes? Give me an example.
> Topic: **Angular**<br/>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:
```html
<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](https://angular.io/guide/pipes)
### Q2: What is the minimum definition of a component?
> Topic: **Angular**<br/>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:
```sh
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](https://stackoverflow.com/questions/46338698/minimum-definition-of-a-component-angular-4)
### Q3: What's the difference between an Angular component and module?
> Topic: **Angular**<br/>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](https://stackoverflow.com/questions/40073941/whats-the-difference-between-an-angular-component-and-module)
### Q4: How can I select an element in a component template?
> Topic: **Angular**<br/>Difficulty: ⭐⭐

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

```js
constructor(myElement: ElementRef) { ... }
```

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

Observer is an interface for a consumer of push-based notifications delivered by an Observable. It has below structure,
```javascript
    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,
```javascript
    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](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q6: What is an observable?
> Topic: **Angular**<br/>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,
```javascript
    import { Observable } from 'rxjs';

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

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q7: What is TestBed?
> Topic: **Angular**<br/>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](https://angular.io/guide/testing)
### Q8: What is Redux and how does it relate to an Angular app?
> Topic: **Angular**<br/>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](https://github.com/WebPredict/angular-2-interview-questions)
### Q9: What are the Core Dependencies of Angular 7?
> Topic: **Angular**<br/>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](https://www.onlineinterviewquestions.com/angular-7-interview-questions/)
### Q10: Why Incremental DOM Has Low Memory Footprint?
> Topic: **Angular**<br/>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](https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36)
### Q11: What are the ways to control AOT compilation?
> Topic: **Angular**<br/>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](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q12: What is activated route?
> Topic: **Angular**<br/>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,

```js
@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](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q13: What is router outlet?
> Topic: **Angular**<br/>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,
```html
    <router-outlet></router-outlet>
    <!-- Routed components go here -->
```

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q14: What are the utility functions provided by RxJS?
> Topic: **Angular**<br/>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](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q15: What is multicasting?
> Topic: **Angular**<br/>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,
```javascript
    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](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q16: What is subscribing?
> Topic: **Angular**<br/>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.
```javascript
    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](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q17: How to set headers for every request in Angular?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

You could provide a service that wraps the original `Http` object from Angular.
```js
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`).
```js
import { HttpClient } from './http-client';
```

🔗 **Source:** [medium.com](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)
### Q18: 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/)
### Q19: 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)
### Q20: 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)
### Q21: 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)
### Q22: 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)
### Q23: What is Ivy Renderer? Is it supported by Angular 7?
> Topic: **Angular**<br/>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](https://www.onlineinterviewquestions.com/angular-7-interview-questions/)
### Q24: What is incremental DOM? How is it different from virtual DOM?
> Topic: **Angular**<br/>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](https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36)
### Q25: What are the advantages with AOT?
> Topic: **Angular**<br/>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](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q26: Do I need to bootstrap custom elements?
> Topic: **Angular**<br/>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](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q27: What is the difference between pure and impure pipe?
> Topic: **Angular**<br/>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](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q28: What is the difference between BehaviorSubject vs Observable?
> Topic: **Angular**<br/>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](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)
### Q29: 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)
### Q30: Name some differences between SystemJS vs WebPack?
> Topic: **Angular**<br/>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](http://vteams.com/blog/systemjs-vs-webpack/)
### Q31: 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)
### Q32: 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)
### Q33: Why did the Google team go with incremental DOM instead of virtual DOM?
> Topic: **Angular**<br/>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](https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36)
### Q34: Why Incremental DOM is Tree Shakable?
> Topic: **Angular**<br/>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](https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36)
### Q35: What's new in Angular 7?
> Topic: **Angular**<br/>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](https://medium.freecodecamp.org/whats-new-in-angular-7-0-and-how-to-upgrade-f2ed22a79e28)

> *Thanks 🙌 for reading and good luck on your interview!* <br/>*Please share this article with your fellow devs if you like it!* <br/>*Check more FullStack Interview Questions & Answers on 👉 [www.fullstack.cafe](https://www.fullstack.cafe)*