Video TutorialsWeb Development TutorialsAll You Need To Know About Newest Angular Version 6

All You Need To Know About Newest Angular Version 6

As we all are aware that, Google released its new version of Angular in April. It was primarily the major release from Google in the year 2018 which is basically centered around the toolchain and furthermore making Angular simpler for the user to make diverse applications.

Angular 6 is a platform that builds a web Single Page Applications with the combination of the dependency injection, end to end integrated practices to solve the challenges of web development, templates, etc. Angular has come out with amazing new features in the latest version of Angular 6 especially in the Angular-cli along with bugfixes, and the framework packages. There are many tech giants like Google, Wix, Weather.com, and Forbes, who have tried their hands, on this amazing technology. With the help of Newest Angular Version 6, you can easily create native web elements and update your old packages. In this tutorial, I’m going to teach you by example, discussing the Angular 6 features, how and why they work, along with its installation and building the web applications with the same.

Addition and new features
1) ng add
2) ng update
3) angular elements
4) upgrading to RxJS
5) service worker support
6) remove template element
7) ngModelChange
8) Bazel Compiler
9) i18n
10) Tree shaking

ng add – The angular-cli gets a new command ng add. This command performs an important role in the angular application by installing and downloading new packages to your angular web application. It works the same as npm command of the nodejs, but does not replace it. The ng add command adds new capabilities to the Angular application for the easy development, and it can even update your project with the configuration changes, additional dependencies or scaffold package-specific initialization code.

ng add @angular/elements

ng update – Yet another command of the angular-cli. The ng update command helps to analyze package.json file and uses the knowledge of the angular to update your angular application. ng update command uses yarn and npm to manage dependencies, but unfortunately the command doesn’t replace the package manager.

Say for instance, If you want to upgrade your angular application from angular version 5 to 6 or any other package in your angular application the ng update command @angular/core will update all the packages of the angular framework along with the updates of the RxJS and TypeScript. As its integral part, ng update command will automatically install rxjs-compat into the angular application, this will helps to make the adoption of RxJS v6 smoother.

ng update @angular/core

Angular elements – Angular 6 acquainted us with the Angular elements. You’re ready to render your Angular components as native web components, and they’re interpreted as confided HTML elements
The Angular Elements is centered around enabling you to bootstrap Angular components inside a current Angular application by enrolling them as Custom Elements.

You can add Angular elements with the help of command below:

ng add @angular/elements

Upgrading to RxJS 6.0.0 – Latest version of Rxjs library is used in Angular 6. The RxJS is coming with some major changes along with compatibility package rxjs-compat to keep the angular application working.

Service Worker Support – Service workers are basically the scripts that run in the web browser and manage to cache an application. In Angular 6, service workers accompany some bug fixes, with the addition of new functionalities. Therefore, when the latest application form is sent, we may need to deactivate or uninstall the current service worker.

There is no straightforward option for this in Angular 5, but Angular 6 brings these functionalities with the safety-worker.js script file, it is a part of the production bundle and is useful to unregister the previous service worker. Angular 6 currently underpins the configuration of navigation URLs within the Service Workers. The service worker will divert the navigation requests that don’t match any source or data group to the specified index file. Presently, we can specify a discretionary navigationUrls list in ngsw-config.json files which contain the desired URLs.

For instance, a requests URLs match any positive patterns except navigate ones, then it will be considered as a navigation request and it will be dealt the correct way by the service worker. Moreover, in Angular 6, the service worker stays in the current mode unless the server is reconnected and updates the work.

Say GoodBye to Template Element-

Say goodbye to <template> and say Hi to <ng-template>

i18n – Internationalization or i18n is one of the major changes in the Angular version 6. In Angular 6, i18n is accompanying with runtime rendering so that there is no necessity to build one application for each locale.

NgModelChange –

Prior to Angular 6, the ngModelChange event was emitted before the said form control updating. In case if we have an event handler for the ngModelChange event that checks the value through control, the old value will get replaced instead of the changed ones. Presently, in Angular 6, ngModelChange has transmitted the value after the value is updated in the form control.

Bazel Compiler – Bazel Compiler actually is a build system or say a structure that is used for building softwares. Since the source code changes regularly, it doesn’t bode well to rebuild the whole application for each and every change. Rather than rebuilding the whole application, we will assemble just the code which really changes and even that code that relies upon those changes. Therefore the compiler just remakes what is necessary.

Tree shaking- To make the Angular app compatible, Angular 6 moved from modules referencing services to services referencing modules. Tree shaking is a build optimization step that ensures any unused code does not get utilized in the final bundle.

I hope this sneak peak helped you in identifying the basics of Angular 6 features. Now let’s get started with building an Angular 6 web application:

This new Angular 6 version is the improved version. To build angular web application we require some tools, frameworks, and module that are as follows:-

1) Nodejs
2) Angular -cli
3) Angular 6
4) Terminal (Mac/Linux) or Node Command Line (Windows)
5) Text editor (atom, sublime text,visual studio code)

Step 1:

To install Angular cli, open command prompt as an administrator and go to the project folder where you want to build angular 6 web application. Run the command given below and install the latest version of angular cli.

npm install -g @angular/cli@latest

You will see the below image of the angular cli installation

Step 2 : Create angular web application by adding the following command (myapp is the name given by me, you can use any other name of your choice)

ng new myapp

 

command prompt

Step 3 : Open the myapp folder in the text editor, and here you will see the structure of the angular web application. All you have to do is go to command prompt – select myapp folder and run the below written command.

ng serve

 

local host

Go to web browser and type http://localhost:4200/ you will see the angular web application running successfully.

angular web app

Once the angular application is installed on your local host, we can even try another method that can make the angular web development easy but for this you need to make few changes in the Angular components and those are discussed below:-

Step 1:

Edit the first angular component which is created by angular cli with app-root (component name) located in the “C:\project\angular\myapp\src\app\app”folder. Select and open the app.component.ts file from above location and change the title from ‘app’ to ‘My First Angular Application!’.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App';
}

Step 2:

The browser will reload automatically with the modified title. Open another component app.component.css from the “C:\project\angular\myapp\src\app” location and add the title style as per your desire.

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

Step 3:

Remove the links from the web application, and open another component from “C:\project\angular\myapp\src\app” location which is an app.component.html file. Make the changes in “app.component.html” file as given below

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>

Once the changes are done, browser will automatically reload them as the screenshot below.

reload the page

Conclusion

Angular 6, in all its glory, demands to test it yourself to fully grasp the knowledge. Moreover, in this tutorial I have explained in detail the newest Angular 6 features and its installation with the help of Angular cli components with the setup and how to deploy the angular web applications. These features will help to make web developing very easy. In addition to this you will even get familiar to know how to make changes in angular 6 component to easily build a web application. Hope this helps! To keep a track and to learn more about Angular, from basics to cutting-edge, you can always visit this comprehensive course on Angular 6.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -