Angular Expanders 4.2.0

Changes and improvements

Upgrade to Angular 17 and Angular Material 17

In the previous release (4.1.x) we upgraded to from Angular 14 to 16, but used legacy Angular Material 14 components. Now we have upgraded completely to the latest 17 version.

Breadcrumbs refactored

Breaking change: in routing change name and isBreadcrumb data entries to breadcrumb. The former is replaced by breadcrumb and the latter has become obsolete.

Styling setup refactored

Breaking change: _theme-to-material-component-exposer.scss has been replaced with _theme-to-component-exposer.scss. Material expose mixin _theme-to-css-classes-exposer.scss has been deleted. Behaviour can be re-added custom if wanted.

Switch to Material symbols

We switched to Material symbols instead of Material icons as default icon font set.

Added use of Angular library

Created the ngx-ns-core library containing runtime components, services and directives. Some of the expanded components and services have already been migrated, e.g. sidebar, top-bar, breadcrumbs, etc.

Migration guide

Updating to Angular 17

You can use the Angular update guide to get an overview of changes made and refactor custom code if necessary.

Some points of interest are:

• Functional router guards.
• Deprecation of angular/flex-layout. Can be easily converted with the use of css flexbox.
• .browserlistrc file is not explicitly needed anymore, but can be added if your setup diverges from the default.
• Standalone components

Breadcrumbs

Change the entries of name in your routing modules data to breadcrumb and remove the isBreadcrumb entries. The latter is not needed anymore for correct url creation.

Styling setup

Switch your _theme-to-material-component-exposer.scss harvest file to _theme-to-component-exposer.scss or change your expander features to target the new file.

Use of ngx-ns-core components

• Sidebar:
  • MenuService has stayed the same, but the svgIcon attribute has been removed.
  • Branding can be changed by using a project specific expansion resource that implements the @anchor:sidebar-branding feature anchor.

Updating to Material symbols

Some icon names will stay the same, others will need to be changed. If you really do not want to change icon font set, you can switch back to Material icons with custom default anchor overrides and providing injection tokens for the used component library components. Or you can use the option legacy.iconFont.enabled on your AngularApp instance.

app.module.ts

// @anchor:iconFont-constructor:start
_iconRegistry.setDefaultFontSetClass('material-icons');
// @anchor:iconFont-constructor:end

index.html

<!-- @anchor:iconFont:start -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- @anchor:iconFont:end -->

app.module.ts

Example of injection token

@NgModule({
  providers: [
    {provide: 'SIDEBAR_MENU_ICON_CONFIG', useValue: {
        iconSet: 'material-icons',
        defaultCompositeIcon: 'folder',
        defaultLeafIcon: 'description',
        rootCompositeIcon: 'chevron_right',
        compositeIcon: 'open_in_new'
      }
    },
  ],
})