Top 112 Angular Interview Questions And Answers

Question 1

What is _Routing Guard_ in Angular?

Accepted Answer

Angular’s **route guards** are interfaces which can tell the router **whether or not it should allow navigation **to a requested route. They make this decision by looking for a `true` or `false` return value from a class which _implements_ the given guard interface.

There are five different types of guards and each of them is called in a particular sequence. The router’s behavior is modified differently depending on which guard is used. The guards are:
* `CanActivate`
* `CanActivateChild`
* `CanDeactivate`
* `CanLoad`
* `Resolve`

Consider:
```js
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(public auth: AuthService, public router: Router) {}
  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }
}
```

Question 2

What are _Pipes_? Give me an example.

Accepted Answer

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

The hero's birthday is {{ birthday | date }}

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

Question 3

What is a `Module`, and what does it contain?

Accepted Answer

An Angular **module** is set of Angular basic building blocks like **component**, **directives**, **services** etc. An app can have more than one module.

A module can be created using `@NgModule` decorator.

```js
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
```

Question 4

How would you run unit test?

Accepted Answer

The Angular CLI downloads and install everything you need to test an Angular application with the Jasmine test framework.

The project you create with the CLI is immediately ready to test. Just run this one CLI command:

```sh
ng test
```

Question 5

What does this line do?

Accepted Answer

`@HostBinding` lets you set properties on the element or component that hosts the directive.

The code applies the css class `valid` to whatever is using this directive conditionally based on the value of isValid.

Question 6

What is a `Component`? Why would you use it?

Accepted Answer

**Components** are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

A component must belong to an `NgModule` in order for it to be usable by another component or application. To specify that a component is a member of an `NgModule`, you should list it in the _declarations_ field of that `NgModule`.

```js
@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
  name: string = 'World';
}
```

Question 7

How can I select an element in a component template?

Accepted Answer

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

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

Question 8

What is the _minimum definition_ of a `Component`?

Accepted Answer

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.

Question 9

What is the equivalent of `ngShow` and `ngHide` in Angular?

Accepted Answer

Just bind to the `hidden` property:

```js
[hidden]="!myVar"
```

Question 10

What is _Interpolation_?

Accepted Answer

**Interpolation** is a special syntax that Angular converts into _property binding_. It’s a convenient alternative to property binding. It is represented by double curly braces(`{{}}`). The text between the braces is often the name of a component property. Angular replaces that name with the string value of the corresponding component property. Let's take an example, ```html

``` In the example above, Angular evaluates the title and url properties and fills in the blanks, first displaying a bold application title and then a URL.

Top 112 Angular Interview Questions

What is Routing Guard in Angular?

What is a Module, and what does it contain?

How would you run unit test?

What is a Service, and when will you use it?

What is Interpolation?

What is the difference between Structural and Attribute directives in Angular?

What are the differences between AngularJS (angular 1.x) and Angular (Angular 2.x and beyond)?

What is the purpose of base href tag?

What's the difference between an Angular Component and Module?

How would you protect a component being activated through the router?

What is an Observable?

What is a Component? Why would you use it?

What is the minimum definition of a Component?

What is a bootstrapping module?

What is an Observer?

What are Observables?

What is the difference between @Component and @Directive in Angular?

What is the equivalent of ngShow and ngHide in Angular?

What is the difference between *ngIf vs [hidden]?

You have an HTML response I want to display. How do I do that?

What is Subscribing?

What is Router Outlet?

What is Router State?

What is Angular Universal?

What is Protractor?

What is Bazel?

What is Activated route?

What are the utility functions provided by RxJS?

Why would you use a spy in a test?

Explain the difference between Constructor and ngOnInit

Why Incremental DOM has low memory footprint?

Can you explain the difference between Promise and Observable in Angular? In what scenario can we use each case?

What happens if you use <script> tag inside template?

What is AOT?

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

Why should ngOnInit be used, if we already have a constructor?

When would you use eager module loading?

How to inject base href?

How do you perform error handling in Observables?

What are the ways to control AOT compilation?

Explain Lazy Loading in Angular?

What is the purpose of Wildcard route?

What is TestBed?

Explain how Custom Elements works internally?

What are Custom elements?

What are dynamic components?

What is the option to choose between Inline and External template file?

What is Multicasting?

How do you perform Error Handling for HttpClient?

What is a Parameterized pipe?

What is the difference between @Component and @Directive in Angular?

Do I always need a Routing Module?

What is difference between declarations, providers and import in NgModule?

What is the use of Codelyzer?

What is the difference between promise and observable?

What is Angular Ivy?

Explain the difference between Promise and Observable in Angular?

How do you categorize data binding types?

What's new in Angular 6 and why shall we upgrade to it?

What does detectChanges do in Angular Jasmine tests?

Do I need to bootstrap custom elements?

What are the mapping rules between Angular component and custom element?

Angular 9: What are some new features in Angular 9?

When does a lazy loaded module is loaded?

What is ngUpgrage?

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

Why would you use lazy loading modules in Angular app?

What is difference between Incremental DOM and Virtual DOM?

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

How do you create application to use scss?

Why do we need compilation process in Angular?

Explain the purpose of Service Workers in Angular

What is the need for SystemJS in Angular?

What is Reactive Programming and how does it relate to Angular?

Are there any pros/cons (especially performance-wise) in using local storage to replace cookie functionality?

What is Ivy Renderer?

What are the lifecycle hooks for components and directives?

Name and explain some Angular Module Loading examples

What would be a good use for NgZone service?

What is a `Module`, and what does it contain?

What is the purpose of `base href` tag?

What's the difference between an Angular `Component` and `Module`?

What is an `Observable`?

What is a `Component`? Why would you use it?

What is the minimum definition of a `Component`?

What is an `Observer`?

What are `Observable`s?

What is the difference between `@Component` and `@Directive` in Angular?

What is the equivalent of `ngShow` and `ngHide` in Angular?

What is the difference between `*ngIf` vs `[hidden]`?

Explain the difference between `Constructor` and `ngOnInit`

Can you explain the difference between `Promise` and `Observable` in Angular? In what scenario can we use each case?

What happens if you use `<script>` tag inside template?

Why should `ngOnInit` be used, if we already have a `constructor`?

How to inject `base href`?

How do you perform error handling in `Observable`s?

How do you perform Error Handling for `HttpClient`?

What is the difference between `@Component` and `@Directive` in Angular?

What is difference between `declarations`, `providers` and `import` in NgModule?

What is the difference between `promise` and `observable`?

Explain the difference between `Promise` and `Observable` in Angular?

What does `detectChanges` do in Angular Jasmine tests?

What is `ngUpgrage`?

How do you create application to use `scss`?

What would be a good use for `NgZone` service?

Name some differences between `SystemJS` vs `webpack`?

Could you provide some particular examples of using `ngZone`?

What is the difference between `BehaviorSubject` vs `Observable`?

Is there no equivalent to `$scope.emit()` or `$scope.broadcast()` in Angular?

What is the Angular equivalent to an AngularJS `$watch`?