Angular v8 is here with a big bang. Released on 8th May 2019 it has lots of exciting features. Let’s get our hands dirty and go over a quick tutorial.
Here are some of the major changes in Angular 8:
- Performance optimization using differential loading
- Ivy Rendering engine support
- Bazel tool is now in open-source for opt-in features
- Builder API and Web Worker support
- No support for @angular/Http
- PNPM support including npm and yarn
- Support for Typescript 3.4.x
With this brief idea, we’ll look into creating a basic application using Angular8.
To work on Angular 8, we need to configure and install below tools for the environment
- Typescript version 3.4 or above
- IDE like Visual studio 2015 or above
- Angular CLI to install and run the project
Creating a New project:
To create a new project, we can use Angular CLI. To install Angular CLI using npm
In case, you have an existing application of angular, you can update the required dependencies of @angular/cli and @angular/core.
To update the material and CDK for Angular 8 applications, you need to uninstall material and CDK then install it using Angular 8.
Once you’ve installed these modules, check your package.json file for the updated version of the material and CDK.
Now run your application. Check out your application running at
Data display Using Angular 8
Once you run your Angular 8 application, we‘ll create components to display the products.
Once you create the components, open the ‘src/app/app.module.ts’ file and verify the new components are imported and declared in @Ngmodule.
Next, we’ll create routes in the app-routing.module.ts file. Open
src/app/app-routing.module.ts and add below imports.
Add these routes to the existing route constant.
Next, we’ll create the API for the GET the request. Register ‘HttpClientModule’ along with FormsModule in
Add these modules in @NgModule below the BrowseModule in ‘src/app/app.module.ts’.
To get the typed result object for the products, we’ll create a Typescript file of the path
We’ll create the product data in app/product.data.ts file.
Now we’ll create service to get the product data.
We’ll now add below imports in ‘src/app/api.service.ts’.
We’ll create a simple function to display product data.
We’ll now read the data published by the API service. Open the
src/app/products/products.component.ts and add the imports of API service and inject.
To display products we’ll use the Angular 8 materials and CDK. You can install it using
Register all the required modules of Angular 8 Material in
Next, add the ‘ReactiveFormsModule’ and import its module in ‘@NgModule’.
Now register all the above modules to ‘@NgModule’.
Now we’ll add the imports in ‘src/app/products/products.component.ts’. Declare the variables in the constructor and modify the ‘ngOnInit’ Function for the product list.
Now, we’ll replace all the HTML tags of ‘src/app/products/products.component.html’ to Angular Material tags.
Finally, we will add CSS code to
Now add ‘@Component’ declaration in
Finally run your application using ng server.
Take a look at sample application on https://codesandbox.io/s/wandering-brook-er0go?fontsize=14&hidenavigation=1&theme=dark TakeAway:
Angular 8 has come up with major changes. This article briefs the major features of Angular 8 and describes the basic display operation using the Angular 8 framework.