In this post, we are going to take a closer look at changes we expect on both Angular Material 7 and Content Development Kit(CDK). While this two are separate packages, they often go hand in hand, as Angular Material relies on some packages found in Angular CDK. But you can use Angular CDK independent of Angular Material and with a UI framework of your choice.

We expect Angular Material 7 to be released alongside Angular 7 in the next few weeks. Since I last covered news on Angular 7, there have been new features added to both Material 7 and CDK. On top of features, more of Angular Material Components have been slightly redesigned to conform to the latest standards of Material Design Specification, released earlier this year. So, without Further Ado

Scrolling Enhancement

The scrolling package is not new in Angular Material, but it has been greatly enhanced in Angular 7. This package is meant to provides helper directives that react to scrolling events and is part of Angular CDK. Here are some of the features that have been added:

Virtual Scrolling

This is the most popular feature by far. This is meant to display large list of elements (normally rendered with *ngFor) with improved performance, by only rendering elements on display. If you had hundreds of elements to display, there is no point to show all of them. Especially if they are not on user’s viewport. So, to improve performance, it will display only elements on display and switch them for new ones, while removing old once as the user scrolls down or up. This provides a huge performance gain, as only a section of the list is being rendered.

ViewportRuler

This is a simple service that provides you with the ability to measure the bound of the browser viewport. A browser’s viewport is the visible area of the browser’s webpage. You can learn more about this feature here.

Ripples (Angular Material)

This is a new Angular Material 7 Component, that allows you to visually indicate to the user when they touch or click on an HTML element like a button. It uses ripples to indicate the point of contact on the element with this feature enabled. It can be used to provide feedback to the user, indicating that their input was received or detected. To use this feature, simply import the MatRippleModule from angular material:

import { MatRippleModule } from '@angular/material/core';

And then, add the matRipple directive to the element you want to add the ripple effect feedback:

<div matRipple class="my-ripple-container"></div>

You can learn more about this feature here and find a demo here.

Text Field

Text Field package is part of Angular CDK and provides a set of utilities for both text and text area inputs. As of the time of writing this, it includes utilities to monitor autofill state and resize text field to fit content. With monitor autofill state, you can easily monitor whether the user has used autofill in your forms or individual form controls and react accordingly. The package provides a cdkAutofill directive to trigger a method when the autofill status has changed. To use this feature, you just need to import TextFieldModule from CDK:

import { TextFieldModule } from '@angular/cdk/text-field';

And then, add the cdkAutofill directive to your input control, passing the method to be triggered.

<input matInput (cdkAutofill)="firstNameAutofilled = $event.isAutofilled" />

The second feature allows you to create text areas that automatically resize with content. To use this feature, simply import the TextFieldModule from CDK:

import { TextFieldModule } from '@angular/cdk/text-field';

And then add the directive to your text area input control:

<textarea
  matInput
  cdkTextareaAutosize
  cdkAutosizeMinRows="2"
  cdkAutosizeMaxRows="5"
></textarea>

You can learn more about this feature here.

Platform

This is an Angular CDK Service that helps you determine the platform the angular app is running on. The service provides properties and methods to help you determine the Operating System, Browser and capabilities of the platform the angular app is running on. For instance, it provides you with a getSupportedInputTypes method that helps you determine the supported input controls by the browser. You can also check whether the operating system (IOS) is Android or IOS using the ANDROID and IOS Boolean properties respectively. You can learn more about this feature here.

Drag and Drop

This is one of the most exciting features coming to Angular 7, it provides you with an easy way to create drag and drop interfaces in Angular. You can use it to allow users to drag and place a UI element anywhere in the browser tab. The only reason this is not at the top is because I have covered it before, twice in fact. One practical application is reordering lists or moving items between lists.

(In fact, if you can think more practical application of this feature, feel free to drop them in the comment section below). I created a working demo (using bootstrap as the UI framework) of this feature earlier this week. You can find the demo here and the accompanying post here. You can learn more about this feature here.