Angular Interview Questions

You can handle errors by specifying an error callback on the observer instead of relying on try/catch, which are ineffective in asynchronous environment.

For example, you can define error callback as below,

myObservable.subscribe({
next(num) { console.log('Next num: ' + num)},
error(err) { console.log('Received an error: ' + err)}
});

The subscribe() method can accept callback function definitions in line, for next, error, and complete handlers. It is known as shorthand notation or Subscribe method with positional arguments.

For example, you can define subscribe method as below,

myObservable.subscribe(
x => console.log('Observer got a next value: ' + x),
err => console.error('Observer got an error: ' + err),
() => console.log('Observer got a complete notification')
);

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

RxJS provides creation functions for the process of creating observables from promises, events, timers and Ajax requests. Let us explain each of them with an example:

1. Create an observable from a promise

import { from } from 'rxjs'; // from function
const data = from(fetch('/api/endpoint')); //Created from Promise
data.subscribe({
 next(response) { console.log(response); },
 error(err) { console.error('Error: ' + err); },
 complete() { console.log('Completed'); }
});

2. Create an observable that creates an AJAX request

import { ajax } from 'rxjs/ajax'; // ajax function
const apiData = ajax('/api/data'); // Created from AJAX request
// Subscribe to create the request
apiData.subscribe(res => console.log(res.status, res.response));

3. Create an observable from a counter

import { interval } from 'rxjs'; // interval function
const secondsCounter = interval(1000); // Created from Counter value
secondsCounter.subscribe(n =>
console.log(`Counter value: ${n}`));

4. Create an observable from an event

import { fromEvent } from 'rxjs';
const el = document.getElementById('custom-element');
const mouseMoves = fromEvent(el, 'mousemove');
const subscription = mouseMoves.subscribe((e: MouseEvent) => {
console.log(`Coordnitaes of mouse pointer: ${e.clientX} * ${e.clientY}`);
});

Usually, an observer object can define any combination of next, error, and complete notification type handlers. If you don't supply a handler for a notification type, the observer just ignores notifications of that type.

Angular elements are Angular components packaged as custom elements (a web standard for defining new HTML elements in a framework-agnostic way). Angular Elements host an Angular component, providing a bridge between the data and the logic defined in the component and the standard DOM APIs, thus, providing a way to use Angular components in non-Angular environments.

Since Angular elements are packaged as custom elements the browser support of angular elements is same as custom elements support.

This feature is is currently supported natively in a number of browsers and pending for other browsers.

Custom elements (or Web Components) are a Web Platform feature which extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. The browser maintains a CustomElementRegistry of defined custom elements, which maps an instantiable JavaScript class to an HTML tag. Currently this feature is supported by Chrome, Firefox, Opera, and Safari, and available in other browsers through polyfills.

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.

Below are the steps in an order about custom elements functionality,

1. App registers custom element with browser: Use the createCustomElement() function to convert a component into a class that can be registered with the browser as a custom element.
2. App adds custom element to DOM: Add custom element just like a built-in HTML element directly into the DOM.
3. Browser instantiate component based class: Browser creates an instance of the registered class and adds it to the DOM.
4. Instance provides content with data binding and change detection: The content with in template is rendered using the component and DOM data. The flow chart of the custom elements functionality would be as follows,

Transforming components to custom elements involves two major steps,

1. Build custom element class: Angular provides the createCustomElement() function for converting an Angular component (along with its dependencies) to a custom element. The conversion process implements NgElementConstructor interface, and creates a constructor class which is used to produce a self-bootstrapping instance of Angular component.
2. Register element class with browser: It uses customElements.define() JS function, to register the configured constructor and its associated custom-element tag with the browser's CustomElementRegistry. When the browser encounters the tag for the registered element, it uses the constructor to create a custom-element instance.

The detailed structure would be as follows,

The Component properties and logic maps directly into HTML attributes and the browser's event system. Let us describe them in two steps,

1. The createCustomElement() API parses the component input properties with corresponding attributes for the custom element. For example, component @Input('myInputProp') converted as custom element attribute my-input-prop.
2. The Component outputs are dispatched as HTML Custom Events, with the name of the custom event matching the output name. For example, component @Output() valueChanged = new EventEmitter() converted as custom element with dispatch event as "valueChanged".

You can use the NgElement and WithProperties types exported from @angular/elements.

Let's see how it can be applied by comparing with Angular component.

1. The simple container with input property would be as below,

@Component(...)
class MyContainer {
@Input() message: string;
}

2. After applying types typescript validates input value and their types,

const container = document.createElement('my-container') as NgElement & WithProperties<{message: string}>;
container.message = 'Welcome to Angular elements!';
container.message = true;  // <-- ERROR: TypeScript knows this should be a string.
container.greet = 'News';  // <-- ERROR: TypeScript knows there is no `greet` property on `container`.

Dynamic components are the components in which the component's location in the application is not defined at build time i.e. they are not used in any angular template. Instead, the component is instantiated and placed in the application at runtime.

There are mainly three kinds of directives:

1. Components — These are directives with a template.
2. Structural directives — These directives change the DOM layout by adding and removing DOM elements.
3. Attribute directives — These directives change the appearance or behavior of an element, component, or another directive.