# data[].attributes.attachment_link.readable_text
Angular 7 released in October, just like it was scheduled. The new features of the framework are the update to Node 10, TypeScript 3.1 and RxJS 6.3. Unfortunately, the new Ivy Renderer is not part of this release, because not all of the features have been implemented to the satisfaction of the Angular developers. Instead, a first version will be released within the next few months, which roll out for everyone with the next big release at the very latest. The Angular platform, which consists of the CLI and Angular Material/CDK, has been further developed for this purpose. At the same time quite a lot has happened with the Angular's partners.

Angular 7 - An overview

Whatever the case may be, a look at Angular 7 is definitely appropriate. This is the case, because Angular 7 brings some innovations by updating the library versions: From now on, for example, Angular supports Node 10 and simultaneously maintains Node 8 support. Additionally, TypeScript Release 3.1 is used and supported, so that Angular should be able to use its most important new language features. These features include, for example, the mapping of types to tuples and arrays, the declaration of properties to functions and, above all, the new " unknown " type.

We are going to take a brief look at these new features in the following part.

The new features in Angular 7

The declaration of properties on functions in TypeScript 3.1 allows the use of functions which are a bit closer to JavaScript. As in JavaScript, you can now declare properties of a function. Here is an example from the official documentation:

function readImage(path: string,
                   callback: (err: any, image: Image) => void) {
    // ...
}

readImage.sync = (path: string) => {
    const contents = fs.readFileSync(path);
    return decodeImageSync(contents);
}

The function `readImage` that reads an image asynchronously gets a new property `sync`, which contains a function on its own. This function reads an image, but in this example, it reads the image synchronously.

Another interesting feature is the so-called unknown type. Although this type has existed as early as TypeScript 3.0, it has only officially released in this Angular version. The unknown type is basically the type-safe counterpart of the data type any. With the data type any, TypeScript cannot make any further assumptions about the used data type and simply allows all conceivable accesses to such a declared variable. In the case of a variable declared with the data type unknown, no query is possible at first and instead all queries have to be secured by type guards.

let x: unknown;
// ...
if (typeof x === "string" || typeof x === "number") {
    x;  // string | number
}

Any other data type can be assigned to a variable of the type unknown. However, unknown can only assign to itself or to any variables:

let x: unknown;
x = 123;
x = 'fooBar';
x = [1, 2, 3];

let y1: any = x;
let y2: unknown = x;
let y3: object = x;  // Error
let y4: string = x;  // Error

Some of the inherent changes in the Angular framework are the new DoBootstrap interface which declares the lifecycle hook ngDoBootstrap(). With this interface, Angulars type safety is strengthened. This extension is of special relevance if you want to influence the application's Bootstrap, such as in areas of Angular Elements.

Within a CanLoad guard, the current UrlSegment[] can now be read, and the Angular router now issues a warning if a navigation operation is not initiated from an Angular controlled area of the DOM.

Finally, the platform server package of Angular (@angular/platform-server) in version 7 requires a new dependency, Domino 2.1, a server-side DOM implementation.

Update with Angular CLI to Angular 7

In order to update to Angular 7 it's best to also use the Angular platform. In this case, use the Angular CLI. First, the Angular CLI itself will update:

npm i -g @angular/cli

Afterwards, the update is possible per application in a simple way:

ng update @angular/cli @angular/core

Furthermore, the CLI itself offers some innovations and improvements. For example, you may notice that many applications also deliver the polyfill reflect-metadata in production, although it is actually only used for the development version of the application (more precisely for all versions of the application which are in the JIT mode). In the seventh version of the CLI, this polyfill is only added to the application during a DEV build in a separate build step.

This improvement makes the build scope and the deployed application smaller. In order to keep an eye on the size of the production build of the application, the new version uses the feature "Bundle Budgets". Bundle Budgets issues a warning by default if the initial bundle is over 2MB in size, and will throw an error if it is over 5MB.

A helpful innovation in the CLI are the now introduced "prompts". This extension from @angular/schematics should help the user discover new features. In the future, it will inform users that input is missing or certain features should need enabling. For example, with commands such as: ng new my-app or ng add @foo/bar. In the schematics such prompts can be set via the property x-prompt. See the following example from the Angular Schematic for ng new:

...
"routing": {
  "type": "boolean",
  "description": "Generates a routing module.",
  "default": false,
  "x-prompt": "Would you like to add Angular routing?"
},
...

Angular Elements

For Angular Elements the support for the official Shadow DOM specification improved. From now on, content can also project into an Angular Element from the outside. This is done via the Native API using <slot> elements.

Documentation (angular.io)

The Angular documentation found at https://angular.io/docs now also includes a complete section on the Angular CLI ( https://angular.io/cli). The Angular CLI section, which was previously found at https://cli.angular.io/ and the Angular CLI GitHub Repository, is now fully available at angular.io.

Angular Material/CDK

The Angular material and the CDK package receives some new functionality as part of this update. Users upgrading to version 7 can expect virtual scrolling and drag-and-drop functionality, among other things. In order to use both the virtual scrolling and the drag-and-drop functionality, the modules ScrollingModule and DragDropModule must integrate.

Virtual scrolling means that elements of a long list only render dynamically if they are in the visible area of the DOM. As a result, this saves users long loading times. The following code example shows virtual scrolling used in a project that already utilizes Angular Material.

import { ScrollingModule } from '@angular/cdk/scrolling';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    ScrollingModule,
    ScrollDispatchModule
    // ...
  ]
})
export class AppModule {}

The VirtualScrollViewport can then be used in the template of a corresponding component:

<cdk-virtual-scroll-viewport itemSize="50">
</cdk-virtual-scroll-viewport>

Technically, itemSize is a separate directive and specifies the height of a list entry in pixels. As an alternative to this parameter, you can also define your own VirtualScrollStrategy and then make it available by dependency injection using the VIRTUAL_SCROLL_STRATEGY token.

Within this ScrollViewport you can now iterate over a list:

<cdk-virtual-scroll-viewport itemSize="50">
  <div *cdkVirtualFor="let entry of list">Entry: {{entry}}</div>
</cdk-virtual-scroll-viewport>

The *cdkVirtualFor directive has the same syntax as the *ngFor directive.

Furthermore, with the DragDrop module, Angular CDK now also includes drag and drop support inside applications. The content within the drag-and-drop area automatically re-renders as soon as the user moves individual entries.

Angular Partners

Many new projects developed in Angular's vicinity are worth a look. An example is the Angular Console from the creators of the NX-Tools (@nrwl).

With the Angular Console, users can set up and develop Angular projects. It is a graphical management interface for Angular CLI projects including plug-ins (such as your own or 3rd party schematics).

Furthermore, NativeScript continues becoming more and more popular. With NativeScript users can build native apps for mobile devices using Angular without having to master their native languages.

Conclusion

Angular 7 is a major Angular release. It brings with it many small improvements and maintains the dependencies and further performance improvements. Therefore, this Angular release prepares for the future. To avoid a premature release with an incomplete version of the Ivy Renderer, the Angular team subjects the new renderer to an internal test phase. Provided that, in a few months the Ivy Renderer release will have smooth integration. With Angular CLI and Material/CDK, the Angular "platform" continuously broadens, and many partner projects are helping to expand the Angular environment.

# data[].attributes.attachment_link.title
Angular 7 release has arrived: A feature overview

# data[].attributes.attachment_link.description
Angular 7 has arrived and brings with it many small improvements. Karsten Sitterberg takes a closer look at the new features in this overview.

# data[].attributes.attachment_link.readable_text
Angular is a leading TypeScript based open source framework for front-end application development. It has evolved with its every new version. The advantages of Angular include a handy resource for utilizing HTML templates, delivering dependency injection and assembling data services for applications.

Angular 7 is the latest version with improved application performance. It offers a long list of other significant features and benefits. Through this article, our goal is to provide you with a summary of the features of Angular 7 from this release.

1. CLI prompt: With v7.0.2, the users will be able to save time with prompts for built-in features such as routing or SCSS support when running commands like ng-new, or ng-add @angular/material.

2. Enhanced application performance: Many developers continue to include the reflect-metadata polyfill in production, even when it is required only in the development phase. One of Angular 7's latest features is the automated removal of polyfills.ts file and inclusion as a build step when developers create the application in JIT mode.

3. Angular compatibility compiler: It is among the core Angular 7 benefits over Angular 6. The new release gets ngcc Angular node_module compatibility compiler. It converts node_modules complied using Angular Compatibility Compiler into node_modules that have appeared and compiled with TSC compiler transformer (ngtsc). Further, compiler conversions enable legacy packages leveraged by the Ivy rendering engine.

4. Angular material and component dev kit (CDK): Angular 7 offers visual improvements from the updated Material Design specification. Other enhancements in CDK and Angular Material include extensive lists of data, virtual scrolling, dynamic loading and unloading of parts of the DOM, and more.
a. Virtual scrolling: Benefits of angular include loading and unloading of items from the DOM, based on the visible parts of lists. It offers a faster user interface while scrolling through the long lists.

b. Drag and drop: Angular new feature provides an improved way to build and drop interfaces. It further provides to sort within a list, support for animations, free dragging, and transferring items between lists, along with custom drag handles placeholders and previews.

5. Improved accessibility for selects: Inclusion of native select element within the mat-form-field enables improved availability of applications. The native select provides the performance, availability and usability advantages while mat-select offers total control for the presentation options.

# data[].attributes.attachment_link.title
Angular 7 New Features: Why Businesses Should Switch to Angular 7

# data[].attributes.attachment_link.description
Angular is a leading TypeScript based open source framework for front-end application development. It has evolved with its every new version. The advantages of Angular include a handy resource for utilizing HTML templates, delivering dependency injection and assembling data services for applications. Angular 7 is the latest version with improved application performance.

# data[].attributes.attachment_link.readable_text
Angular 7 is finally released! Let's see the new Angular 7 features in more details.

Angular is the most popular platform for developing client-side (front-end) mobile and desktop web apps or SPAs. With the new release of Angular 7, we have a new set of powerful features that developers will appreciate which are added at many levels; the core framework, Angular Material library and the CLI. It has also enabled many major partner launches such as NativeScript (a framework for building native mobile apps with Angular), Angular Console (console for running Angular projects on your system),@angular/fire (for integrating Firebase with Angular) and StackBlitz (an online IDE for Angular).

In this post we are going to summarize some of the most important new features officially announced by the Angular Team.

This version is a major release that involves the complete platform, including the Angular core framework, Angular Material, and the Command Line Interface or CLI.

Angular 7 brings many new features, particularly for the tool-chain.

v7 introduces many new changes in the Component Dev Kit or CDK and the Material Design library such as the Drag and Drop support and Virtual Scrolling.

In this release, the team has also focused on the Ivy renderer and how to make it smaller and faster by adding support for animation and improving the @NgModule integration etc. But Ivy is not yet ready for prime time.

These are the new features introduced by Angular 7 for developers.

Support for Node 10

Node v10 is the latest version of the Node.js platform which is used by the Angular CLI and most front-end development tools nowadays. v7 has now support for v10 of Node but v8 is also still supported.

Support for TypeScript 3.1

TypeScript 3.1 is the latest version of TypeScript, the official langauge for Angular. Angular 7 requires the latest version of TypeScript.

The CLI Prompts

Angular 7 introduces a new nice feature that allows the CLI to prompt users when executing commands like ng new or ng add. This enables users to make decisions for chosing the right built-in features to include or ignore at many points of the life-cycle of the project's creation and configuration.

As the Angular team is always focusing on making the CLI a powerful tool at the disposal of developers, the new CLI prompts feature is another step toward achieving that goal. More than often, when you use common commands like ng new or ng add, you don't have much control except what you pass as arguments in the first place. But what if you intend to add support for routing in your project but did not specify the --routing switch? You need to stop the command and start over. What, about when you want to avoid installing some unecessary dependencies? Aside from stopping the running command, you have no other options

But thanks to Angular CLI 7, this has changed. Now the CLI supports user prompts. For example, if you run the ng new angular-7-project, you'll presented with a nice prompt asking if you xant to include routing in your project. If you also like to use a specific stylesheet format? The CLI will present you with a list of choices between CSS, SCSS and SASS.

Not just that, you have complete control over the CLI prompts. You can simply add a schematic.json file to instruct the Angular 7 CLI to show or hide specific prompts.

CLI Prompts are also added to Angular Shematics which means developers of CLI tools can take advantage of it to prompt users for more information about customizations and act accordingly. This can be done using an x-prompt key to a Schematics collection.

Angular Performance: CLI Budgets by Default

The obvious fact is that Angular 7 is the best Angular yet! It's more performant and faster than any previou version including v6.

Upgrade from v6 to v7 consumes less time (no more than ten minutes according to the official docs). Also the upgrade process is more easier thanks to the work done in v6. Also the core framework has better performace with the new features such as the virtual scrolling detailed on below section.

But that's not the end of the story. Angular 7 gives importance to the final app bundle not just the framework by correcting a common production bug where the reflect-metadata polyfill gets added in the production build as well but it's only required in development so v7 will remove automatically from your final app's bundle.

For generating smaller bundles, new Angular 7 projects are using the Bundle Budgets in the CLI by default which were optional in v6.

Developers will get warnings when the initial bundle sizes more than 2MB and an error when it has a size of 5MB. But you can easliy change the default budgets from the angular.json file.

Virtual Scrolling: ScrollingModule

Virual scrolling is a technique used by popular UI libraries like Ionic for enabling developers to build efficient UIs. Loading hundreds of items could be very slow in most browsers, virtual scrolling takes performance in consideration and it's particularly useful for mobile apps when you need to scroll large lists without affecting the app's performance and by result the user's experience.

Now the Angular 7 CDK includes support for virtual scrolling via the ScrollingModule module. You can use the <cdk-virtual-scroll-viewport> to display large lists of data by only rendering the elements that actually fit on the visible part of the screen.

You can read more information from Angular Material docs.

Support for Drag and Drop: DragDropModule

With Angular 7, drag and drop support is added on the CDK. Items are rendered as long as the user is moving elements. Developers can use methods like moveItemInArray for reordering lists or transferArrayItem for moving items between lists.

You can read more about drag and drop.

Support for <Slot> HTML Element with Angular Elements

<slot> is a new standard HTML tag that was introduced by the Web Component specification.

You can now write compnenets like the following example:

You can then use this Angular component as a web component:

New Features of Angular 6.1

Angular 6.1 is released in 2018-07-25 with multiple bug fixes and new features.

Angular CLI is also updated to Angular v6.1.1.

Angular 6.1 is the last planned minor version of Angular 6. That means, the Angular team will start working toward releasing Angular 7, the next major version.

Angular 6 major release has a strong focus on the developer toolchain i.e Angular CLI which introduces powerful features such as project workspaces and Schematics etc. Now Angular 7 is on the road after this latest minor version which will be focused on new features such as the Ivy Renderer.

Let's see the new features and how can make Angular developer lives easier.

This new minor release has over 70 bugfixes and 20 new features!

What's New with Angular 6.1?

Angular 6.1 brings many new features to Angular such as:

You can, now configure Angular Router to remember and restore the position of scroll by setting scrollPositionRestoration to enabled.

You can use ShadowDOM v1 API for View Encapsulation to specify how CSS is encapsulated in a component (encapsulation: ViewEncapsulation.ShadowDom).

You can use async/await with Jasmine etc.

You can use a new pipe that allows you to iterate over a map or object and display key/value pairs in the template.

Support for TypeScript 2.9: With Angular 6.1, you'll be able to use TypeScript 2.8 and TypeScript 2.9

Angular CLI v6.1.1: Angular CLI v6.1.1 is also released with many new features that you can see below.

Angular CLI v6.1.1 New Features

Support for TS 2.8 and 2.9,

Support for Angular 6.1,

The use of ES2015 Modules for all files,

The new --vendor-source-map switch that allows you to have source maps for vendor packages. This is useful for debugging your production packages.

Conclusion

Angular 6.1 is the latest minor release. Now Angular team is on the road to start working on Angular 7.

Now this post is updated with the new Angular 7 features as v7 was just released.

# data[].attributes.attachment_link.description
Angular 7 is finally released! Let's see the new Angular 7 features in more details. Angular is the most popular platform for developing client-side (front-end) mobile and desktop web apps or SPAs. With the new release of Angular 7, we have a new set of powerful features that developers will appreciate which are added at many levels; the core framework, Angular Material library and the CLI.

# data[].attributes.attachment_link.readable_text
Angular 7.0.0 is here!

Not a lot of new features in this release: the Angular team is mainly focused on the Ivy project, rewriting the Angular compiler and runtime code to make it smaller, better, faster. But Ivy is not ready for prime time yet.

So don't expect a lot of shiny things in Angular 7.0: there was not enough material to make a video as we did for Angular 5 or Angular 6. This will be a short blog post for once, and a fast and easy upgrade for you!

TypeScript 3.1 support

One of the main new features is the support of TypeScript 3.1, which is the latest release! It is in fact mandatory to bump to TS 3.1 for Angular 7. Usually Angular lags a few releases behind, so it's great to be able to use the latest TypeScript version for once! You can check out what was introduced in TypeScript 3.0 and TypeScript 3.1 on the Microsoft blog.

Angular compilation options

As you may know, you can define compilerOptions for TypeScript and angularCompilerOptions for Angular in your tsconfig.json files:

TypeScript allows you to extend the compilerOptions of another file (see the extends part in the example), but it was not doing anything with the Angular compiler options. The Angular compiler is now fixed, and you can define Angular compiler options in a base config, then extend them in another file. The options will be merged with the one defined in the inheriting config file, as they are for the TypeScript compiler options!

Ivy progress

The rewrite is making progress, but Ivy is still not usable in this release. If you refer to the official feature tracking, a good chunk of the work is done. But in reality, there is still a long way to go before we can use it.

Ivy has several pieces:

ngtsc: the compiler that compiles your Angular application and generates JavaScript from your HTML templates. This piece of code has made good progress but still misses a few features.

ngcc: a tool that explores all the dependencies you have, to convert existing code into "Ivy compatible" code. This is still very early stage, and barely usable at the moment if you don't know how to workaround a few issues (Olivier and Pete from the Angular team were nice enough to help me).

the renderer itself, which takes the generated code and makes the magic happen at runtime. It still moves a lot, as new optimizations and new issues are found by the team.

Another part that is eagerly awaited is the support of "runtime i18n". The implementation work has just started this week, so this is also far from being done.

I gave Ivy a few shots lately but it is definitely not ready for prime time yet. Internally at Google, the Angular team needs to migrate the huge number of projects they have to gather feedback and fix issues. So it will take a few more months.

But you can check it out yourself, as the CLI added an --experimental-ivy flag to generate an application with the configuration needed to try it.

Note that the change detection is not working as I'm writing these lines, so this is very limited right now :).

Slots with Angular Elements

It is possible to use ViewEncapsulation.ShadowDom since Angular 6.1, which is great for Angular Elements (Angular components packaged as Web components that you can use alone). But there was a missing feature to be able to use<slot>, a new standard HTML element, introduced by the Web Component specification. This feature is now available, enabling components with a template like:

That can later be used as an Angular Element like this:

Router

A new warning has been added if you try to trigger a navigation outside of the Angular zone, As it doesn't work if you do so, Angular now logs a warning (only in development mode). This is pretty rare but can happen for example if you try to redirect your users when an error occurs in the application by providing a custom ErrorHandler (as the handleError method will run outside the ngZone to avoid a potential infinite loop). The warning looks like:

Sadly, this introduces warnings in your unit tests if you use the router in some of them, and looks like it's an issue in Angular itself (see this issue if you want to add a thumb up).

Another internal work that we can't really see has been the rewrite of the router to use a single Observable under the hood, that will automatically cancel the previous navigations. It will not affect you, but should fix a bunch of issues when multiple navigations were triggered at the same time and will allow new features more easily in the future.

Deprecations

As it's usually the case with major releases, a few things have been deprecated. If you are using <ngForm> to declare a form in your template (you don't have to, as form also activates the NgForm directive), this selector is now deprecated and should be replaced by<ng-form>.

As you can see, the release contains very few interesting features, but Ivy is making progress and Angular 8.0 will probably have more cool stuff!

In the meantime, the upgrade of your applications should be very easy.

All our materials ( ebook, online training and training) are up-to-date with these changes if you want to learn more!

# data[].attributes.attachment_link.description
Angular 7 is out! Read about the support of the new versions of TypeScript, the progress made on Ivy, the router features and the deprecations introduced!

# data[].attributes.attachment_link.title
What's new in Angular 7? - Angular Training

# data[].attributes.attachment_link.description
Angular 7 was released a few weeks ago, and quite a few interesting projects have been launched or updated alongside with it. For a full presentation of those updates, you can watch this webinar that...

# data[].attributes.attachment_link.readable_text
Angular 7 was just released and while it looks a little light on new features, there are some very interesting new tooling changes as well as some great features to improve performance. And continuing the recent trend from previous versions, upgrading is a breeze (and actually faster than ever).

Additions & New Features

The list below is just a short summary of the new features in this release but make sure you find your way down to the further reading section and check out even more this release has to offer!

CLI Prompts

The Angular team has consistently focused on improving the tools available to developers and the new CLI prompts are no different. Usually when you run commands like ng new or ng add, it's a single pass. Forget to include routing? Ah, tough break. Wanted to skip installs? Well, I guess you can terminate the command.

Not with the new CLI. Now the CLI responds with prompts. Simply try ng new myangular7app and what do you get? A brand new prompt asking if you would like to add routing. Want to try a different stylesheet format? Don't worry. The CLI will let you select between CSS, SCSS, SASS and more (or actually LESS HA!). And the great news, it's customizable! Add a schematic.json using the Schematic CLI and you can tell the Angular CLI which prompts to execute! Find out more about schematics in the further reading section.

The Angular Material CDK

ScrollingModule

As many mobile frameworks have started to make the move toward dynamically loading data such as images or long lists, Angular has followed suit by adding the ScrollingModule to allow for virtual scrolling. As elements gain or lose visibility, they are virtually loaded and unloaded from the DOM. Performance is greatly increased to the user's eyes. Next time you have a potentially large list of items for your users to scroll, stick it in a cdk-virtual-scroll-viewport component and take advantage of the performance boost!

DragDropModule

Now you can remain entirely within the Angular Material module and implement drag and drop support including reordering lists and transferring items between lists. The CDK includes automatic rendering, drag handlers, drop handlers and even the ability to transfer data. Don't like the standard drag animation? No sweat. It's Angular; it's yours to override.

As for Angular Material itself, version 7 comes with some updated component styles to follow with the new Material Design specification.

Application Performance

First things first: Angular 7 is even faster than previous versions. The upgrade is faster (less than 10 minutes for many apps according to the official announcement), the framework is faster, the virtual scrolling CDK module detailed above makes apps run with better performance.

Here is where things get interesting: Angular is not only dedicated to making the framework as small as possible, it's also dedicated to making your apps as small as possible! They've corrected a common production mistake where the reflect-metadata polyfill is included in production. V7 automatically removes it.

New projects are also now defaulted using Budget Bundles which work to notify you when your app is reaching size limits. By default, you get warnings when you reach 2MB and errors at 5MB. And when you need a little more space, just jump in your angular.json and adjust as necessary.

Updated Dependencies

Angular is up to Typescript 3.1, RxJS is up to 6.3 and Node 10 support has been added! Check out the release notes in (link below in further reading).

Ivy Renderer

The next generation ready-when-it's-ready renderer...still isn't quite ready. The Angular team won't commit to a final timeline but the development is still active and progressing. They note backwards compatibility validation is beginning and while no official team member has commented, a few fervent followers of the commits are expecting a complete beta to launch some time during V7's lifespan with a possible official release alongside version 8. Follow the progress yourself on the GitHub Ivy Renderer issue under the official Angular repo. The best news? They fully expect that Ivy can be released in a minor release as long as it's fully tested and validated. So who knows? Maybe we'll see it in v7 after all.

Upgrading

Could this be any easier?

For a large majority of the Angular apps out there, and assuming you're already running on Angular 6 and RxJS 6, you're simply going to have to run a single command:

And if you're using Angular Material, just follow with this command:

If something seems a bit awry, make sure you visit the Update Guide to see if you need any special commands.

Further Reading

Make sure you check out even more of the Angular 7 resources below:

# data[].attributes.attachment_link.title
Angular 7: Upgrading & Summary of New Features

# data[].attributes.attachment_link.description
Angular 7 was just released and while it looks a little light on new features, there are some very interesting new tooling changes as well as some great features to improve performance. And continuing the recent trend from previous versions, upgrading is a breeze (and actually faster than ever).