Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8


Angular 8 Conclusion

Angular 8 changes and new features

The angular version number indicates the level of changes introduced by the release. The use of semantic versioning helps us understand the potential impact of updating to a new version.

Angular is the most popular platform for developing client-side (frontend) mobile and desktop web apps or SPAs. With the new release of Angular 8, we have a new set of powerful features that developers will appreciate that are added at many levels. The core framework, Angular material library and the CLI.

Angular 8 changes and new features

Preview of Ivy

If we have been following Angular, Then we probably encountered the word "Ivy". Ivy is a significant change in Angular history; it an angular rendered which is radically different from anything as it uses incremental DOM. It changes how the following internally works, without changing our runtime code to reach rewriting the Angular compiler and runtime code to reach.

How Angular Ivy works on Incremental DOM

The key idea behind incremental DOM is every component gets compiled into a series of instructions. These instructions create DOM trees and update them in-place when the data changes.

Two main concepts of Ivy

  1. Tree shakable: It means removing unused pieces of our code, where the framework does not interpret the component reference like a particular instruction. It will never be used so we can omit the remaining direction from the bundle results in smaller bundles and faster load times.
Two main concepts of Ivy
  • Low Memory Footprint: Increment DOM doesn't need any memory to re-render the view if it doesn't change the DOM. So that it allocates the mind when the DOM nodes are added or removed from memory. Since most of render/template calls don't change anything result in substantial memory savings.
Low Memory Footprint

Differential loading

Angular 8 apps will now be more performant. With differential loading, new apps generated by Angular CLI will now contain separate bundles for legacy Javascript and modern JavaScript.

Differential loading

The correct bundle will be loaded automatically to the browser & will be able to download smaller, more efficient app bundles that load and render faster.

Angular Router Backwards Compatibility

Angular 8 feature added background compatibility mode to Angular router that helps to upgrade the path for large projects and will make it easier to move to Angular by allowing lazy loading parts of Angular v1.x apps to angular 2+ right away.

Improved Web Worker Building

Web workers are included while building the production bundles, which have essential for improving the parallelizability and helps increase the performance.

ng g web worker <name>

Bazel Support

One of the latest new features of Angular 8 is to build our CLI application with bazel. The Angular framework itself is made with bazel.

It is available as opt-in, it is expected to be included in @angular/cli version 9.

Bazel Support

Bazel key advantages are:

  • We will be able to build our backend and frontend with the same tools
  • Faster build time first will be painfully slow, as bazel is aiming for the precisely reproducible builds, but concurrent builds will be a lot faster. And it will be beneficial if our app uses several modules and libraries to use.
  • Incremental Build: Codebase will only trigger the smallest rebuild possible help to build and deploy only changed rather than the whole app.
  • We can eject the Bazel files, and they are hidden by default.
  • The possibility to have remote builds on a build farm.

Lazy Loading

Lazy loading is based on the concept of Angular Routing as it helps bring down the size of the large file by lazily loading the data that are required. In previous angular versions, the route configuration uses the property@loadChildren which accepts a string and if there was a wrong module name or any type while agrees with a series. And if there were a wrong module name or any kind while writing the code, Angular would not consider it wrong and accept whatever value was there as a string until we try building it.

Opt-in Usage Sharing

Keeping their efforts in alignment with the community's needs Angular CLI will be gaining another new feature, i.e., opt-in usage sharing. This feature will enable opt-in to sharing telemetry about our Angular CLI usage with the Angular team. And now Angular 8 can collect data like commands used and build speed if users allow them which will help developers improve in future.

CLI workflow improvement

The Angular CLI is continuously improving, and now the ng-build, ng-test and ng-run are equipped in the extended by 3rd-party libraries and tools.

For example: AngularFire

Builders API

The new version allows us to use the builder API. It uses builders for primary operations like serve, build, test, lint and e2e. The builders are functions that implement the logic and behaviour for a task that can replace a command which we pass to the createBuilder() method from @angular-devkit/architect package & now we can create our custom builders as well.

AngularJS API migration improvement with $location service

The angular team wants to give support for all developers using AngularJS to upgrade them into the latest Angular. So some enhancement has been made to provide better integration with the AngularJS $location service in hybrid (AngularJS<=>Angular) apps. A new package angular/common/ up-gradation is added.

  • To retrieve the state from location service.
  • To track all location changes.

Service Worker

Angular ships with a service worker implementation are starting with version 5. With the Angular service worker and the Angular CLI built-in PWA support. The angular developer can advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs and can achieve native-like application download and installation.

Updated Typescript to 3.4.x

In the newest version of Angular 8, they have updated Angular’s dependencies which include tools like RxJS and TypeScript to v3.4 (Angular 7 uses v3.2). And new apps generated via the Angular CLI will also use the latest version of TypeScript by default.

Angular Firebase

Angular has added support for firebase, and now we can deploy our application using the Angular CLI,

ng run [Project_name]: deploy