Angular Interview Questions

You can inject either ApplicationRef or NgZone, or ChangeDetectorRef into your component and apply below specific methods to trigger change detection in Angular. i.e, There are 3 possible ways,

1. ApplicationRef.tick(): Invoke this method to explicitly process change detection and its side-effects. It check the full component tree.
2. NgZone.run(callback): It evaluate the callback function inside the Angular zone.
3. ChangeDetectorRef.detectChanges(): It detects only the components and it's children.

There are different versions of Angular framework. Let's see the features of all the various versions,

1. Angular 1:

• Angular 1 (AngularJS) is the first angular framework released in the year 2010.
• AngularJS is not built for mobile devices.
• It is based on controllers with MVC architecture.

2. Angular 2:

• Angular 2 was released in the year 2016. Angular 2 is a complete rewrite of Angular1 version.
• The performance issues that Angular 1 version had has been addressed in Angular 2 version.
• Angular 2 is built from scratch for mobile devices unlike Angular 1 version.
• Angular 2 is components based.

3. Angular 3:

• The following are the different package versions in Angular 2:
• @angular/core v2.3.0
• @angular/compiler v2.3.0
• @angular/http v2.3.0
• @angular/router v3.3.0
• The router package is already versioned 3 so to avoid confusion switched to Angular 4 version and skipped 3 version.

4. Angular 4:

• The compiler generated code file size in AOT mode is very much reduced.
• With Angular 4 the production bundles size is reduced by hundreds of KB’s.
• Animation features are removed from angular/core and formed as a separate package.
• Supports Typescript 2.1 and 2.2.
• Angular Universal
• New HttpClient

5. Angular 5:

• Angular 5 makes angular faster. It improved the loading time and execution time.
• Shipped with new build optimizer.
• Supports Typescript 2.5.
• Service Worker

6. Angular 6:

• It is released in May 2018.
• Includes Angular Command Line Interface (CLI), Component Development KIT (CDK), Angular Material Package, Angular Elements.
• Service Worker bug fixes.
• i18n
• Experimental mode for Ivy.
• RxJS 6.0
• Tree Shaking

7. Angular 7:

• It is released in October 2018.
• TypeScript 3.1
• RxJS 6.3
• New Angular CLI
• CLI Prompts capability provide an ability to ask questions to the user before they run. It is like interactive dialog between the user and the CLI
• With the improved CLI Prompts capability, it helps developers to make the decision. New ng commands ask users for routing and CSS styles types(SCSS) and ng add @angular/material asks for themes and gestures or animations.

8. Angular 8:

• It is released in May 2019.
• TypeScript 3.4

9. Angular 9:

• It is released in February 2020.
• TypeScript 3.7
• Ivy enabled by default

10. Angular 10:

• It is released in June 2020.
• TypeScript 3.9
• TSlib 2.0

Below are the list of security principles in angular,

1. You should avoid direct use of the DOM APIs.
2. You should enable Content Security Policy (CSP) and configure your web server to return appropriate CSP HTTP headers.
3. You should Use the offline template compiler.
4. You should Use Server Side XSS protection.
5. You should Use DOM Sanitizer.
6. You should Preventing CSRF or XSRF attacks.

Angular has supported the integration with the Web Tracing Framework (WTF) for the purpose of performance testing. Since it is not well maintained and failed in majority of the applications, the support is deprecated in latest releases.

Both @angular/platform-webworker and @angular/platform-webworker-dynamic are officially deprecated, the Angular team realized it's not good practice to run the Angular application on Web worker

Angular CLI provides it's installed version using below different ways using ng command,

ng v
ng version
ng -v
ng --version

and the output would be as below,

Angular CLI: 1.6.3
Node: 8.11.3
OS: darwin x64
Angular:
...

Angular supports most recent browsers which includes both desktop and mobile browsers. As of Angular 13+, IE is no longer supported.

It's a scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code. It defines rules that operate on a virtual file system called a tree.

In schematics world, it's a function that operates on a file tree to create, delete, or modify files in a specific manner.

Schematics come with their own command-line tool known as Schematics CLI. It is used to install the schematics executable, which you can use to create a new schematics collection with an initial named schematic. The collection folder is a workspace for schematics. You can also use the schematics command to add a new schematic to an existing collection, or extend an existing schematic. You can install Schematic CLI globally as below,

npm install -g @angular-devkit/schematics-cli

Below are the best practices of security in angular,

1. Use the latest Angular library releases
2. Don't modify your copy of Angular
3. Avoid Angular APIs marked in the documentation as “Security Risk.”

Angular treats all values as untrusted by default. i.e, Angular sanitizes and escapes untrusted values When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation.

The offline template compiler prevents vulnerabilities caused by template injection, and greatly improves application performance. So it is recommended to use offline template compiler in production deployments without dynamically generating any template.

Angular defines the following security contexts for sanitization,

1. HTML: It is used when interpreting a value as HTML such as binding to innerHtml.
2. Style: It is used when binding CSS into the style property.
3. URL: It is used for URL properties such as <a href>.
4. Resource URL: It is a URL that will be loaded and executed as code such as <script src>.

Sanitization is the inspection of an untrusted value, turning it into a value that's safe to insert into the DOM. Yes, Angular supports sanitization. It sanitizes untrusted values for HTML, styles, and URLs but sanitizing resource URLs isn't possible because they contain arbitrary code.