7.0.0-beta.0

Highlights

• Support for drag and drop in @angular/cdk/drag-drop!
• Support for virtual scrolling in @angular/cdk/scrolling!
• You can now use a native <select> element in <mat-form-field>
• Updated visuals for 2018 Material Design update (in-progress, not all components are done)

Note that schematics for v7 are still in-progress.

Bug Fixes

• autocomplete: remove aria-owns attribute while closed (#12333) (f0a0ab1), closes #12332
• autocomplete: reopening closed autocomplete when coming back to tab (#12372) (c2b488e), closes #12337
• autofill: avoid firing unnecessary event on initial render of input (#12116) (c2fc3f4)
• badge: apply view encapsulation attributes on badge element (#12870) (db1d51f)
• badge: hide badges with no content (#12239) (701a0dd)
• bidi: default invalid directionality values to ltr (#12396) (e644350)
• breakpoints: emit only one event for adjacent breakpoint changes. (#11007) (2830a64)
• button: allow for non-colored flat button (#12550) (8c08bb1)
• button: allow transition for the button focus overlay for all buttons (#12552) (a080a79)
• button-toggle: clickable area not stretching when custom width is set (#12642) (ecf8b0d), closes #8432
• button-toggle: forward tabindex to underlying button (#12538) (7dff5f8)
• button-toggle: set aria-disabled based on group disabled state (#12828) (5969523)
• card: images in title-group overlapping content (#12205) (89d16b2), closes #10031
• card: incorrectly inverting inset divider in rtl (#12285) (fba4a93)
• cdk-text-field: prevent keyframes from getting stripped by LibSass (#12567) (915590e)
• checkbox: prevent error when disabling while focused (#12327) (c4cacce), closes #12323
• chips: chip list removing focus from first chip when adding through the input (#12840) (c3b2d4f)
• chips: dynamic chip input placeholder changes not being propagated to form field (#12422) (e007c27), closes #11861
• chips: focus indication not visible in high contrast mode (#12431) (bcf4c9f)
• chips: focus not being restored correctly on chip removal when inside component with animations (#12416) (5fb338b), closes #12374
• chips: focus not restored properly if chip has been removed by click (#12788) (3da390e), closes #12416
• chips: form field not appearing as blurred when used without an input (#12858) (f82a94b)
• chips: improved image scaling in avatar (#12843) (f6e787a), closes #12660
• chips: incorrectly handling disabled state (#12659) (65ad6ab), closes #11089
• chips: losing focus if active chip is deleted (#11910) (e13bfe0)
• chips: support focusing first/last item using home/end (#11892) (3723191)
• collections: align SelectionModel to changed naming (#8286) (27e88c3)
• datepicker: able to open from readonly input using keyboard control (#12880) (548d2b7)
• datepicker: add minDate and maxDate validation in demo-app (#12531) (2b29c93)
• datepicker: input not picking up changes if datepicker is assigned after init (#12546) (3299628)
• datepicker: multiple dialog open if the user holds down enter key (#12238) (8e63656)
• datepicker: screenreaders report editable grid cells (#12275) (a2dcf21)
• datepicker-toggle: forward tabindex to underlying button (#12461) (648eb4a), closes #12456
• expansion: respect parent accordion hideToggle binding (#12725) (9c184ea), closes #6529
• expansion-panel: elevation transition not working (#12860) (ac8ed31)
• expansion-panel: focus lost if focused element is inside closing panel (#12692) (baf6419)
• expansion-panel: implement keyboard controls (#12427) (32e5d72)
• form-field: allow for measuring outline gap when label is not in dom (#12782) (21095f5)
• form-field: legacy ripple underline jumps in edge (#12648) (70d1be8), closes #6351
• form-field: outline gap not calculated when appearance is provided through DI (#12767) (8e49388), closes #12765
• form-field: remove outline gap for empty labels (#12637) (3d4fc82)
• form-field: reset inputs not being reset on safari (#12413) (4884dac), closes #12408
• form-field: unable to distinguish disabled form field in high contrast mode (#12445) (df2b371)
• form-field: update label gap for outline style (#12555) (03527c6)
• grid-list: not picking up indirect descendants (#12823) (c04d2ae), closes #12809
• input: only monitor focus origin on browser platform (#11604) (625f792)
• list: disable hover styling on touch devices (#12520) (795c956)
• list: improved image scaling in avatar (#12660) (9a59c2a), closes #8131
• live-announcer: avoid triggering a reflow when reading directive content (#12638) (040f9db)
• live-announcer: duplicate live element when coming in from the server (#12378) (a10bfa4), closes #11940
• menu: changed after checked error when toggling quickly between triggers for same submenu (#12209) (b53b66a)
• menu: collapse empty menu panel (#12211) (b23cecd)
• menu: focus indication not visible in high contrast mode (#12201) (56bce47)
• menu: menu content data being cleared when lazy-loaded content is reused between nested triggers (#12476) (1e1751f), closes #12467
• menu: showing scrollbars on first open in Edge if item width is set (#12141) (275de51)
• menu: throw better error when trying to open undefined menu (#12688) (c90dcfb), closes #12649
• moment-date-adapter: not returning utc date when parsing (#12029) (d431566)
• ng-add: do not incorrectly insert custom-theme into CSS files (#12711) (51da6a6)
• ng-add: inserted dependencies should be sorted (#12847) (0760dad)
• ng-add: material version could not be determined (#12751) (a027ae5)
• ng-update: do not throw if imports without named bindings are used (#12866) (cef2e1e), closes #11571
• ng-update: form-field css name incorrectly updated (#12768) (4830be8)
• ng-update: support parenthesized directive metadata (#12314) (c5b87da)
• overlay: avoid same overlay being added to the keyboard event stack multiple times (#12222) (45d6ae4)
• overlay: flexible overlay with push not handling scroll offset and position locking (#11628) (f8b70cd)
• overlay: flexible overlay with push not handling scroll offset and position locking (#12624) (e765d8e), closes #11365
• paginator: inconsistently disabling tooltips between browsers (#12539) (73a3d4a)
• progress-bar: avoid error on SSR if pathname is undefined (#12807) (f3af763)
• progress-bar: generate correct url on server (#12813) (787f31a)
• progress-bar: incorrectly handling current path when using hash location strategy (#12713) (5727eac), closes #12710
• progress-bar: query animation not working inside routes with named outlets (#12350) (b9c0d85), closes #12014 #12338
• progress-bar: query state animation not working (#11459) (b40967f), closes #11453
• ripple: don't hide directive host in high contrast (#12168) (944caf9)
• ripple: don't launch ripple for fake mouse events (#11997) (4639a87)
• schematics: do not allow specifying native view encapsulation (#12632) (0a823dd)
• schematics: fix object iteration error in dashboard (#12216) (b589828)
• schematics: generated spec files not working (#12842) (c09da0b), closes #12778
• schematics: properly detect tsconfig files (#12434) (08e6653)
• schematics: properly indent inline files (#12317) (ed4e082)
• schematics: tree schematic not working (#12281) (ba134f4)
• select: arrow position/animation for appearance="standard" (#12045) (58f3c54)
• select: pointing to non-existent element via aria-labelledby (#12411) (3b7f0f1), closes #12405
• select: skip disabled options when using ctrl + a (#12553) (559b95e), closes #12543
• select,autocomplete: unable to set custom id on mat-option (#11573) (29d5173), closes #11572
• selection-list: do not allow toggling disabled options (#12617) (4cfdb20), closes #12608
• selection-list: proper styling not being applied when using mat-list-icon (#12879) (7bc8670)
• sidenav: content jumping in rtl and blurry text on IE (#12726) (4050002), closes #10026
• sidenav: scrollable instance not exposed when explicitly specifying content element (#11706) (441c98e), closes #11517 #10884
• slide-toggle: blended ripples do not match spec (#12735) (e148414)
• slide-toggle: fix font sizing for slide toggle to match other input methods (#10688) (58c1c95)
• slide-toggle: invert the thumb and slide gesture in rtl (#12284) (9a191b3)
• slide-toggle: prevent error when disabling while focused (#12325) (e273a7a), closes #12323
• slide-toggle: remove webkit tap highlight (#12708) (ba55d04)
• slide-toggle: respect primary palette of theme (#12698) (dad0ed0), closes #11854
• slider: thumb label blending in with background in high contrast mode (#12606) (f1b65b6)
• snack-bar: prevent content from overriding configured aria-live message (#12294) (0958cbb)
• snackbar: wrap simple snackbar text in span (#12599) (ef0b84b)
• stepper: focus lost if focus is inside stepper while changing step (#12761) (8a7ca7f)
• stepper: handle removing a step before the current one (#11813) (82b35d0), closes #11791
• stepper: improved alignment for step icons (#12703) (37a7056), closes #12696
• tab-group: focus change event not firing for keyboard navigation (#12192) (1b7b8ab)
• table: error if row definition is on an ng-container (#12462) (ef57919), closes #12460
• table: errors when rendering table with sticky elements on the server (#12095) (7e67fe9), closes #12094
• table: extra elements throwing off table alignment (#12645) (3b70d20), closes #11165
• table: unable to sort large numbers in strings (#12052) (adda21f)
• tabs: animation running after initialization (#12549) (4c2f619)
• tabs: changed after checked error when using isActive in view (#12206) (499458c), closes #12197
• tabs: content animation in RTL not working (chrome) (#12215) (c6c68a6)
• tabs: disable focus overlay for touch focus (#12249) (1b19b93), closes #12247
• tabs: enable keyboard wrapping and mark disabled tabs (#12218) (7f8fd9f)
• tabs: only target direct descendants with mat-stretch-tabs (#12198) (592af48), closes #12196
• tabs: reposition tab body on direction change (#12229) (49ec9ca)
• tabs: ripple overflow in internet explorer (#12036) (f35a314)
• tabs: selectedIndex being overwritten if tabs are being added / removed (#12245) (569c221)
• tooltip: interfering with native drag&drop (#12200) (19f64ad)
• tooltip: opening after click on android (#12250) (2a49532), closes #12223
• tree: include constructors on MatTree classes to allow es6 builds (#12556) (5623c5b)
• ensure components work with ES2015 in jit mode. (#12759) (2adced1), closes /github.com/angular/angular/pull/22356#issuecomment-387756794 #9329
• explictly declare types for mixin base classes (#12876) (515912b)

Features

• autocomplete: add updatePosition() method to MatAutocompleteTrigger (#11495) (3ce5b1f)
• autocomplete: align with 2018 material design (#12570) (b9651df)
• bottom-sheet: align with 2018 material design spec (#12625) (ceb2051)
• bottom-sheet: allow autofocusing to be disabled (#12193) (d6ca3ec)
• breakpoint-observer: Emit matching state of each query provided (#12506) (5a560b2)
• cdk-scrollable: add methods to normalize scrolling in RTL (#12607) (028746a)
• chips: allow set in separatorKeyCodes (#12477) (170665a)
• datepicker: align with 2018 material design spec (#12693) (32456e3)
• dialog: allow focus restoration to be disabled (#12519) (d5c5f31)
• drag-drop: new feature! Too many commits to list.
• expansion: add animation events for expansion panels (#12412) (f6b1002)
• expansion-panel: align with 2018 material design spec (#12670) (ccbae0b)
• focus-monitor: support monitoring ElementRef (#12712) (932211e)
• form-field: support native select element (#12707) (4e41985)
• ng-add: respect project default inlineStyle, inlineTemplate and spec option value (#12888) (8831a7a), closes #11874
• ng-add: respect project default style extension (#12618) (5144aa7)
• ng-add: set up gestures in CLI projects (#12734) (b919a48)
• overlay: add the ability to set a panelClass based on the current connected position (#12631) (765990e)
• overlay: support setting panelClass on cdkConnectedOverlay (#12380) (d7c734c)
• paginator: allow form field color to be customized (#12834) (e18a99f)
• portal: allow for custom ComponentFactoryResolver to be associated with portal (#12677) (136f5dd), closes #9712
• progress-bar: add transitionend output for value animation (#12409) (6a1a707)
• progress-bar: align with 2018 material design spec (#12394) (b2247f8)
• radio: align with 2018 material design spec (#12299) (dda8122)
• ripple: no longer require additional setup when using MatRipple directive (#11913) (d796776)
• ripple: support multi-touch (#12643) (8fdc2cf)
• schematics: new tree schematic (#11739) (1540e2f)
• select: allow for option sorting logic to be customized (#11890) (d54a75a)
• sidenav: align with 2018 material design spec (#12569) (1f88bd7)
• slide-toggle: align with 2018 material design spec (#12419) (5f2e077)
• snack-bar: align with 2018 material design spec (#12634) (1e754a0)
• tooltip: align with 2018 material design spec (#12310) (4e358c3)
• virtual-scroll: new feature! Too many commits to list.

Performance Improvements

• overlay: remove detached overlays from the DOM (#12414) (71886f8), closes #12341
• table: leaking reference through mostRecentCellOutlet (#12269) (34a7e38), closes #12259
• tree: leaking reference through mostRecentTreeNode (#12334) (60b9928), closes #12269
• virtual-scroll: improve scrolling performance (#12490) (4a9fe87)

BREAKING CHANGES

• sidenav: the constructor signature of the MatDrawerContent and MatSidenavContent has changed.