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
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 errror: ' + err)}
});
RxJS is a library for composing asynchronous and callback-based code in a functional, reactive style using Observables. Many APIs such as HttpClient produce and consume RxJS Observables and also uses operators for processing observables.
For example, you can import observables and operators for using HttpClient as below,
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
The response body doesn't may not return full response data because sometimes servers also return special headers or status code which which are important for the application workflow. Inorder to get full response, you should use observe option from HttpClient,
getUserResponse(): Observable<HttpResponse<User>> {
return this.http.get<User>(
this.userUrl, { observe: 'response' });
}
Now HttpClient.get() method returns an Observable of typed HttpResponse rather than just the JSON data.
Most of the Front-end applications communicate with backend services over HTTP protocol using either XMLHttpRequest interface or the fetch() API. Angular provides a simplified client HTTP API known as HttpClient which is based on top of XMLHttpRequest interface. This client is avaialble from @angular/common/http package. You can import in your root module as below,
import { HttpClientModule } from '@angular/common/http';
The major advantages of HttpClient can be listed as below,
Contains testability features
Provides typed request and response objects
Intercept request and response
Supports Observalbe APIs
Supports streamlined error handling
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.
String interpolation and property binding are parts of data-binding in Angular.
Data-binding is a feature in angular, which provides a way to communicate between the component(Model) and its view(HTML template).
Data-binding can be done in two ways, one-way binding and two-way binding.
In Angular, data from the component can be inserted inside the HTML template. In one-way binding, any changes in the component will directly reflect inside the HTML template but, vice-versa is not possible. Whereas, it is possible in two-way binding.
String interpolation and property binding allow only one-way data binding.
String interpolation uses the double curly braces {{ }} to display data from the component. Angular automatically runs the expression written inside the curly braces, for example, {{ 2 + 2 }} will be evaluated by Angular and the output 4, will be displayed inside the HTML template. Using property binding, we can bind the DOM properties of an HTML element to a component's property. Property binding uses the square brackets [ ] syntax.
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 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
Angular Ivy is a new rendering engine for Angular. You can choose to opt in a preview version of Ivy from Angular version 8.
Traditionally, VanillaJS and jQuery were used by developers to develop dynamic websites. As the websites became more complex with added features and functionality, it was hard for the developers to maintain the code. Moreover, there was no provision of data handling facilities across the views by jQuery. So, Angular was built to address these issues, thus, making it easier for the developers by dividing code into smaller bits of information that are known as Components in Angular. Client-side frameworks permit the development of advanced web applications like SPAs which, if developed by VanillaJS, is a slower process.
Components and directive of Angular JS follow the following typical lifecycle.
* nhOnInit
* ngDoCheck
* ngOnDestroy
* Constructor
* ngOnChanges
* ngAfterContentInit (only for components)
* ngAfterContentChecked (only for components)
* ngAfterViewInit (only for components)
* ngAfterViewChecked (only for components)
Angular Compiler supports configuration inheritance through extends in the tsconfig.json on angularCompilerOptions. i.e, The configuration from the base file(for example, tsconfig.base.json) are loaded first, then overridden by those in the inheriting config file.
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"experimentalDecorators": true,
...
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"preserveWhitespaces": true,
...
}
}
Metadata rewriting is the process in which the compiler converts the expression initializing the fields such as useClass, useValue, useFactory, and data into an exported variable, which replaces the expression. Remember that the compiler does this rewriting during the emit of the .js file but not in definition files( .d.ts file).
No, the AOT collector understands a subset of (or limited) JavaScript features. If an expression uses unsupported syntax, the collector writes an error node to the .metadata.json file. Later point of time, the compiler reports an error if it needs that piece of metadata to generate the application code.
The system.config.json file is used to configure the SystemJS for the Angular application. It also allows for different modules to load compiled using the TypeScript compiler.
In the SPA technology, only a single page, which is index.HTML, is maintained although the URL keeps on changing. Unlike traditional web technology, SPA technology is faster and easy to develop as well.
In conventional web technology, as soon as a client requests a webpage, the server sends the resource. However, when again the client requests for another page, the server responds again with sending the requested resource. The problem with this technology is that it requires a lot of time.
You should subscribe to your observable to convert into an array.
Cancel and unsubscribing Observable are the same thing. You can use the unsubscribe function over the subscription object to unsubscribe the observable in Angular 6. You can also use the async pipe or the takeUnitil operator in Angular 6 to can cancel the observable.
An observable is implemented using the RxJS library to work with the asynchronous events and it provides a way of publishing data in JavaScript. You have to subscribe to the observable to receive values from the observables. To subscribe to the observable, you can use either async pipe or using the actual subscribe method. You can perform operators such as map(), filter(), Concat(), and flatMap() with the observable.
The process of monitoring the watchlist in order to track changes in the value of the watch variable is termed the digest cycle in Angular. The previous and present versions of the scope model values are compared in each digest cycle.
Although the digest cycle process gets triggered implicitly, it is possible to start it manually by using the $apply() function.
The observable in Angular 6 can be implemented using the RxJS library to work with the asynchronous events. The RxJS gives a number of functions to create new observable to simply the process of creating it from things such as events, timers, promises, and so on.
You can create an observable from a promise, a counter, an event, from an AJAX request.
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.
The Angular components and templates cannot be understood by the browser directly. Due to that Angular applications require a compilation process before they can run in a browser. For example, In AOT compilation, both Angular HTML and TypeScript code converted into efficient JavaScript code during the build phase before browser runs it.
Below are the list of few Pipes available in Angular Js
* DatePipe
* CurrencyPipe
* AsyncPipe
* DecimalPipe
* TitleCasePipe
* JsonPipe
* SlicePipe
* PercentPipe
* UpperCasePipe
* LowerCasePipe
In order to upgrade angular-cli package that was installed globally in your system, you need to run following commands
npm uninstall -g angular-cli
npm cache clean or npm cache verify (if npm > 5)
npm install -g @angular/cli@latest
Instead of upgrading global version of angular-cli you can also upgrade the local version for specific project y running following commands:
rm -rf node_modules
npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install
In order to generate a module in Angular, cd to the current project directory and below command.
ng g module module_name
You can generate a component in specific module in AngularJs by running below commnad on CLI.
ng g component component_name --module=module_name
Directives are one of the core features of Angular. They allow an Angular developer to write new, application-specific HTML syntax. In actual, directives are functions that are executed by the Angular compiler when the same finds them in the DOM. Directives are of three types:
* Attribute Directives
* Component Directives
* Structural Directives
In Angular, annotations are used for creating an annotation array. They are only metadata set of the class using the Reflect Metadata library.
Decorators in Angular are design patterns used for separating decoration or modification of some class without changing the original source code.
Written with HTML, templates in Angular contains Angular-specific attributes and elements. Combined with information coming from the controller and model, templates are then further rendered to cater the user with the dynamic view.
Also referred to as moustache syntax, string interpolation in Angular refers to a special type of syntax that makes use of template expressions in order to display the component data. These template expressions are enclosed within double curly braces i.e. {{ }}.
The JavaScript expressions that are to be executed by Angular are added within the curly braces and the corresponding output is embedded into the HTML code. Typically, these expressions are updated and registered like watches as a part of the digest cycle.
The system.config.json file is used to configure the SystemJS for the Angular application. It also allows for different modules to load compiled using the TypeScript compiler.
The @HostListener is a decorator method in Angular 6 that is used for listening to DOM events. It listens to the DOM events on the host element of both the component and attribute components. It sets the listener once when the directive is initialized and removes the listener if the directive is destroyed.
Linting is the process of running a program that analyses your code for programmatic and stylistic errors. It checks the code quality of the angular project specified.
Promise in Angular, is used with asynchronous tasks.
Promises return only a single value as
* data or output if promise resolves
* or error message if promise rejects
Request initiated by a promise is not cancellable. Promise was added in Angular from Angular 2.
An observable in comparison, handles multiple events similar to a stream.
Subscribe is an method in RxJS library and is used with observables.
The subscriber function defines how to obtain or generate values or messages to be published.
You create an Observable instance that defines a subscriber function, which is called when a consumer calls the subscribe() method
To execute the observable you have created and begin receiving notifications, you call its subscribe() method, passing an observer. This is a JavaScript object that defines the handlers for the notifications you receive. The subscribe() call returns a Subscription object that has an unsubscribe() method, which you call to stop receiving notifications.
* Set Up the Development Environment. For building an Angular 2 project, you need to have the Angular CLI (command line interface).
* Create a New Project. Open a terminal window. ...
* Serve the Application. Go to the project directory and install node modules in your project directory.
NPM in angular is used for package management.
Angular framework and CLI are NPM packages and distributed by NPM registry.
NPM expands to Node Package Manager and is the default package manager for Node.js.
Create a project in angular 6 by using Angular 6 CLI as
ng new project-name
A project structure is created.
Step 1: Globally upgrade the Angular CLI from 1.x to 6. Then using Command Install the angular-cli 6 globally:
Step 2: Upgrade Angular CLI version in project. Go to project the source directory.
Step 3: Identify the packages that need an upgrade.
Step 4: Upgrade packages.
Step 5: Solve peer dependency issues.
* Add the new CLI. npm install @angular/cli@latest -g.
* Upgrade the CLI locally in your project. ng update @angular/cli.
* Upgrade Angular dependencies.
* Upgrade Angular dev dependencies.
* Upgrade Angular dependent dependencies.
* Upgrade Angular dependent dev dependencies.
* Install TypeScript 2.7.2.
* Install RxJS 6+
DI or Dependency Injection software design pattern which deals how components hold of their dependencies. The AngularJS injector is a subsystem present in it to create components, resolve their dependencies and also to provide them to other components if requested.
NgZone is used by developers to start change detection resulted by async operations automatically. It gives us back control of our code’s execution. It can be used to subscribe to an Observable that is present outside of the angular zone and also to return to the angular zone when reacting to the same Observable.
The Traceur compiler takes ES6 or ECMAScript Edition 6 which includes generators, classes, generators, etc. and compiles it down to regular JavaScript that runs smoothly with your browser.
Decorators are actually just functions that are called as per the component they are handling. A class decorator shall be called with the class being decorated and similarly for a method decorator. Here’s how to create a decorator in Angular 6:
Example
Step 1:
function Console(target) {
console.log('Our decorated class', target);
}
Step 2:
@Console
class ExampleClass {
constructor() {
console.log('Hello!');
}
}
FormGroup
The FormGroup has the role in tracking validity state and value of a group of FormControl.
FormControl
In Angular, FormControl is used by developers to track the validation and values of a form of control. This can be both used as standalone as well as with the parent form. FormControlName and FormControlDirective directives are used when we work with FormControl class.
In Angular, feature modules are NgModules, used for the organizational best practice of code management. It delivers a cohesive set of functionality that is specific application focused.
There are five types of feature modules:
Routed feature modules
Domain feature modules
Routing modules
Widget feature modules
Service feature modules
A template expression produces a value in Angular within double curly braces {{ }}. It executes the expression and assigns it to a property of the particular binding and the target can be an HTML element, a component, or a directive.
In terms of syntax, it is much similar to that of Javascript. Most of the JavaScript expressions are legal template expressions, with a few exceptions.
You can't use JavaScript expressions that have or promote side effects, including:
Assignments (=, +=, -=, ...)
Operators like new, typeof, instanceof, etc.
Chaining expressions with ; or ,
With increment and decrement operators ++ and --
Most of the ES2015+ operators
In Angular, Property binding is a technique that lets you set the property of a particular view element. It involves updating values within a property in the component and then binding it to an element inside the view template. Property binding in Angular uses the [ ] syntax for data binding. An example of this is setting the disabled state of a button.
Example
// component.html
<button [disabled]="buttonDisabled"></button>
HTML
// component.ts
@Component({
templateUrl: 'component.html',
selector: 'app-component',
})
export class Component {
buttonDisabled = true;
}