vibranium-vivarium

6.0.0 vibranium-vivarium (2018-05-03)

Highlights

• MatTree component is now available, @tinayuangao recently gave a talk at ng-conf about the new component
• <mat-table> and <cdk-table> now native <table> elements in addition to the existing display: flex based layout
• MatTable now supports having an optional footer row
• Schematics are now available for Angular Material, @jelbourn recently gave a talk at ng-conf about using schematics
• MatTabs content can now be lazy loaded
• MatBadge and MatBottomSheet components are now available
• @angular/cdk/overlay has a new positioning strategy available, FlexibleConnectedPositionStrategy, which intelligently handles sizing and positioning to ensure that overlay contents always remain on the screen
• MatIcon now allows SVG icons to be registered from strings
• @angular/cdk/keycodes now includes most keycodes you might need for building a web application
• 130+ bug fixes
• Docs for v5 are now available at v5.material.angular.io
• A version picker is available material.angular.io to switch between docs versions

Upgrading to Angular Material 6.0

With the Angular CLI v6.0+, you can use the ng update command to automatically migrate to the new APIs

ng update @angular/material

NOTE: There may be some cases where the tool may be unable to automatically migrate, but will notify you of those cases

Breaking Changes

• A number of APIs that were deprecated during beta have been removed, see here for complete list
• See ng update tooling above to automatically migrate to the new APIs

Bug Fixes

• autocomplete: panel direction not being updated if the trigger direction changes (#10916) (8c30cee)
• button-toggle: not usable in high contrast mode (#11097) (dd2f465)
• dialog: add generic parameter for the dialog result to open method (#11059) (bf1bdc0)
• form-field: inconsistent underline height at different DPIs (#11062) (0f7d503)
• form-field: scrollbars appear on autosize textarea in chrome (#10811) (385f96d)
• form-field,select: handle form field controls inside toolbar (#10627) (1a3993e)
• list: selection list always firing change event for selectAll and deselectAll (#11029) (54c0b00)
• menu: not updating panel direction after init (#11070) (294ba3c)
• menu: unable to open same sub-menu from different triggers and not picking up indirect descendant items (#10132) (5393bfe)
• overlay: error when rendering flexible overlay on the server (#11072) (422d102)
• paginator: handle negative pageSize and pageIndex correctly (#11068) (3f5e481)
• select: losing focus position when tabbing away after clicking inside multi select (#10905) (c6ad1f8)
• select: unable to toggle multi select option after using the mouse (#11061) (01d0993)
• sidenav: box shadow visible while closed when rendering on the server (#10969) (cfe6c1d)

6.0.0-rc.14

Bug Fixes

• card: flat card selector not working (#11028) (b67813e), closes #11014
• ci: Shard tests on CI across 3 browsers (#11048) (a647579)
• overlay: always dispatch keyboard events to top overlay in OverlayKeyboardDispatcher (#10807) (d96fa07), closes #10799
• schematics: allow more tsconfig locations for ng update (#11058) (7bbc040)

6.0.0-rc.12

Bug Fixes

• breakpoint-observer: split comma separated queries into separte queries (#10789) (7c1549a)
• datepicker: high contrast accessibility improvements (#10363) (4d23b08)
• datepicker: update popup direction if datepicker direction changes (#10871) (4cc72b8)
• directionality: complete change event on destroy (#10826) (b057391)
• form-field: incorrect label position for outline style in prod mode (#10803) (7484321)
• menu: svg icons not aligned inside menu item (#10837) (2af9c35), closes #10832
• schematics: correct path to ng-update entry-point (#10850) (6a82c65)
• schematics: ignore e2e projects w/ ng add (#10883) (5554506)
• schematics: make v6 migration work (#10853) (c9f5be6)
• scrolling: complete ScrollDispatcher.scrolled on destroy (#10794) (41be069)
• select: open method triggered twice on click (#7619) (991daac)
• selection-list: toggle newly-focused item when pressing arrow key + shift (#10828) (975fe7e)
• stepper: not resetting to first step when some of the steps aren't editable (#10804) (5df8d01), closes #10801
• table: Allow any iterable to be used as for columns in headerrow and row defs (#10822) (92e5f55)
• tree: make toggle non-recursive by default (#10879) (5920bc3)
• stepper: add animationDone event (#10752) (358a12d), closes #9087

cardboard-kangaroo

Highlights

• Tweak peer deps to avoid warnings when updating Angular to 6.0

6.0.0-rc.5

Bug Fixes

• schematics: move ng-update under correct location (d98fb35)

6.0.0-rc.4

Bug Fixes

• schematics: add ng-update config to package.json (#10844) (0a3cfa7)

6.0.0-rc.3

Bug Fixes

• button-toggle: selected value not being maintained when changing value while toggles are being swapped out (#10707) (dec91ce), closes #10690
• focus-monitor: server-side rendering error when using focusVia (#10729) (44a0a4f)
• radio: checked radio button indistinguishable in high contrast mode (#10753) (a74099f)
• schematics: schematics now functioning with Angular CLI v6 (#10703) (023e8f4)

6.0.0-rc.2

Features

• coercion: add utility for coercing CSS values (#10654) (e30824c)
• icon: allow SVG icons to be registered from strings (#10757) (57efa13), closes #3132
• overlay: add the ability to set the default offsets on FlexibleConnectedPositionStrategy (#10555) (bcff93e)
• table: support native table selectors (#10594) (7774da2)

Bug Fixes

• autocomplete: panel width not being updated on window resize (#10629) (2dc4e70)
• badge: incorrectly handling rtl (#10630) (9c1f8a9)
• button-toggle: changed after checked error for repeated toggles with a preselected value (#10612) (9a3d3e8)
• button-toggle: setting blank aria-label attribute by default (#10605) (95dba59)
• datepicker: avoid accidental form submissions through calendar buttons (#10515) (edb57f9), closes #10514
• datepicker: close datepicker popup on alt + up arrow (#10662) (446ef66)
• datepicker: export MatCalendarHeader (#10633) (5df1af6)
• datepicker: nested animation not working (#10355) (9fff92f), closes #9134
• datepicker: overly broad selector in theme (#10372) (5b7a6a3)
• datepicker: reformat valid values on blur (#10777) (603dfa4), closes #10645
• focus-monitor: hitting ngzone when using focusVia (#10608) (b38b966)
• focus-trap: wrong element being checked when logging deprecation warning (#10578) (52493d1)
• form-field: run change detection when prefix or suffix changes (#10670) (515cc06)
• form-field: server-side rendering error with outline appearance (#10719) (39887da)
• overlay: centered flexible positioning not working in some browsers (#10701) (dfc3b02)
• overlay: incorrect bottom offset using upward-flowing flexible position with a viewport margin (#10650) (306b704)
• platform: change isBrowser check to use Angular PLATFORM_ID (#10659) (f023579)
• progress-spinner: set spinner width to match diameter. (#10314) (c64cb7e)
• sidenav: remove dependency on OverlayModule (#10357) (27ef2dc)
• slide-toggle: run timeout outside the NgZone (#10655) (6f7765e)
• stepper: header icon collapsing with very long labels (#10341) (5b5f2ee), closes #10332
• stepper: horizontal stepper cutting off bottom part of content (#10644) (4fbde10), closes #10634
• table: MatTableDataSource incorrectly sorting zero (#10561) (bcb5697), closes #10556
• table,sort,paginator: incorrect spacing in rtl (#10617) (46ca6ce)
• tabs: hide mat-tab-nav-bar ink bar when no link is active (#9701) (51206ee), closes #9671
• tabs: tab content portal not being cleaned up on destroy (#10661) (2e3393a)
• theme: apply base theme classes at location the theme is included (#10737) (2aba8ab)
• tooltip: error when updating position while closed (#10704) (6449ae1)
• tree: fix exported symbol cannot be named error. (#10626) (6729b6d)
• tree: fix nested node cannot expand/collapse multiple times (#10671) (5570beb)
• tree: fix nested node is not working (#10635) (7857b92)

6.0.0-rc.0

Known issues

• MatButtonToggleGroup causes ExpressionChangedAfterItHasBeenCheckedError (#10607)
• focus-trap: wrong element being checked when logging deprecation warning (#10578)

Bug Fixes

• bottom-sheet: handle overflowing content (#10533) (cb6d469)
• datepicker: add back MAT_DATE_LOCALE_PROVIDER (#10602) (7fd7ad3)
• datepicker: incorrect icon color (#10458) (4e298a6)
• datepicker: set canPush to false for position strategy (#10609) (67c7348)
• drawer: better handling of high contrast mode (#10418) (ff2860f)
• input: inaccurate textarea check during server-side render (#10467) (dda1d04)
• overlay: CdkConnectedOverlay ignoring offset from position config (#10451) (1659004)
• select: MatOption state change stream not being completed (#10540) (b8bb62f)
• slider: unable to slide to max value under certain conditions (#10364) (d50fd3d), closes #10148
• sort: add aria-sort to host when sorted (#6891) (63f713f)
• tree: fix the MatTreeNodeOutlet not exported issue (#10581) (0b8240c)
• tree: improve nested tree node & fix nested tree control (#10454) (2ddc257)

Features

• cdk/keycodes: add 0 and 9 numerical keypad codes (#10562) (d5cd0d6)
• stepper: allow number icon to be customized and expose template context variables (#10516) (946fd84), closes #10513
• tabs: Allow tab ink bar positioning to be determined with a provided method. (#9972) (02f5256)
• tooltip: allow for position to be updated while open (#10362) (04045d2)

6.0.0-beta.5

This release contains many breaking changes due to the deletion of deprecated targets. We are
currently working on a tool that will help migrate your app if you are affected by these changes.
We expect to have the tool ready when we release version 6.0.0.

BREAKING CHANGES

• typography: The $mat-font-family variable has been removed. Use the Material typography or redeclare in your project $mat-font-family: Roboto, 'Helvetica Neue', sans-serif;.
• datepicker: MatDatePicker now requires an animations module to be loaded
• datepicker: selectedChanged has been removed. Use dateChange or dateInput from MatDatepickerInput.
• button-toggle: selected is no longer an input and is now readonly.
• snack-bar: SHOW_ANIMATION has been removed.
• HIDE_ANIMATION has been removed.
• icon: The _document parameter in the MatIconRegistry constructor is now required.
• list: selectionChange on the MatListOption, which was deprecated in 5.0.0 has been removed. Use selectionChange on the MatSelectionList instead.
• MatListOptionChange which was deprecated in 5.0.0 has been removed.
• slider: thumb-label which was deprecated in 5.0.0 has been removed. Use thumbLabel instead.
• tick-interval which was deprecated in 5.0.0 has been removed. Use tickInterval instead.
• tooltip: tooltip-position which was deprecated in 5.0.0 has been removed. Use matTooltipPosition instead.
• The _defaultOptions parameter in the MatTooltip constructor is now required.
• select: onOpen, which was deprecated in 5.0.0, has been removed.
• onClose, which was deprecated in 5.0.0, has been removed.
• change, which was deprecated in 5.0.0, has been removed.
• chips: remove which was deprecated in 5.0.0 has been removed. Use removed instead.
• destroy which was deprecated in 5.0.0 has been removed. Use destroyed instead.
• text-field: The _ngZone parameter in the CdkTextareaAutosize constructor is now required.
• sidenav: The MatDrawerToggleResult class has been turned into an type.
• The promise returned from open, close and toggle now resolves with the MatDrawerToggleResult type rather than the class.
• align which was deprecated in 5.0.0 has been removed. Use position instead.
• open which was deprecated in 5.0.0 has been removed. Use opened instead.
• close which was deprecated in 5.0.0 has been removed. Use closed instead.
• align-changed which was deprecated in 5.0.0 has been removed. Use positionChanged.
• form-field: - dividerColor which was deprecated in 5.0.0 has been removed. Use color instead.

• floatPlaceholder which was deprecated in 5.0.0 has been removed. Use floatLabel instead.

• overlay: ConnectedOverlayDirective which was deprecated in 5.0.0 has been removed. Use CdkConnectedOverlay instead.
• OverlayOrigin which was deprecated in 5.0.0 has been removed. Use CdkOverlayOrigin instead.
• hasBackdrop which was deprecated in 5.0.0 has been removed. Use cdkConnectedOverlayHasBackdrop instead.
• open which was deprecated in 5.0.0 has been removed. Use cdkConnectedOverlayOpen instead.
• scrollStrategy which was deprecated in 5.0.0 has been removed. Use cdkConnectedOverlayScrollStrategy instead.
• backdropClass which was deprecated in 5.0.0 has been removed. Use cdkConnectedOverlayBackdropClass instead.
• minHeight which was deprecated in 5.0.0 has been removed. Use cdkConnectedOverlayMinHeight instead.
• minWidth which was deprecated in 5.0.0 has been removed. Use cdkConnectedOverlayMinWidth instead.
• height which was deprecated in 5.0.0 has been removed. Use cdkConnectedOverlayHeight instead.
• width which was deprecated in 5.0.0 has been removed. Use cdkConnectedOverlayWidth instead.
• offsetX which was deprecated in 5.0.0 has been removed. Use cdkConnectedOverlayOffsetX instead.
• offsetY which was deprecated in 5.0.0 has been removed. Use cdkConnectedOverlayOffsetY instead.
• positions which was deprecated in 5.0.0 has been removed. Use cdkConnectedOverlayPositions instead.
• origin which was deprecated in 5.0.0 has been removed. Use cdkConnectedOverlayOrigin instead.
• tabs: mat-dynamic-height which was deprecated in 5.0.0 has been removed. Use dynamicHeight instead.
• selectChange which was deprecated in 5.0.0 has been removed. Use selectedTabChange.
• checkbox: align which was deprecated in 5.0.0 has been removed. Use labelPosition instead. Note that the values are different.
• form-field: - The following deprecated CSS classes have been removed:
  • mat-input-container instead use mat-form-field
  • mat-input-invalid instead use mat-form-field-invalid
  • mat-input-wrapper instead use mat-form-field-wrapper
  • mat-input-flex instead use mat-form-field-flex
  • mat-input-prefix instead use mat-form-field-prefix
  • mat-input-infix instead use mat-form-field-infix
  • mat-input-placeholder-wrapper instead use mat-form-field-label-wrapper
  • mat-input-placeholder instead use mat-form-field-label
  • mat-input-suffix instead use mat-form-field-suffix
  • mat-input-underline instead use mat-form-field-underline
  • mat-input-ripple instead use mat-form-field-ripple
  • mat-input-subscript-wrapper instead use mat-form-field-subscript-wrapper
  • mat-input-hint-wrapper instead use mat-form-field-hint-wrapper
  • mat-input-hint-spacer instead use mat-form-field-hint-spacer
  • mat-form-field-placeholder-wrapper instead use mat-form-field-label-wrapper
  • mat-form-field-placeholder instead use mat-form-field-label
• a11y: The renderer parameter in FocusMonitor.monitor has been removed.
• cdk-focus-trap which was deprecated in 5.0.0 has been removed. Use cdkTrapFocus instead.
• autocomplete: The defaults parameter in the MatAutocomplete constructor is now required.
• form-field: MatFormFieldControl.shouldPlaceholderFloat which was deprecated in 5.0.0 has been removed. * MatFormFieldControl.shouldLabelFloat is no longer optional and should be used instead.
• FloatPlaceholderType which was deprecated in 5.0.0 has been removed. Use FloatLabelType instead.
• PlaceholderOptions which was deprecated in 5.0.0 has been removed. Use LabelOptions instead.
• MAT_PLACEHOLDER_GLOBAL_OPTIONS which was deprecated in 5.0.0 has been removed. Use MAT_LABEL_GLOBAL_OPTIONS instead.
• snack-bar: extraClasses which was deprecated in 5.0.0 has been removed. Use panelClass instead.
• portal: The portalHost and cdkPortalHost inputs which were deprecated in 5.0.0 have been removed. Use cdkPortalOutlet instead.

Features

• button-toggle: general component cleanup and support value input in multiple mode (#9191) (a403bac), closes #2773 #2773 #9058
• cdk: switch injectables to new scope API (#10301) (6405da9)
• cdk-input: move input autofill and autosize utils into cdk (#9831) (ced9c90)
• chips: allow for separatorKeyCodes to be configured globally (#10264) (3c8a498), closes #10256
• datepicker: add animation to calendar popup (#8999) (c42549e)
• datepicker: Add Custom Header to DatePicker (#9639) (4e1bb26)
• form-field: allow setting default appearance via provider (#9815) (158b1db)
• icon: add input for inline styling of icons (#9984) (be1fc08)
• icon: add utility to mirror icons in RTL (#10327) (11a3fe1), closes #10045
• material: use scoped injectables (#10507) (f7b5d34)
• overlay: add support for flexible connected positioning (#9153) (27e5f6e), closes #6534 #2725 #5267
• schematics: dashboard schematic (#10011) (6273d6a)
• schematics: navigation schematic (#10009) (279c112)
• schematics: table schematic (#10012) (e7533a5)
• tabs: support stretched tabs in mat-tab-nav-bar (#10368) (89ea485), closes [#8871](...