Angular has come out with some amazing new features in version 6.0.0, especially in Angular-cli. Now, with Angular 6, you can easily update your old packages, create native web elements using Angular Elements, and many other things. Let’s take a look!

ng add

1*u8BWLIWdkabEzp0QSmMUgg

ng add is a new command in Angular-cli that helps you install and download new packages in your angular apps. It works the same as npm, but it doesn’t replace it.

ng update

1*mxQPMNmblN_8t_ky1r5G8w

ng update is a new Angular-cli command too. It’s used to update and upgrade your packages. It’s really helpful, for example, when you want to upgrade from Angular 5 to Angular 6, or any other package in your Angular app.

Declaring the providers inside the service itself

Before this update, you had to the declare the providers array in app.module.ts

Now with Angular 6, you can provide your service inside the supervisor itself by putting the providedIn:root property within the "@injectable" decorator.

1*3Huej4et-8LIfrAEhzY3pQ

Use ng-template instead of template directive

You can use ng-template to render the HTML instead of the template tag in the new version of Angular. ng-template is an Angular element, and it works when it is used with a structural directive such as *ngFor and *ngIf

1*6RjvjuP6weX0bPrYBbjQ8Q

Angular elements

Angular 6 introduced us to Angular elements. You’re able to render your Angular elements as native web elements, and they’re interpreted as trusted HTML elements.

You can add Angular elements by running the command below:

1*u8BWLIWdkabEzp0QSmMUgg

Import createCustomElement in your component.

1*YP2ej1AXVAO9GURmbGnFcQ

Then create your customized element!

1*F1WAYYCRzJSyfr8PSWsMRg

MyElemComponent.ts

1*S4Ib01DNgO67jh_-habKmQ

The result:

1*lgl-OcKiFKVLF7A9KdrImA

Note: you have to implement the DomSanitizer method from @angular/platform-browser to make your custom element a trusted HTML tag .

You can learn more about Angular elements here

Upgrading to RxJS 6.0.0

Angular 6 uses the latest version of Rxjs library. Now you can enjoy the newest features of RxJS 6 in your Angular app :)

Wrapping Up

Angular itself doesn’t have many groundbreaking changes in the Angular core, but Angular-cli is really exciting. The Angular team is focusing more on performance, building PWAs easily, providing a good environment to work in which to work with Angular in an easy way.

You can find me on Twitter.

By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — said@devsdata.com.