Skip to content

Releases: angular/components

concrete-aeroplane

02 Jan 19:02
Compare
Choose a tag to compare

Bug Fixes

  • autocomplete: panelClosingActions emitting twice in some cases (#8998) (22c3259)
  • dialog: change order of button actions (#9021) (7b879a5)

flannel-battlestar

19 Dec 20:04
Compare
Choose a tag to compare

Bug Fixes

Performance Improvements

ceramic-gravy

11 Dec 19:24
2fb4d61
Compare
Choose a tag to compare

Bug Fixes

velvet-cuttlefish

06 Dec 20:08
b4a83ab
Compare
Choose a tag to compare

Bug Fixes

  • drawer: avoid initial animation when rendering on the server (#8828) (2b1f84e), closes #6865
  • tabs: hide tab body content after leaving the tab's view area (#8827) (05d726d)

Features

ink-sparkler

05 Dec 21:27
Compare
Choose a tag to compare

BREAKING CHANGES

  • overlay: OverlayRef.getConfig returns an immutable version of
    the config object.
  • overlay: OverlayRef.updateSize now accepts a OverlaySizeConfig
    rather than being based on the existing config object.

Features

Bug Fixes

  • checkbox: don't hide focus indicator on space press. (#8539) (9e35bf0)
  • chip-list: fix error state changes in chip list (#8425) (d2c11ca)
  • chip-list: stateChanges stream not being completed (#8636) (61dada8)
  • datepicker: calendar overlapping input when in a fallback position (#8099) (e5b7afe)
  • datepicker: keyboard fixes (enter matches click behavior & corre… (#7370) (0b2757c)
  • datepicker: placeholder not floating when an invalid value is typed in (#8603) (f0789eb), closes #8575
  • directionality: change event now emit the new value (#8424) (841f753)
  • drawer: allow for drawer container to auto-resize while open (#8488) (e7b412a), closes #6743
  • form-field: unable to tap on certain types of inputs on iOS (#8543) (74c1d01), closes #8001
  • input: Add pure-CSS floating label logic that will work on... (#8491) (1a7a61a)
  • input: stuck in focused state if disabled while in focus (#8637) (bec4cfe), closes #8634
  • list: fix role for list-item (#8767) (8f7c7cf)
  • menu: not closing when overlay is detached externally (#8654) (dd3094f)
  • menu: Set menu-item icon color only when not set on mat-icon (#8614) (d0cb077), closes #8594
  • overlay: add horizontal fallback positions to the connected overlay defaults (#8689) (e939ea7), closes #8318
  • overlay: make config immutable for existing refs (#7376) (2dbc766)
  • progress-spinner: value not updated while in indeterminate mode (#8269) (9b68b54)
  • radio: coerce checked input binding (#8556) (f41fa8c)
  • select: option not truncated correctly in multiple mode (#7857) (d04aa19)
  • selection-model: inaccurate selected value when accessed in change subscription (#8599) (0f7fbda), closes #8584
  • sidenav: remove min-width (#7748) (55a9f9a)
  • slide-toggle: height collapsing if component doesn't have a label (#8270) (8205cb2), closes #8264
  • snack-bar: not applying all panel classes in IE (#8578) (a6d0847)
  • stepper: block linear stepper for pending components (#8646) (53c94c7), closes #8645
  • stepper: set appropriate aria-orientation (#8657) (9582b8b)
  • tabs: pagination not enabled on init on some browsers (#8104) (2c34a7e), closes #7983
  • blurry ripples for slide-toggle, radio, checkbox in MS edge. (#8514) (8b7a3af), closes #8392
  • tooltip: close tooltip if message is cleared while open (#8544) (d66284d)
  • tooltip: unable to type in input with tooltip on iOS (#8534) (75c665a), closes #8331

wool-wish

28 Nov 00:16
741378a
Compare
Choose a tag to compare

Bug Fixes

  • overlay: disposed overlays not removed from the key event stack (#8226) (461dfaf)
  • tabs: fix accidentally setting top instead of width after removing Renderer use (#8602) (6e865b7)

Features

  • The examples on material.angular.io are now opened externally via
    StackBlitz instead of Plunker.

felt-photon

21 Nov 00:49
6a9fbfe
Compare
Choose a tag to compare

Bug Fixes

  • autosize: incorrect height with long placeholders (#8024) (ad7cb4a), closes #8013
  • cdk-observers: prevent attribute renaming in closure compilers advanced optimizations (#7894) (8dfe470)
  • checkbox: Set aria-checkbox to mixed for indeterminate checkbox (#8089) (3037a90)
  • chip: fix placeholder and text overlap (#8468) (81db650)
  • chips: remove chip bottom margin in sibling chips (#8198) (d79903a)
  • chips: use all available space for the input (#7462) (c725249)
  • datepicker: add missing exportAs (#7782) (d6d9ff8)
  • datepicker: correct DST issues on IE 11 (#7858) (2f2325a)
  • datepicker: correct overlay broad style selector (#8130) (f69c8e6)
  • datepicker: prevent matInput from clobbering date value (#7831) (4b59ca1)
  • drawer: invalid margin declaration when rendering server-side (#8324) (5600b80)
  • drawer: missing elevation shadow (#8387) (b0756a2), closes #8386
  • drawer: re-add openedStart and closedStart events (#7747) (7610c7c)
  • expansion: prevent memory leak by calling parent ngOnDestroy (#8410) (f6bd9b0)
  • fab-buttons: vertically align icons inside fab buttons (#8442) (43217ef)
  • form-field: jumping underline in Edge and Firefox (#8480) (c7ab877), closes #8395
  • icon: remove IDs from source icon set from rendered output (#8266) (76806e3)
  • input: add aria-required to inputs (#8034) (8178d6f)
  • input: remove native IE reveal icon (#8439) (47055a7), closes #8390
  • select: error when attempting to open before init (#8242) (ba36d3a)
  • progress-spinner: coerceNumber values (#7791) (b6712f8)
  • list: multi-line list item spacing (#8339) (bb504ad), closes #8333
  • menu: return focus to root trigger when closed by mouse (#8348) (b085dc6), closes #8290
  • overlay: better handling of server-side rendering (#8422) (0f83b20), closes #8412
  • overlay: complete key event stream on dispose (#8341) (b437b45)
  • overlay: remove global keydown listener when there are no open overlays (#8389) (131272a)
  • progress-spinner: default strokeWidth to 10% of the diameter (#7746) (b997353)
  • slide-toggle: drag not working in edge (#8421) (d6f287e), closes #8391
  • snack-bar: complete onAction observable on close (#8183) (bc8560e)
  • stepper: update state when steps change (#8398) (2bc0b41)
  • tabs: detach tab portal when tab hides from view (#8486) (fbf2987)
  • tooltip: allow toolip to reopen when closed by detaching overlay (#8232) (0719c38)
  • consistently coerce boolean and number properties (#7283) (3ca801a)
  • replace extendObject utility w/ object spread (#7372) (ea54edb)
  • using correct global name in rollup bundle (#8407) (40be1f2)
  • TypeScript interfaces are now documented on https://material.angular.io

Features

  • a11y: add autoCapture option to cdkTrapFocus (#7641) (20b47d7)
  • datepicker: dispatch events when datepicker is opened and closed (#7792) (998153a)
  • dialog: add ariaLabel and focusOnOpen config options (#6558) (dad5922)
  • gestures: add injection token for specifying Hammer.js options (#8106) (f2a0206), closes #7097
  • menu: allow disabling ripples on items (#8388) (ce23395), closes #8261
  • overlay: add option to re-use last preferred position when re-applying to open connected overlay (#7805) (f83beb8)
  • reposition-scroll-strategy: add option for closing once the user scrolls away (#8233) (58598c4)
  • slider: support specifying tabindex (#7848) (8e9dade)
  • tab-nav-bar: allow setting tabindex for links (#7809) (a041253)

cesium-cephalopod

06 Nov 20:25
c13848e
Compare
Choose a tag to compare

Highlights

  • First release candidate for Angular Material and CDK! The team now believes that APIs and
    behaviors are stable and mature enough to exit beta. Please continue to file issues that
    help us eliminate more bugs from the forthcoming 5.0.0 release. Moving forward, the major
    version number of Angular Material and CDK will update alongside Angular itself.
  • Based on Angular 5.0
  • More consistent naming conventions across the board
  • 60+ bug fixes

BREAKING CHANGES

  • Angular Material now requires Angular 5, which itself requires TypeScript 2.4+ and RxJS 5.5.2+
  • mat-icon now uses HttpClient from @angular/common/http instead of Http from
    @angular/http. Any unit tests that faked icon responses should be changed to use an
    HttpInterceptor.
  • @angular/cdk/rxjs has been removed in favor of RxJS 5.5's lettable operators.
  • toolbar: in previous versions, any content of mat-toolbar not wrapped in a
    mat-toolbar-row would be rendered inside of an implicitly created mat-toolbar-row. As of rc0,
    this implicit row will no longer be created. This means that any custom application CSS that
    targeted this implicitly created mat-toolbar-row will no longer apply. Users can re-add the
    mat-toolbar-row in their own templates to match the original output structure. This
    resolves a longstanding issue where display: flex styles were difficult to use on mat-toolbar.
  • accordion: move CdkAccordion to @angular/cdk/accordion
    • CdkAccordion and associated classes live in @angular/cdk/accordion
    • AccordionChild is renamed to CdkAccordionChild
    • CdkAccordion no longer has displayMode and hideToggle @Inputs
    • CdkAccordionItem is now a @Directive
  • table:
    • The argument order for the when property of matRowDef and cdkRowDef has been changed
      from (rowData, index) to (index, rowData) in order to match trackBy.
  • datepicker:
    • fromIso8601 method on DateAdapter removed in favor of deserialize
    • DateAdapter will return an invalid date instead of throwing an error
    • The userSelection @Output of mat-calendar has been made internal-only
  • cdk/scrolling:
    • ScrollDispatcher.getScrollContainers has been renamed to getAncestorScrollContainers to
      better match its behavior.
    • The ScrollDispatcher.scrollableReferences property has been renamed to scrollContainers.
    • The ScrollDispatcher.scrollableContainsElement method has been removed.
    • The Scrollable class has been renamed to CdkScrollable for consistency.
  • unique-selection: move UniqueSelectionDispatcher to @angular/cdk/collections
    (UniqueSelectionDispatcher, UniqueSelectionDispatcherListener, and
    UNIQUE_SELECTION_DISPATCHER_PROVIDER)
  • MATERIAL_COMPATIBILITY_MODE, CompatibilityModule, NoConflictStyleCompatibilityMode,
    MatPrefixRejector, MdPrefixRejector symbols have been removed.
  • MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY is renamed to CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY

Deprecations

  • The following classes have been renamed. The old names are still available as deprecated:
    OverlayOrigin -> CdkOverlayOrigin
    ConnectedOverlayDirective -> CdkConnectedOverlay
    PortalDirective -> CdkPortal
    PortalHostDirective -> CdkPortalOutlet
    ObserveContent -> CdkObserveContent
  • The following @Output names have been renamed. The old names are still available as deprecated:
  • mat-select
    • onOpen -> opened
    • onClose -> closed
    • change -> selectionChange
  • mat-sidenav / mat-drawer
  • open -> opened
  • close -> closed
  • mat-menu
    • close -> closed
  • matMenuTriggerFor
    • onMenuOpen -> menuOpened
    • onMenuClose -> menuClosed
  • mat-chip
    • onSelectionChange -> selectionChange
    • remove -> removed
    • destroy -> destroyed
  • mat-tab-group
    • selectChange -> selectedTabChange

Features

  • table: add MatTableDataSource (#6747) (a9600e7)
  • dialog: support minWidth, minHeight, maxWidth and maxHeight (#7488) (57f19cd)
  • overlay: new keyboard dispatcher for targeting correct overlay (#6682) (a2ca4d6)
  • snack-bar: set snack bar to be responsive. (#7485) (5b7982f)
  • sort: use existing intl provider if one exists (#7988) (c8df2c1)
  • dialog: add optional generic param for config data (#7447) (b29ac45), closes #4398
  • Most directives / components now define an exportAs name (#7554) (fa441bc)

Bug Fixes

  • block-scroll-strategy: disable smooth scrolling before restoring scroll position (#8132) (75bccde), closes #7139
  • button: focus styles not applied to programmatically focused buttons (#5966) (a0bb1a3), closes #7510
  • button-toggle: support two-way binding of value (#7911) (ee4915c)
  • card: change image path to https in example (#7800) (65d3630)
  • chip-list: use role = listbox only if chip list is not empty (#7664) (dc76c09)
  • chips: programmatically selected chip stealing focus (#7978) (8168667)
  • datepicker: allow DateAdapter authors to have more control ove… (#7346) (9fa075e)
  • datepicker: use disabled state from FormControl (#7514) (66e71c8)
  • dialog: don't block other dialogs from opening while animating (#8051) (cc4fc11), closes #6560
  • drawer: not restoring focus on close (#7668) (3041124)
  • drawer: unable to toggle while drawer is animating (#6810) (085827f), closes #6376
  • expansion-panel: prevent content from being clipped (#7617) (aa77aa1)
  • focus-trap: server-side rendering error (#7635) (f7a12b6), closes #7633
  • focus-trap: update focus trap attrs to camel case #6799 (#6960) (c663fad)
  • form-field: fix underline at different zoom levels (#7567) (5cffd7c)
  • form-field: remove 200px width since it messes up flex layouts (#7083) (160a511)
  • form-field: remove specific mention of matInput in error (#7727) (f17cb99)
  • icon: use SafeResourceUrl in getSvgIconFromUrl (#7535) (291a87c)
  • input: remove IE clear icon (#8095) (2fa679b), closes #8076
  • menu: add typography mat-font-weight (7fe1b81)
  • menu: make @output names consistent #6677 (#8053) (b2dd17a)
  • menu: not handling keyboard events when opened by mouse (#4843) (d822a39), closes [#4991](https://github...
Read more

marble-mustache

05 Oct 23:44
Compare
Choose a tag to compare

Highlights

  • Progress spinner is now entirely css-based.
  • Fixed sidenav: the sidenav can now be configured to use fixed positioning. This resolves a longstanding issue where sidenav-container would always introduce a scrolling region.
  • mat-select is now used inside mat-form-field. This makes all of the existing form-field features available with mat-select, including hints, errors, prefixes, and suffixes. This also ensures that mat-select and matInput have a consistent presentation.
<mat-form-field>
  <mat-select placeholder="State">
    <mat-option *ngFor="let state of states" [value]="state">{{ state }}</mat-option>
  </mat-select>
</mat-form-field>

Breaking Changes

  • Previously the ScrollDispatcher.scrolled subscription would react both on scroll events and on window resize events. Now it only reacts to scroll events. To react to resize events, subscribe to the ViewportRuler.change() stream.
  • UniqueSelectionDispatcher, UniqueSelectionDispatcherListener and UNIQUE_SELECTION_DISPATCHER_PROVIDER are no longer
    available from @angular/material and instead must be imported from @angular/cdk/collections
  • isFocusTrapEnabled is now properly marked internal.
  • The OverlayRef.getState method has been renamed to OverlayRef.getConfig.
  • defaultErrorStateMatcher has been replaced by ErrorStateMatcher. For more info, see the input docs.

Features

  • autocomplete: add md-autocomplete classes to overlay panel (#7176) (f8cd790), closes #4196
  • dialog: add datepicker dialog and popup classes for easy styling (#7013) (0ff8d5d)
  • menu: support typeahead focus (#7385) (f0d20ca)
  • nav-tabs: add mat-tab-label-active class to active nav tab labels (#7508) (00e9338)
  • progress-spinner: switch to css-based animation (#6551) (630dfad)
  • select: add support for custom error state matcher (#7443) (a774688), closes #7419
  • select: make select work inside form-field (#6488) (d914cc4)
  • selection-model: de/select multiple values at the same time (#7001) (e52beeb)
  • sidenav: Add support for fixed sidenavs (#6712) (61579bc)
  • sort: add enter and leave arrow animations (#7180) (2d350a0)
  • table: add row when predicate (#6795) (0875b85)
  • viewport-ruler: add common window resize handler (#7113) (3b0915a)

Bug Fixes

  • add exportAs to missing components (#7392) (31e9775), closes #7361
  • remove all md prefixes (#7241) (20a23f1)
  • slide-toggle: report change to model before firing a change event (#7076) (c82fca8), closes #7074
  • remove cdk re-exports from @angular/material (#7112) (f9b5ccd)
  • autocomplete: don't open panel for readonly inputs (#7271) (5f8615f), closes #7269
  • autocomplete: emit closing action for escape keydown event (#6250) (f4673a5)
  • autocomplete: empty not cleaning up on tab (#7270) (6be0462), closes #7268
  • autocomplete: error if panel is added asynchronously (#7078) (504ba70), closes #7069
  • autocomplete: remove invalid aria markup (#7107) (6bd6b9f), closes #7100
  • button: allow for elevation to be overwritten (#7305) (92a868e), closes #7264
  • calendar: not reacting to min/max boundary changes (#7234) (eb012cc), closes #7202
  • checkbox: defaulting to invalid name and value attributes (#7130) (26788f1)
  • checkbox: support native tabindex attribute (#6793) (0270cf5)
  • chips: do not set chips value if there's no ngControl or value (#7285) (d9ba13f)
  • chips: fix chip list focus and keyboard behaviors (#7319) (f166468)
  • common: don't log doctype warning when rendering server-side (#6833) (f8ed442)
  • common-module: check if computed styles are available (#7003) (5da9e64), closes #7000
  • datepicker: make sure _datepickerInput exists before accessing its (#7033) (2129b7a)
  • dialog: directionality not injected into child components (#7111) (daa3880)
  • drawer: backdrop not transitioning on close (#6651) (80310a5)
  • drawer: drawer container animating when open by default (#7129) (4d278dd), closes #7007
  • drawer: drawer container not reacting to drawer removal (#7060) (b0b91f4), closes #6271
  • drawer: open event not firing on init (#7214) (ba5653d), closes #7208
  • input: apply readonly attribute when readonly (#7439) (01622b1)
  • input: don't highlight container when readonly input is focused (#7273) (f076390)
  • input: make autosize work inside tabs & stepper (#7341) (c6824d5)
  • list-key-manager: align matching logic with native listbox (#7212) (846cc13)
  • list-key-manager: don't focus disabled items in typeahead mode (#7382) (1823b2f)
  • menu: multiple close events for a single close (#7037) (2dcb76c)
  • **m...
Read more

carapace-parapet

21 Sep 22:19
Compare
Choose a tag to compare

Highlights

  • Each @angular/material component is now bundled into its own javascript file. This will allow
    tools like webpack to more easily load only the components being used in an application.
  • New stepper component! The base behavior lives in @angular/cdk with Material Design flavors in
    @angular/material.

Breaking changes

  • Angular Material now requires Angular 4.4.3 or greater
  • MaterialModule has been removed. (cf1ece0) (#6803)
    See the deprecation notice from beta.3 for more information.
  • MdCoreModule has been removed. Most of its functionality has been moved to @angular/cdk over
    the last few releases.
  • FocusOriginMonitor has been renamed to FocusMonitor and moved to @angular/cdk.
  • chip-list: The outputs select and deselect have been removed in favor of a single
    onSelectionChange output.
  • overlay: OverlayState has been renamed to OverlayConfig
  • overlay: Now that the Overlay is part of the cdk rather than Angular Material directly,
    the themeClass property has been removed. To add a class to the
    overlay for theming, you can do
overlayContainer.getContainerElement().classList.add('my-theme-class');
  • DateAdapter method getISODateString has been renamed to toIso8601 and a new method
    fromIso8601 has been added.

Deprecation of "md" prefix.

In earlier betas, we've had a compatibility mode that allowed people to use either "md" or "mat"
as the selector for Angular Material components. This was created so that these components could
live side-by-side with AngularJS Material without CSS from
the two libraries colliding.

For beta.11, we've made the decision to deprecate the "md" prefix completely and use "mat" moving
forward. This affects all class names, properties, inputs, outputs, and selectors (CSS classes were
changed back in February). The "md" prefixes will be removed in the next beta release.

You can automatically update your projects with the angular-material-prefix-updater tool.
Check out the tool's page for instructions on how to run.

Why are we doing this?

We like the "md" prefix too! We added compatibility mode in order to keep "md" around, but over
time we found that there were too many downsides to continue supporting both prefixes at the same
time:

  • Many users found the fact that the CSS used "mat" while templates used "md" confusing.
  • Users in compatibility mode found that having "mat" in their templates while TypeScript class
    names remained "Md" to be unfriendly.
  • Making both prefixes available consistently through templates required adding many
    getters/setters that aliased the "true" property
    .
    This ends up increasing payload size and complexity of the source code.
  • Compatiblity mode itself used broad directive selectors
    to enforce that only one prefix was used at a time. This causes a problem where this broad selector
    prevents Angular from throwing an error if an application uses a component without importing its
    NgModule.

Why not change the styles in AngularJS Material?

We explored this option early on (before creating compatibility mode). We found that changing the
library's styles such that they wouldn't affect the Angular Material components would increase
the specificity. This would have been a significant breaking change, as it would have potentially
broken countless custom styles that relied on a particular specificity working.

Bug Fixes

  • autocomplete,select: inconsistent disabled option coloring (#6640) (454781d), closes #6638
  • autosize: not resizing on programmatic changes (#6654) (89fea50), closes #5247
  • button-toggle: border radius ignored if option is selected (#6699) (82e14f8), closes #6689
  • checkbox: label content should not wrap (#6674) (9acab86), closes #6671
  • chips: set appropriate aria-orientation (#6464) (a37aa6a)
  • datepicker: allow date or datetime strings in fromIso8601 (#7220) (8436f8c)
  • datepicker: allow ISO 8601 strings as inputs (#7091) (d2ceb2c)
  • datepicker: backdrop class should be mat- (#7056) (2b61eb6)
  • datepicker: Create a new injection token to avoid overriding LOCALE_ID (#6708) (2635cad)
  • datepicker: fix wrong datepicker-input value for non MM/DD/YYYY locales (#6798) (29399b8)
  • datepicker: makes sure the datepickerInput is registered (#7049) (e4d48d7)
  • datepicker: toggle not reacting to disabled state changes in datepicker or input (#6964) (85993d3)
  • expansion-panel: dark theme header hover color (#6616) (21c68ad)
  • form-field: add aria-owns to label element (#6683) (4191b4d)
  • form-field: placeholder not floating if autofilled (#6839) (602a861), closes #6837
  • grid-list: avoid unnecessary calc declarations (#6745) (255611b)
  • grid-list: styles not cleared when switching to a different styling mode (#6660) (87d607e), closes #4047
  • input: remove resize handle from non-textarea inputs (#6768) (1272f03), closes #6757
  • list: subheader margin being overwritten by typography (#6735) (efe483a)
  • menu: multiple close events for a single close (#6961) (1cccd4b)
  • menu: nested menu hover not working when trigger is added lazily (#6807) (6b5100b), closes #6731
  • menu: nested trigger staying highlighted after click (#6853) (04bf3d1), closes #6838
  • overlay: rename OverlayState to OverlayConfig (#6972) (1cfce8d)
  • progress-bar: query mode not reversing direction in rtl (#6922) (8a21881)
  • select: extra whitespace around placeholder (#6955) (9fe6386), closes #6923
  • selection-list: do not coerece option value to boolean (#6983) (dfe01f2)
  • selection-list: proper style for disabled options (#6829) (547d11f)
  • slide-toggle: remove side-margin if slide-toggle label is empty (#6881) (a1ec81a), closes #6868
  • slide-toggle: support native tabindex attribute ([#66...
Read more