Skip to content

Releases: angular/components

acrylic-axolotl

07 Jan 23:12
22b0ad6
Compare
Choose a tag to compare

Bug Fixes

  • a11y: remove listeners when focus trap anchors are removed (#14629) (17bb9c3)
  • autocomplete: adding aria-activedescendant while closed if autoActiveFirstOption is enabled (#14455) (f3065cc), closes #14453
  • checkbox: incorrect color for disabled indeterminate checkbox (#14478) (0398d53), closes #14415
  • datepicker: native date adapter not preserving time when cloning (#14691) (9e3a77b)
  • dialog: complete injectable streams on destroy (#14254) (e673608)
  • drag-drop: don't disable native drag interactions if dragging is disabled (#14233) (9fa3376)
  • drag-drop: update root element if selector changes (#14426) (14b90db)
  • form-field: proper arrow color for native select (#14490) (3824a05)
  • input: unable to reset focused state of readonly input (#14698) (98711d7)
  • list: add hover and focus indication in high contrast mode (#14637) (3c71348)
  • menu: hasBackdrop not being updated after first open (#14561) (268b0e8), closes #14560
  • menu: scroll position jumping to top after animation is done on scrollable menu (#14190) (37a7080), closes #11859 #11790
  • moment-adapter: incorrectly deserializing moment dates and not setting locale on deserialized values (#14685) (36db1c0)
  • overlay: not updating hasBackdrop after first open (#14562) (61d3cf8), closes #14561
  • radio: host element unable to receive focus events (#14472) (8c35917), closes #13323 #13953
  • select: announce value changes with arrow keys while closed (#14540) (3f9a125)
  • select: don't shift arrow if there is no label (#14607) (7188719), closes #13907
  • select: form field state not updated if options are reset (#14720) (391a9fd), closes #14709
  • slider: don't handle keyboard events with modifier keys (#14675) (7d2748e)
  • typography: deprecation warning in latest sass version (#14673) (65ecb08), closes #14636
  • expansion-panel: add missing injection token for configuring the default options (#14384) (a389704), closes #14383

gold-snowman

18 Dec 23:02
06085e0
Compare
Choose a tag to compare

7.2.0 "gold-snowman" (2018-12-18)

Bug Fixes

  • a11y: inconsistent runtime value for ListKeyManager.activeItem (#14154) (c4b3484), closes #14152
  • autocomplete: update template when changing autocomplete in trigger (#13814) (904a5ea)
  • badge: aria-label not being updated if description changes (#14393) (ab78183)
  • bottom-sheet: bottom-sheet content not being read out by screen readers (#14534) (9485aff), closes #10591
  • cdk/stepper: exported injection token referring to Material (#14339) (b584888)
  • chips: don't handle separator keys while pressing modifiers (#14424) (d1cec1f)
  • drag-drop: account for out of view container and stacking order (#14257) (c5be8d3), closes #14231
  • drag-drop: error on touch end (#14392) (53cecbb), closes #14390
  • drag-drop: handle placeholder and preview templates changing after init (#14541) (bfacbb5)
  • drag-drop: prevent text selection while dragging on Safari (#14405) (220e388), closes #14403
  • drag-drop: showing touch device tap highlight when using a handle (#14549) (8a3d21a)
  • drag-drop: throw better error when attaching to non-element node (#14221) (31f0e6d)
  • drag-drop: unable to stop dragging after quick double click (#14506) (fbb2a13)
  • drawer: ensure all observables are unsubscribed (#13378) (f7dcc27)
  • form-field: long labels and option values going under select arrow (#14268) (166279b)
  • form-field: native select label floating incorrectly when invalid value is set (#14263) (9c65c87)
  • form-field: outline gap not being calculated when element starts off invisible (#13477) (e579181), closes #13328
  • form-field: outline gap not being recalculated on direction changes (#13478) (b78a750)
  • grid-list: allow more units for gutter width and row height (#14341) (f176119)
  • menu: accidentally tapping on sub-menu content that overlaps trigger on touch devices (#14538) (f2a06ab)
  • menu: reduce specificity of icon selector (#14389) (74e945a)
  • menu: unable to set icon color dynamically (#14161) (48e4f65), closes #14151
  • schematics: drag-drop schematic two consecutive commas (#14446) (35fd998)
  • schematics: two consecutive commas generated (#14371) (dd6065c), closes #14366
  • sidenav: content margins not updated on viewport changes (#14089) (b15392d)
  • snack-bar: announcing same message twice to screen readers (#13298) (3fb4b23)
  • stepper: ignoring custom falsy value for hasError (#14337) (7fac915), closes #14333
  • text-field: add fallback for browsers that don't support requestAnimationFrame (#14519) (c94812d)
  • tree: allow tree node to have undefined child or null child (#14482) (eeda91d)
  • tree: handle null children in nested tree (#14547) (364376e), closes #10886 #14545
  • reference symbols for example components rather than providing a string of the component name (#13992) (d0d97c3)
  • workaround for es2015 inheritance not always working (#13834) (a22a9fa)

Features

  • drag-drop: add class to indicate whether a container can receive an item (#14532) (c6dc070), closes #14439
  • drag-drop: add released event (#14513) (792d536), closes #14498
  • drag-drop: add the ability to constrain dragging to an element (#14242) (8432e80), closes #14211
  • drag-drop: allow entire group of drop lists to be disabled (#14179) (94e76de)
  • drag-drop: indicate in dropped event whether item was dropped outside of container (#14140) (42de6a2), closes #14136

fondant-friendship

03 Dec 20:57
d849a07
Compare
Choose a tag to compare

Bug Fixes

  • a11y: don't handle disallowed modifier keys in typeahead mode (#14301) (700f20f), closes #14274
  • badge: badge instances not being cleaned up on destroy (#14265) (da3776f)
  • checkbox: poor color contrast for disabled checkbox (#14044) (9c86b5f)
  • chips: invert focus overlay on dark theme (#14204) (7af8d02)
  • drag-drop: add support for dragging svg elements in IE11 (#14215) (81db16c), closes #14214
  • drag-drop: dragged elements blurry in some browsers (#14299) (63174d2), closes #14283
  • drag-drop: only add top-level drop lists to drop group (#14130) (4acecd7)
  • drag-drop: remove expensive style recalculation (#14189) (f212345)
  • form-field: error when native select has no options (#14102) (0ef75ea), closes #14101
  • list: don't handle events when modifier key is pressed (#14313) (0c7ce7a)
  • menu: allow alternate roles to be set on menu item (#14165) (3f1588f), closes #14163
  • ng-add: do not throw if custom builder is used for "test" (#14203) (498a3d8), closes #14176
  • scrolling: default to vertical CSS class for invalid orientation (#14145) (dbe27c4)
  • scrolling: provide virtual scroll viewport as scrollable (#14168) (c552504)
  • slide-toggle: label not being read out by JAWS (#14304) (754414b), closes #4610
  • slide-toggle: label not being read out by screen reader on IE (#14259) (5264804)
  • stepper: showing hover state after tap on touch devices (#14074) (f3031ad)
  • tabs: avoid hitting change detection if text content hasn't changed (#14251) (9778af2), closes #14249
  • tabs: blurry text in scrolled header on some browsers (#14303) (f7c8026)

stone-silhouette

20 Nov 22:00
Compare
Choose a tag to compare

Bug Fixes

  • a11y: aria-live directive announcing the same text multiple times (#13467) (a150494)
  • a11y: avoid overlapping or left over timers in live announcer (#13602) (d0f4e7b)
  • a11y: key manager preventing arrow key events with modifier keys (#13503) (1ef16ac), closes #11987 #13496
  • a11y: wrong order of constructor arguments in provider (#14078) (2fcf9e7), closes #14077
  • autocomplete: autofill value changes not being propagated to the form control (#9887) (059864d), closes #9704
  • autocomplete: not propagating same model value when reset while open (#13634) (8d98375)
  • bazel: theming bundle not exposed as sass_library (#14071) (af7a3d4)
  • bidi: preserve user dir attribute (#13859) (d94d176), closes #13855
  • breakpoints: set max-widths for breakpoints to non-integers to handle subpixel queries (#13828) (077f68e)
  • button: ripple color not correct for standard, icon and stroked buttons (#13235) (b104e75), closes #13232
  • button: stroked button crops applied badges (#13912) (4b431fe), closes #13909
  • button-toggle: content shifting in IE11 (#13492) (b3483a6)
  • button-toggle: not forwarding focus to underlying control (#14001) (81f8fb9)
  • button-toggle: remove hover state on touch devices (#13724) (a320af2)
  • button-toggle: svg icon not align inside toggle (#13839) (5851c91), closes #13726
  • button-toggle: webkit tap highlight conflicting with ripples (#13721) (efe53a0)
  • cdk-platform: pass {} to @NgModule since passing nothing breaks (#13792) (65dd75d)
  • checkbox: disabled property not being coerced (#13755) (e5fe34c), closes #13739
  • checkbox: no focus indicator in high contrast (#13255) (caf65e5), closes #13227
  • chips: disabled state not matching specs (#13272) (60e0d88)
  • chips: invalid ripple color for selected chips (#13271) (df5d18f)
  • chips: not updating keyboard controls if direction changes (#14080) (1ffa1fc)
  • chips: remove circular dependency between chip-list and chip-input (#13994) (6c741c4)
  • datepicker: don't allow clicks on disabled cells in year and multi-year views (#13448) (c15bad2)
  • datepicker: toggle not forwarding focus to underlying button (#14020) (b1d4b42)
  • datepicker: unable to disable ripple on datepicker toggle (#13997) (31bffb3), closes #13986
  • dialog,bottom-sheet: enter animation blocking child animations (#13888) (235add9), closes #13870
  • drag-drop: avoid disrupting drag sequence if event propagation is stopped (#13841) (8b2dc82)
  • drag-drop: avoid generating elements with duplicate ids (#13489) (68b53f7)
  • drag-drop: avoid interference from native drag&drop (#14054) (26d63ee)
  • drag-drop: drop list not toggling dragging class inside component with OnPush change detection (#13703) (12c15ba), closes #13680
  • drag-drop: enable drag interactions when there is a drag handle (#13780) (4ee6636), closes #13779
  • drag-drop: error if drag item is destroyed zone has stabilized (#13978) (6fe84f3)
  • drag-drop: events fired multiple times for short drag sequences on touch devices (#13135) (dc0b51a), closes #13125
  • drag-drop: ignore enter predicate when returning item to its initial container (#13972) (fa944b7)
  • drag-drop: incorrectly laying out items with different height or margins (#13849) (89701ef), closes #13483
  • drag-drop: multiple parallel drag sequences when dragging nested drag items (#13820) (436809c)
  • drag-drop: not picking up handle that isn't a direct descendant (#13360) (c38ebb6)
  • drag-drop: preserve previous inline transform (#13529) (cae16b0)
  • drag-drop: prevent mouse wheel scrolling while dragging (#13524) (cd6da93), closes #13508
  • drag-drop: use passive event listeners for start events (#13526) (280b0d6)
  • expansion-panel: don't handle enter/space if modifier is pressed (#13790) (04716b1), closes #13783
  • expansion-panel: emitting events twice on some browsers (#13600) (fa6e46d)
  • focus-trap: warn if initial element is not focusable (#13960) (27347b5), closes #13953
  • form-field: native select options blending in with dropdown background on a dark theme ([#13201](https://github.com...
Read more

brick-dress

13 Nov 17:36
893ec2d
Compare
Choose a tag to compare

Bug Fixes

  • a11y: aria-live directive announcing the same text multiple times (#13467) (7c2a095)
  • a11y: avoid overlapping or left over timers in live announcer (#13602) (a93d3a5)
  • a11y: key manager preventing arrow key events with modifier keys (#13503) (b7ef6af), closes #11987 #13496
  • bazel: theming bundle not exposed as sass_library (#14071) (71c205e)
  • bidi: preserve user dir attribute (#13859) (86089fe), closes #13855
  • button: ripple color not correct for standard, icon and stroked buttons (#13235) (62c6d55), closes #13232
  • button-toggle: not forwarding focus to underlying control (#14001) (b7be573)
  • button-toggle: svg icon not align inside toggle (#13839) (2814a99), closes #13726
  • checkbox: no focus indicator in high contrast (#13255) (13d9d3a), closes #13227
  • chips: invalid ripple color for selected chips (#13271) (057eee1)
  • datepicker: toggle not forwarding focus to underlying button (#14020) (723d7f5)
  • datepicker: unable to disable ripple on datepicker toggle (#13997) (2fb58ab), closes #13986
  • drag-drop: avoid disrupting drag sequence if event propagation is stopped (#13841) (2902d0b)
  • drag-drop: avoid generating elements with duplicate ids (#13489) (905f0b4)
  • drag-drop: avoid interference from native drag&drop (#14054) (8dcbee2)
  • drag-drop: enable drag interactions when there is a drag handle (#13780) (0d3b74a), closes #13779
  • drag-drop: error if drag item is destroyed zone has stabilized (#13978) (40a63cf)
  • drag-drop: ignore enter predicate when returning item to its initial container (#13972) (3fb5522)
  • drag-drop: prevent mouse wheel scrolling while dragging (#13524) (718d306), closes #13508
  • drag-drop: add directive to connect drop lists automatically (#13754) (e905127), closes #13750
  • focus-trap: warn if initial element is not focusable (#13960) (3026138), closes #13953
  • icon: account for query params when prefixing external references (#13930) (90420d6), closes #13924
  • menu: use passive touch listener (#14041) (f5006d6)
  • progress-bar: account for query params when prefixing references (#13942) (eb82847), closes #13930
  • scrolling: leaking subscription if same element is registered multiple times (#13974) (1a7173d)
  • slide-toggle: redirect focus to underlying input element (#13957) (1d4be69), closes #13953
  • slide-toggle: showing focus ripple when clicking disabled control (#14055) (a2c2caf), closes #13957
  • snackbar: set aria role based on if announcement message is provided (#13993) (199583b)
  • stepper: fix text contrast ratio of stepper labels (#14012) (01605d0)

lyrium-longboard

06 Nov 19:30
44db886
Compare
Choose a tag to compare

Bug Fixes

  • breakpoints: set max-widths for breakpoints to non-integers to handle subpixel queries (#13828) (b88b79d)
  • button: stroked button crops applied badges (#13912) (835dc9e), closes #13909
  • button-toggle: remove hover state on touch devices (#13724) (f9d5fb4)
  • chips: remove circular dependency between chip-list and chip-input (#13994) (3da858d)
  • dialog,bottom-sheet: enter animation blocking child animations (#13888) (e5afa48), closes #13870
  • drag-drop: drop list not toggling dragging class inside component with OnPush change detection (#13703) (4e50d4a), closes #13680
  • drag-drop: incorrectly laying out items with different height or margins (#13849) (c509591), closes #13483
  • drag-drop: multiple parallel drag sequences when dragging nested drag items (#13820) (cdc0c8b)
  • list: add ripples to action list items (#13799) (b293655), closes #13795
  • list: remove disabled selection list hover feedback on mobile (#13850) (e975223)
  • menu: unable to swap menu panel after first open (#13819) (cbb76ec), closes #13812
  • ng-update: do not fail if @schematics/angular version is outdated (#13929) (f10f8b9)
  • ng-update: do not throw if typescript version is outdated (#13927) (d44fcf8)
  • portal: use portal's ComponentFactoryResolver in portal outlet directive (#13886) (d2af80b), closes #12677 #9712
  • snack-bar: set appropriate role based on passed in politeness (#13864) (33d3cb3), closes #13493
  • snackbar: override min-width of snackbar on mobile (#13880) (41cb8aa)
  • stepper: don't handle enter/space when modifier key is pressed (#13827) (0bd3890), closes #13790
  • tabs: duplicate animation events on some browsers (#13674) (7106681)
  • tabs: mat-align-tabs not working on mat-tab-nav-bar (#13818) (2289e43), closes #13798
  • virtual-scroll: not removing view from container if it's outside the template cache (#13916) (7c202ec), closes #13901
  • bazel support for downstream apps (#13836) (61dbd26)

limestone-linguine

26 Oct 18:46
Compare
Choose a tag to compare

Bug Fixes

  • build: material not working with ES2015 (#13709) (e9103a6), closes #12760 #13695
  • button-toggle: webkit tap highlight conflicting with ripples (#13721) (abd0278)
  • cdk-platform: pass {} to @NgModule since passing nothing breaks (#13792) (5abb644)
  • checkbox: disabled property not being coerced (#13755) (cee8c65), closes #13739
  • expansion-panel: don't handle enter/space if modifier is pressed (#13790) (3e6cc77), closes #13783
  • radio: don't show hover ripples on touch devices (#13701) (b89c139), closes #13675
  • slide-toggle: don't show hover ripples on touch devices (#13702) (9d495f1), closes #13675
  • stepper: incorrect border color in dark theme for header with label position (#13791) (afa5a28)
  • stepper: selector assuming that there will always be a dir attribute (#13751) (576118e), closes #13741
  • stroked-button: ripples and focus overlay have incorrect radius (#13745) (7877404), closes #13738
  • tooltip: add fallback for touch devices if Hammer isn't loaded (#13580) (9ae6c84), closes #13536

Features

emerald-egret

22 Oct 16:46
92e693e
Compare
Choose a tag to compare

Bug Fixes

  • autocomplete: not propagating same model value when reset while open (#13634) (2006144)
  • button-toggle: content shifting in IE11 (#13492) (7f5cbe3)
  • datepicker: don't allow clicks on disabled cells in year and multi-year views (#13448) (85741e0)
  • drag-drop: not picking up handle that isn't a direct descendant (#13360) (0f05d99)
  • drag-drop: preserve previous inline transform (#13529) (2a8da45)
  • drag-drop: use passive event listeners for start events (#13526) (5d5fba5)
  • expansion-panel: emitting events twice on some browsers (#13600) (85a3ae0)
  • form-field: native select options blending in with dropdown background on a dark theme (#13201) (b8a6294)
  • grid-list: unable to assign numeric zero as gutter size (#13652) (4ffcf74)
  • list: selection list moving focus when an option is destroyed (#13531) (2c4c5ba)
  • menu: closing parent overlay when pressing escape (#13442) (c3ae922)
  • menu: proper focus styling when opened by tap on a touch device (#13599) (c271167)
  • progress-bar: not taking current path after first initialization (#13628) (8e331a7)
  • radio: improved alignment for native validation messages (#13570) (dbf5164)
  • sidenav: opened and closed events emitting twice on IE and Edge (#13649) (5295e2f)
  • slider: update value on mousedown instead of click (#13020) (c995db7)
  • stepper: custom icons not centered inside circle (#12947) (45edf64)
  • stepper: emitting the animationDone event twice on some browsers (#13608) (a11ca21), closes #13600 #13587
  • stepper: intl provider not being picked up in lazy-loaded modules (#12934) (00ce69b)
  • table: delimit words when filtering (#13487) (1d87b4c)
  • text-field: autosize textarea not resizing on minRows decrease (#13437) (8bae5b4)

Performance Improvements

  • focus-monitor: mark event listeners as passive (#13532) (ba0c820)

amethyst-ammonite

18 Oct 19:43
d177d6f
Compare
Choose a tag to compare

Highlights

  • Support for Drag and Drop in @angular/cdk/drag-drop.
  • Support for Virtual Scrolling in @angular/cdk/scrolling.
  • Support for native <select> element in <mat-form-field> .
  • Added <mat-action-list>, a list where each item is a <button>.
  • Updated component styles throughout the library matching the 2018 Material Design Spec refresh.
  • Added more schematics, with schematics now available for table, drag and drop, tree, address form and more.
  • Added CLI prompts when using ng add to assist in setting up HammerJS support, application theming and animations.
  • 250+ bug/performance fixes

Upgrading to 7.0

Using the Angular CLI, you can use the ng update command to automatically migrate to the new APIs in for Material and CDK.

ng update @angular/material

NOTE: If you are using only the CDK you can automatically migrate using ng update @angular/cdk instead.

Breaking Changes

  • ripple: deprecated [matRippleSpeedFactor] and baseSpeedFactor for the ripples have been removed. Use the new animation config instead.
  • overlay: The flexibleDiemsions property on CdkConnectedOverlay has been renamed to flexibleDimensions
  • sidenav: the constructor signature of the MatDrawerContent and MatSidenavContent has changed.
  • elevation: Because mat-elevation usages have been moved out of component stylesheets, users who have
    not invoked a theme mixin will not see any elevation shadows on Material components.
    However, users that have created a custom theme which lacks the elevation property will
    still see the default black shadows.

Additionally, users who want to use themed elevations in their custom components can create
their own shorthand mixin:

@import '~@angular/material/theming';

$myTheme: ...

@mixin my-elevation($zValue) {
  @include mat-theme-elevation($zValue, $myTheme);
}

and then invoke angular-material-theme with the $myTheme variable.

Marked for Deprecation

A number of items throughout the library have been deprecated and are expected to be removed in v8.

CDK

Collections

  • SelectionModel.onChange has been deprecated, use SelectionModel.changed instead.

Scrolling

  • ScrollDispatchModule has been deprecated, use ScrollingModule instead.

Table

  • CdkTable.setFooterRowDef has been deprecated, use CdkTable.addFooterRowDef and CdkTable.removeFooterRowDef instead.
  • CdkTable.setHeaderRowDef has been deprecated, use CdkTable.addHeaderRowDef and CdkTable.removeHeaderRowDef instead.

Material

Dialog

  • matDialogAnimations.slideDialog has been deprecated, use matDialogAnimations.dialogContainer instead.
  • MatDialogRef.afterOpen has been deprecated, use MatDialogRef.afterOpened instead.
  • MatDialogRef.afterClose has been deprecated, use MatDialogRef.afterClosed instead.
  • MatDialog.afterOpen has been deprecated, use MatDialog.afterOpened instead.

Form Field

  • <mat-placeholder> has been deprecated, use <mat-label> instead.
  • MatPlaceholder has been deprecated, use MatLabel instead.

Paginator

  • $mat-paginator-selector-trigger-min-width has been deprecated, use $mat-paginator-selector-trigger-width instead.

Select

  • matSelectAnimations.fadeInContent has been deprecated and will be removed without replacement.
  • The setter method for MatSelect.focused has been deprecated, MatSelect.focused will become readonly.

Toolbar

  • $mat-toolbar-height-mobile-portrait has been deprecated and will be removed without replacement.
  • $mat-toolbar-height-mobile-landscape has been deprecated and will be removed without replacement.

NOTE: In addition to the specific deprecations listed above, many component constructor methods contain
optional parameters which are expected to become required in v8.

Bug Fixes

  • icon: not taking current path after initialization (#13641) (df9ec7)
  • list: action list items clickable area not stretching the full width (#13099) (f3057fa)

7.0.0-rc.2

15 Oct 22:18
3f98306
Compare
Choose a tag to compare
7.0.0-rc.2 Pre-release
Pre-release

Bug Fixes

  • drag-drop: enterPredicate being called with wrong drop container (#13578) (60b4a58)
  • drag-drop: rename cdkDrop to cdkDropList (#13619) (160b688)
  • ng-add: do not add theme file if existing theme is set up (#13468) (d1e59a2)
  • schematics: template content exceeds max line length (#13521) (b0a1daf)
  • schematics: tree folder icons do not have enough contrast (#13462) (4a0eb2b)
  • virtual-scroll: fix several small bugs (#13597) (8cfaeea)

Features

  • schematics: prompt for name when generating component (#13518) (9085de7)