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.