Angular Interview Questions

The animation transition function is used to specify the changes that occur between one state and another over a period of time. It accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts an animate() function.

Let's take an example state transition from open to closed with an half second transition between states.

transition('open => closed', [
animate('500ms')
]),

Using DomSanitizer we can inject the dynamic Html,Style,Script,Url.

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'my-app',
template: `
`,
})
export class App {
constructor(protected sanitizer: DomSanitizer) {}
htmlSnippet: string = this.sanitizer.bypassSecurityTrustScript("<script>safeCode()</script>");
}

A service worker is a script that runs in the web browser and manages caching for an application. Starting from 5.0.0 version, Angular ships with a service worker implementation. Angular service worker is designed to optimize the end user experience of using an application over a slow or unreliable network connection, while also minimizing the risks of serving outdated content.

Below are the list of design goals of Angular's service workers,

1. It caches an application just like installing a native application
2. A running application continues to run with the same version of all files without any incompatible files
3. When you refresh the application, it loads the latest fully cached version
4. When changes are published then it immediately updates in the background
5. Service workers saves the bandwidth by downloading the resources only when they changed.

Dependency injection is a common component in both AngularJS and Angular, but there are some key differences between the two frameworks in how it actually works.

Angular Ivy is a new rendering engine for Angular. You can choose to opt in a preview version of Ivy from Angular version 8.

1. You can enable ivy in a new project by using the --enable-ivy flag with the ng new command

ng new ivy-demo-app --enable-ivy

2. You can add it to an existing project by adding enableIvy option in the angularCompilerOptions in your project's tsconfig.app.json.

{
"compilerOptions": { ... },
"angularCompilerOptions": {
"enableIvy": true
}
}

You can expect below features with Ivy preview,

1. Generated code that is easier to read and debug at runtime
2. Faster re-build time
3. Improved payload size
4. Improved template type checking

Yes, it is a recommended configuration. Also, AOT compilation with Ivy is faster. So you need set the default build options(with in angular.json) for your project to always use AOT compilation.

{
"projects": {
"my-project": {
"architect": {
"build": {
"options": {
...
"aot": true,
}
}
}
}
}
}

The Angular Language Service is a way to get completions, errors, hints, and navigation inside your Angular templates whether they are external in an HTML file or embedded in annotations/decorators in a string. It has the ability to autodetect that you are opening an Angular file, reads your tsconfig.json file, finds all the templates you have in your application, and then provides all the language services.

You can install Angular Language Service in your project with the following npm command,

npm install --save-dev @angular/language-service

After that add the following to the "compilerOptions" section of your project's tsconfig.json

"plugins": [
{"name": "@angular/language-service"}
]

Note: The completion and diagnostic services works for .ts files only. You need to use custom plugins for supporting HTML files.

Yes, Angular Language Service is currently available for Visual Studio Code and WebStorm IDEs. You need to install angular language service using an extension and devDependency respectively. In sublime editor, you need to install typescript which has has a language service plugin model.

Basically there are 3 main features provided by Angular Language Service,

1. Autocompletion: Autocompletion can speed up your development time by providing you with contextual possibilities and hints as you type with in an interpolation and elements.

2. Error checking: It can also warn you of mistakes in your code.

3. Navigation: Navigation allows you to hover a component, directive, module and then click and press F12 to go directly to its definition.

You can add web worker anywhere in your application. For example, If the file that contains your expensive computation is src/app/app.component.ts, you can add a Web Worker using ng generate web-worker app command which will create src/app/app.worker.ts web worker file. This command will perform below actions,

1. Configure your project to use Web Workers
2. Adds app.worker.ts to receive messages

addEventListener('message', ({ data }) => {
const response = `worker response to ${data}`;
postMessage(response);
});

3. The component app.component.ts file updated with web worker file

if (typeof Worker !== 'undefined') {
// Create a new
const worker = new Worker('./app.worker', { type: 'module' });
worker.onmessage = ({ data }) => {
console.log('page got message: $\{data\}');
};
worker.postMessage('hello');
} else {
// Web Workers are not supported in this environment.
}

Note: You may need to refactor your initial scaffolding web worker code for sending messages to and from.

You need to remember two important things when using Web Workers in Angular projects,

1. Some environments or platforms(like @angular/platform-server) used in Server-side Rendering, don't support Web Workers. In this case you need to provide a fallback mechanism to perform the computations to work in this environments.
2. Running Angular in web worker using @angular/platform-webworker is not yet supported in Angular CLI.

In Angular8, the CLI Builder API is stable and available to developers who want to customize the Angular CLI by adding or modifying commands. For example, you could supply a builder to perform an entirely new task, or to change which third-party tool is used by an existing command.