Highlights

• Column resizing for tables is now in experimental (198911)
• Selection list now supports a single selection mode. Enable it with the multiple input set to false.
• FakeMatIconRegistry has been added for unit testing.
• Added a new Sass mixin, mat-strong-focus-indicators, that can be used to add a stronger focus
  indicator to Angular Material components

cdk

material

Deprecations:

• MAT_LABEL_GLOBAL_OPTIONS exported in
  @angular/material/core is deprecated. Use MAT_FORM_FIELD_DEFAULT_OPTIONS
  from @angular/material/form-field. Note that the property float is
  now matching the input name floatLabel.
• FloatLabelType exported in @angular/material/core is
  deprecated. Import the symbol from @angular/material/from-field.

google-maps

cdk-experimental

material-experimental

material

Highlights

New @angular/cdk/testing infrastructure and Angular Material test harnesses

Testing components has historically relied on using implementation details such as CSS selectors to
find components and to trigger events. This meant that whenever a component library changed its
implementation, all of the tests relying on those components would need to be updated.

In version 9, we are introducing component harnesses, which offer an alternative way to test
components. By abstracting away the implementation details, you can make sure your unit tests are
correctly scoped and less brittle.

Most of Angular Material's components can now be tested via harnesses, and we are making harnesses
available to any component author as part of the Component Dev Kit (CDK).

Here's an example test before harnesses:

 it('should switch to bug report template', async () => {
    expect(fixture.debugElement.query('bug-report-form')).toBeNull();
    const selectTrigger = fixture.debugElement.query(By.css('.mat-select-trigger'));
    selectTrigger.triggerEventHandler('click', {});
    fixture.detectChanges();
    await fixture.whenStable();
    const options = document.querySelectorAll('.mat-select-panel mat-option');
    options[1].click(); // Click the second option, "Bug".
    fixture.detectChanges();
    await fixture.whenStable();
    expect(fixture.debugElement.query('bug-report-form')).not.toBeNull();
  });

And the same test with harnesses:

 it('should switch to bug report template', async () => {
    expect(fixture.debugElement.query('bug-report-form')).toBeNull();
    const select = await loader.getHarness(MatSelect);
    await select.clickOptions({text: 'Bug'});
    expect(fixture.debugElement.query('bug-report-form')).not.toBeNull();
  });

Learn more about Angular Material's component harnesses or building your own with the CDK.

New @angular/google-maps package!

Earlier this year, we changed the name of this repo to "angular/components" to emphasize our goal
to provide more than Material Design components. The 9.0.0 release includes one of the next new
features in that regard- a new package that wraps the Google Maps JavaScript API in an easy-to-use Angular component.

You can see the documentation on GitHub for the time being.

Big thanks to @mbehrlich for contributing this!

New cdk/clipboard subpackage containing helpers for working with the clipboard.

This new capability for @angular/cdk provides some convenient helpers for dealing with
the clipboard. See the documentation for more information.

Big thanks to @xkxx for contributing this!

Breaking changes

We no longer have a direct depedency on tslib. Instead it is now listed a peerDependency.
This matches Angular framework.

Users not using the Angular CLI will need to manually install tslib via;

yarn add tslib
# or
npm install tslib --save

material

Deprecations:

• checkbox: MAT_CHECKBOX_CLICK_ACTION is deprecated, use MAT_CHECKBOX_DEFAULT_OPTIONS

cdk

youtube-player

google-maps

material-experimental

cdk-experimental