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.
Datagrid selection is now preserved when:
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:
Here is an example of how to make a row expandable:
<clr-dg-row *clrDgItems="let user of users">
<clr-dg-cell>{{user.id}}</clr-dg-cell>
<clr-dg-cell>{{user.name}}</clr-dg-cell>
<clr-dg-row-detail *clrIfExpanded>
This user likes ducks.
</clr-dg-row-detail>
</clr-dg-row>
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.
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.
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
div.wizard-title
element must now be
placed within a clr-wizard-title
element. This is a straight replace that requires no additional code.
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.
<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>
</clr-wizard>
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>
<clr-wizard-page>
<ng-template clrPageTitle>Title for page 1</ng-template>
<ng-template clrPageNavTitle>Step 1</ng-template>
Content for step 1
</clr-wizard-page>
<clr-wizard-page>
<ng-template clrPageTitle>Title for page 2</ng-template>
<ng-template clrPageNavTitle>Step 2</ng-template>
Content for step 2
</clr-wizard-page>
<clr-wizard-page>
<ng-template clrPageTitle>Title for page 3</ng-template>
<ng-template clrPageNavTitle>Step 3</ng-template>
Content for step 3
</clr-wizard-page>
</clr-wizard>
The new wizard offers several immediate benefits compared to the 0.8 wizard.
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.
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.
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.
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.
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.
You can now hide and show pages in the wizard by using *ngIf
on your
clr-wizard-page
elements.
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.
The wizardPageChildren
QueryList is now just
wizard.pages
.
The clrWizardPageErrorFlag
input has been removed. The previous implementation
offered no functional advantages over handling valid page state within a host component.
The clrWizardPageIsSkipped
input has been removed in favor of the use of
ngIf
to hide and show pages.
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 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.
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.
The beta version of the wizard has the following known issues:
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:
clr-wizard
declaration.