0.9.0 Changelog

This build introduces breaking change. Please read below.

Breaking Changes

14 Changes


4 Bug Fixes


April 13, 2017

Sketch template

Light Theme


  • Upgrade to Angular 4

    Clarity-angular is now compatible with Angular 4. Please note that Angular 4 requires TypeScript version 2.1 or newer.

    For a full list of breaking changes for Angular 4, please refer to their release notes.

    After upgrading to Clarity 0.9.0, please add the BrowserAnimationsModule in your module in order for our components with animations to work properly. Similarly, if you have unit tests with those components, plaase add the NoopAnimationsModule in your test module.

    This is the minimal set of changes you have to make to use clarity-angular 0.9.0. Depending on your own project's dependencies, you might have to upgrade other packages.

  • Updates to the Datagrid Selection Behavior

    Datagrid selection is now preserved when:

    • The user navigates to a different page in the datagrid
    • The data is updated, provided the smart iterator is used in the datagrid
  • Expandable rows for Datagrid

    This feature can be used when a Datagrid row has additional data or details that can be shown when interacting with the row. It supports many options, including:

    • Overall details for the row
    • Per-cell details
    • Replacing the original row rather than expand under it
    • Lazy-loading of details

    Here is an example of how to make a row expandable:

    <clr-dg-row *clrDgItems="let user of users">
        <clr-dg-row-detail *clrIfExpanded>
            This user likes ducks.

    If you include the same amount of <clr-dg-cell> elements in the row details as anywhere else in the datagrid, they will properly align as a way to display details for each cell individually. Details are only instantiated when the row becomes expanded, so they are naturally lazy loaded: just make any AJAX call you need in the constructor or ngOnInit() of the component you put inside the *clrIfExpanded structural directive. To notify us that you want a spinner to be displayed while lazy loading, just include a [clrLoading]="myLoadingBoolean" anywhere inside the details or even the row itself. As long as myLoadingBoolean is true, a spinner will be displayed.

Introducing the new Clarity wizard!

  • Clarity wizard (beta)

    0.9.0 introduces the beta version of the new and improved wizard component for Clarity Angular. This wizard component has been rebuilt from the ground up with an eye towards preserving as much of the old API as possible to limit breaking changes, learning curves, and migration complexity.

    The beta wizard gives our users early access to the new wizard so they can gauge the impact of the changes on their applications.


    Migrating from the old to the new wizard

    Moving from a 0.8 wizard to a 0.9 wizard involves a few minor steps in the host component’s HTML. For the most basic implementations, this should be all that is required.

    Advanced implementations of the 0.8 wizard may be impacted by the deprecations and breaking changes listed below. Please examine your own code for impact.

    Migration steps

    • The wizard title previously placed inside a div.wizard-title element must now be placed within a clr-wizard-title element. This is a straight replace that requires no additional code.
    • Each wizard must now contain a set of clr-wizard-button elements as a direct child of the clr-wizard element that offers four buttons of the following types: cancel, previous, next, and finish. This set constitutes the default button set that will be used by each page in the wizard if they're not overridden at the page level.
    • Each wizard page must contain a <ng-template pageTitle> element. This element serves as both the page title as well as the text of the nav element associated with the page. Optionally, a <ng-template pageNavTitle> element can be included to give alternate nav text if the page title is too long. If your 0.8 wizard has a clr-wizard-step title that is different from your page title, then you should probably move the text in your clr-wizard-step to a <ng-template pageNavTitle> element inside your clr-wizard-page.
    • clr-wizard-step elements are no longer needed and should be removed.

    0.8 wizard (before)

    <clr-wizard #wizard [(clrWizardOpen)]="open">
        <div class="wizard-title">Wizard Title</div>
        <clr-wizard-step>Step 1</clr-wizard-step>
        <clr-wizard-step>Step 2</clr-wizard-step>
        <clr-wizard-step>Step 3</clr-wizard-step>
        <clr-wizard-page>Content for step 1</clr-wizard-page>
        <clr-wizard-page>Content for step 2</clr-wizard-page>
        <clr-wizard-page>Content for step 3</clr-wizard-page>

    0.9 wizard (after)

    <clr-wizard #wizard [(clrWizardOpen)]="open">
        <clr-wizard-title>Wizard Title</clr-wizard-title>
        <clr-wizard-button type="cancel">Cancel</clr-wizard-button>
        <clr-wizard-button type="previous">Back</clr-wizard-button>
        <clr-wizard-button type="next">Next</clr-wizard-button>
        <clr-wizard-button type="finish">Finish</clr-wizard-button>
            <ng-template clrPageTitle>Title for page 1</ng-template>
            <ng-template clrPageNavTitle>Step 1</ng-template>
            Content for step 1
            <ng-template clrPageTitle>Title for page 2</ng-template>
            <ng-template clrPageNavTitle>Step 2</ng-template>
            Content for step 2
            <ng-template clrPageTitle>Title for page 3</ng-template>
            <ng-template clrPageNavTitle>Step 3</ng-template>
            Content for step 3


    Benefits of the new wizard

    The new wizard offers several immediate benefits compared to the 0.8 wizard.

    • Now that users can define their own button sets, the text inside of the buttons can say anything users need them to say.
    • Because the text of our buttons is no longer hardcoded inside the component code, button text can be localized in your applications.
    • Previously the title of a clr-wizard-page relied on a very specific and non-intuitive DOM and classname combination. Wrapping this into a <ng-template clrPageTitle> makes it easier to manage your DOM structure and allows one element to reflect both the page title and the title in the nav.
    • The 0.8 wizard required that the clr-wizard-step elements be outside of the clr-wizard-page elements. This meant that the order of your pages and nav elements was dependent upon their order inside the wizard. It also introduced a disconnect between the two which could easily lead to one or the other being presented out of order. The new wizard wraps titles inside of clr-wizard-page components, meaning all information about the pages is encapsulated inside the host component.


    Using the old wizard in 0.9.0

    If you need time to update your old wizards to the new 0.9.0 wizards, Clarity has you covered. All you need to do is take your old declarations for wizards and wizard pages and change them to clr-wizard-deprecated and clr-wizard-page-deprecated.

    The objects/classes have likewise been renamed to WizardDeprecated and WizardPageDeprecated, in the event your TypeScript build or UMD complains.

    No other changes are necessary to keep your old 0.8 wizards in 0.9.0.

    But note that we are planning to completely remove the old wizards in 0.10.0.


    A note about IE10

    At present, the new wizard will not work in IE10. There are known issues with the new wizard in IE10 that we are waiting to resolved until after the Clarity team has determined if it will continue support for IE10 beyond 0.9.

    For the time being, use the deprecated 0.8 wizard to continue IE10 support and please make sure to let the Clarity team know if continued IE10 support is important for your product.

Breaking changes

  • wizard.selectTab() has been removed

    Depending on your use case, wizard.goTo(pageId) or wizard.navService.setCurrentPage(pageObj) is preferred.

    goTo(pageId) checks if navigation is allowed, based on the state of prior pages. wizard.navService.setCurrentPage(pageObj) just performs navigation.

  • wizard.skipTab() and wizard.unskipTab() have been removed

    You can now hide and show pages in the wizard by using *ngIf on your clr-wizard-page elements.

  • wizard.wizardStepChildren has been removed

    The wizardStepChildren QueryList is no longer necessary. You can update, hide, and manage the state of your nav elements by navigating through and manipulating your pages.

  • wizard.wizardPageChildren has been renamed

    The wizardPageChildren QueryList is now just wizard.pages.

  • The clrWizardPageErrorFlag input has been removed

    The clrWizardPageErrorFlag input has been removed. The previous implementation offered no functional advantages over handling valid page state within a host component.

  • clrWizardPageIsSkipped has been removed

    The clrWizardPageIsSkipped input has been removed in favor of the use of ngIf to hide and show pages.

  • clrWizardPageHiddenChange and clrWizardPageSkippedChange have been removed

    The clrWizardPageSkippedChange and clrWizardPageHiddenChange outputs have been removed now that the improved DOM structure allows for encapsulation and the use of ngIf to hide and show both pages and nav elements together.

  • The clr-wizard-step component has been removed

    The wizard now handles its own stepnav items. There should be no need for users to add or programmatically manipulate them outside of what they can do by navigation or programmatically manipulating a wizard page.

  • clrWizardOpenChanged output has been changed to clrWizardOpenChange to better support Angular's expectations with two-way binding.
  • clrWizardPageNextDisabledChanged output has been changed to clrWizardPageNextDisabledChange to better support Angular's expectations with two-way binding.

Other Breaking Changes

  • wizard.id has been removed
  • WizardPage.title is now a TemplateRef and not a string
  • WizardPage.hasProjectedTitleContent was removed because it was no longer needed


  • The wizard.prev() convenience function has been deprecated. We recommend that wizard.previous() be used instead. wizard.prev() still works with the 0.9.0 wizard, however. But support for it will be dropped in the future.

Known Issues

The beta version of the wizard has the following known issues:

  • IE10 browser support
  • An unpredictable conflict when there is an alt-cancel routine at the wizard and page level.

New Features

The new wizard arrives with improved capabilities and new functionality. While we are committed to providing as much documentation as we can, there is no way that we could document all the features of the new wizard before the 0.9.0 release.

For undocumented features, the best source of truth is the demo app within the Clarity sourcecode. All new features are presented there for the time being with demonstrations highlighting their use.

A quick rundown of features in the new wizard follows:

  • A cornucopia of inputs, outputs, services, and convenience functions all accessible to anyone adding a templateRef onto their clr-wizard declaration.
  • Button group overrides at the page level.
  • Custom buttons that can be assigned any action or routine.
  • Header actions in the title bar of the wizard.
  • A high-level way to subvert all wizard actions, allowing users to create their own previous, next, finish, and cancel routines.
  • Reset functionality that can reset the navigation of the wizard to a pristine state.
  • A number of different navigational functions.
  • "Ghost pages" as in the initial design spec.
  • A static/inline version of the wizard.

Bug Fixes

  • Fixed the click event listener for buttons inside of a button group.
  • Fixed animation to value 0 in progress bars in webkit.
  • Separators for clr-dg-column components have been correctly positioned.

Other changes

  • Dropdown Items line-height has been updated to 30px on larger screens and 36px on smaller screens.