Angular 6 Tutorial - Learn Angular 6 in 60 Minutes

Estimated study time: 15 minutes. A focused crash course through Angular 6's core additions.

Angular 6 aligned the whole Angular ecosystem — core, CLI, and Material — under a single version number and introduced a few changes that are still relevant to understand today.

Angular CLI Workspaces

The CLI introduced the concept of a workspace that could hold multiple projects (apps and libraries) side by side, configured through angular.json.

ng generate application second-app
ng generate library shared-ui

providedIn Syntax for Services

Angular 6 introduced the providedIn: 'root' syntax for services, replacing the older pattern of manually listing every service in an NgModule's providers array.

@Injectable({ providedIn: 'root' })
export class UserService {}

Angular Elements

Angular Elements let you package an Angular component as a standard custom element (web component), usable in non-Angular applications.

const el = createCustomElement(PopupComponent, { injector });
customElements.define('popup-element', el);

ng update and ng add

Two new CLI commands arrived: ng update for automatically migrating dependencies and code to newer versions, and ng add for installing and configuring new packages (like Angular Material) in one step.

ng add @angular/material
ng update @angular/core @angular/cli