Angular Material 2.0.0 beta 10 released

Over 140 bugfixes, breaking changes, new features are available in new major version
30 August 2017   5014

New release of Angular Material is available now. Version 2.0.0 is major and provides giant amount of cool new stuff.

What is Angular Material? 

Material Design components for Angular. The goal is to build a set of high-quality UI components built with Angular and TypeScript, following the Material Design spec. These components will serve as an example of how to write Angular code following best practices.

"High-quality" means:

  • Internationalized and accessible so that all users can use them.
  • Straightforward APIs that don't confuse developers.
  • Behave as expected across a wide variety of use-cases without bugs.
  • Behavior is well-tested with both unit and integration tests.
  • Customizable within the bounds of the Material Design specification.
  • Performance cost is minimized.
  • Code is clean and well-documented to serve as an example for Angular devs.

What's new in version 2.0.0? 

  • Over 140 bug fixes
  • Nested menus
  • Autocomplete supports md-optgroup
  • Overlay moved to @angular/cdk
  • New component MdSelectionList
  • md-input-container renamed to md-form-field (while still being backwards compatible)
  • Almost all components now use OnPush change detection (dialog being the exception)
  • You can now get back the EmbeddedViewRef when attaching a TemplatePortal
  • MdSidenav has been split into MdSidenav and MdDrawer. The MdSidenav is now meant to be used for top-level application navigation, while the drawer is meant to be used for more local split views. While there are no differences introduced between the two in this release, future releases will see different features added to each

Major changes:

  • Imports from @angular/cdk are now scoped to a specific sub-package. For example, if you previously had:
import {LiveAnnouncer, Overlay, Directionality} from '@angular/cdk';

You will now need to write:

import {LiveAnnouncer} from '@angular/cdk/a11y';
import {Directionality} from '@angular/cdk/bidi';
import {Overlay} from '@angular/cdk/overlay';

This helps ensure you're only pulling in the pieces of the cdk being used as well as providing more context about what an imported symbol is being used for.

The current set of public @angular/cdk subpackages are: a11y, bidi, coercion, collections, keycodes, observers, overlay, platform, portal, rxjs, scrolling, table.

 If you used the following code,

<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>

you should switch it to

  <md-chip [selectable]="selectable">My Chip</md-chip>

You can view all changes list at GitHub (it's huge!).

Frontend News Digest 11 - 17.01

Learn about big Googles plans about cookies, TypeScript 3.8 Beta release, new Microsoft Edge built on Chromium and even more
17 January 2020   82

Greetings! I hope your week went great! Here's new frontend technologies news digest.

Learn that Google will phase out user-agent strings in Chrome, check the tips for building the apps for new, Chromium-based Microsoft Edge, check the speech of Monica Lent about building resilient frontend architecture at GOTO 2019 and other interesting articles, guides, updates, etc


  • Why should you use HSL color representation in CSS?

Learn why and (the main thing) how to sue the HSL color representation in CSS


  • Google to phase out user-agent strings in Chrome

Big company's move - Chrome plans to shift to using Client Hints instead of user-agent strings

  • Intent to experiment: Web NFC

Chrome experiments with the NFC, a lot of interesting things may appear

  • Get started building extensions for the new Microsoft Edge

If you would like to create any app for the new Microsoft browser - check this article and be advised its built on Chromium, so most existing extensions built for Chrome will work without any changes

  • Google plans to kill off third-party cookies in Chrome ‘within 2 years’

The grace period of 2 years is pretty a lot, but, an IT giant is asking advertisment industry to help create more privacy-based alternative to cookies

  • Microsoft spots malicious npm package stealing data from UNIX systems

This malicious package was active on the npm for two weeks and downloaded ‘at least 32 times’ before it was spotted by Microsoft

  • Array reduce vs Chaining vs for Loop 

Check the difference between different approaches of operating an array


  • Upgrading to the new Microsoft Edge

The newest version of the Microsoft's web browser is built on Chromium, so this can really change a lot

  • Announcing TypeScript 3.8 Beta

The beta of the new version Microsoft-backed strict syntactical superset of JavaScript is available  - a good news for all TS coders


  • GOTO 2019 • Building Resilient Frontend Architecture • Monica Lent