Library with common UI components to speed up your Angular developments. You can take a look to the components in our showcase at https://systelab.github.io/components.
Please, read the documentation at https://github.com/systelab/systelab-components/tree/master/projects/systelab-components
In order to clone the repository and test the library use the following commands:
git clone https://github.com/systelab/systelab-components.git
cd systelab-components
npm ci
npm run build-lib
ng serveThis will bootstrap a showcase application to test the different components.
Use watch in the library build to detect file changes automatically (except from css). Start application in a different terminal:
Terminal 1
ng build systelab-components --watchTerminal 2
ng serveng testFor E2E testing purposes, the strategy chosen is Snapshot Testing.
Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.
A typical snapshot test case for a mobile app renders a UI component, takes a screenshot, then compares it to a reference image stored alongside the test. The test will fail if the two images do not match: either the change is unexpected, or the screenshot needs to be updated to the new version of the UI component.
In order to run the test, run the command:
ng e2eIf you want to update the snapshots, run the command:
npm run update-snapshotsIn order to publish the library, an authorized npm user is required. Once set, update the version in the package.json, and run the npm publish script:
npm run build-lib
cd dist/systelab-components
npm publish- Datepicker has been ranamed to DatepickerComponent
- Angular Signals
- RxJS interoperability
- Server-side rendering and hydration
- Improved tooling for standalone components, directives and pipes
- Advancing developer tooling
- Autocomplete imports in templates
Tree component migrated to use Angular CDK Tree
- Add CdkTreeModule to modules using Tree components
- Replace abstract-tree-status.component.html for abstract-tree.component.html
- Replace
import { TreeNode } from 'primeng/api';
for
import { TreeNode } from 'systelab-components';
- Review any usages and overrides of CSS classes related to previous PrimeNG Tree (p-tree, p-treenode-label, ...)
- Router and HttpClient tree-shakable standalone APIs
- Directive composition API
- Image directive is now stable
- Functional router guards
- Router unwraps default imports
- Better stack traces
- Release MDC-based components to stable
- Improvements in the experimental esbuild support
- View Engine is no longer available
- Libraries built with the latest version of the APF Angular Package Format will no longer require the use of ngcc. As a result of these changes library developers can expect leaner package output and faster execution.
- The new API removes the need for ComponentFactoryResolver being injected into the constructor. Ivy creates the opportunity to instantiate the component with ViewContainerRef.createComponent without creating an associated factory
- End of IE11 support
- Angular now supports the use of persistent build cache by default for new v13 projects More info and CLI Cache
- RxJS 7.4 is now the default for apps created with ng new
- Dynamically enable/disable validators: allows built-in validators to be disabled by setting the value to null
- Important improvements to TestBed that now does a better job of tearing down test modules and environments after each test
- canceledNavigationResolution router flag to restore the computed value of the browser history when set to computed
- TypeScript 4.4
- Standalone Components
- Typed Angular Forms
- Streamlined page title accessibility
- Extended developer diagnostics
- Catch the invalid “Banana in a box” error on your two-way data bindings
- Catch nullish coalescing on non-nullable values in Angular templates
- Bind to protected component members directly from the templates
- Optional injectors in Embedded Views
- Support for passing in an optional injector when creating an embedded view through ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView
- NgModel changes are reflected in the UI for OnPush components
- TypeScript 4.6
- Added missing 'interactjs' reference as peerDependcy.
The following steps should be considered when upgrade to systelab-components 14.x.x
- AG Grid has been updated from v25 to v28.2.1. Some breaking changes must be applied (check the change log link).
IE11 support has been deprecated due to the upgrade to Angular 12
Use of Ivy, applications that uses this library have to use Angular 12 and Ivy rendering.
Added --noImplicitOverride flag to allow override methods and get error for unintentionally overrides https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-3.html#override-and-the---noimplicitoverride-flag
The following steps should be considered when migrating from Angular 10 to 11
- Angular now requires TypeScript 4.0. ng update will migrate you automatically.
- Browsers Support
Support for IE9, IE10, and IE mobile has been removed. This was announced in the v10 update.
Run this command to update the browsers npx browserslist@latest --update-db
- Upgrade Primeng 11
PrimeIcons should be upgraded to 4.1.0 as components like table utilize new icons in the library
locale property functionality of Datepicker is removed in favor of the new global i18n API. The datepicker components inject PrimeNGConfig
- Use 'karma-coverage' because 'karma-coverage-istanbul-reporter' usage has been deprecated since version 11
Many changes where introduce in version 10 in order to standardize the library and support Angular 9. The following steps should be considered when migrating from version 9.
- When importing the module do not use .forRoot(); In WebStorm, replace in path:
- SystelabComponentsModule.forRoot\(\)
- SystelabComponentsModule
- When importing services and modules import them from systelab-components root. In WebStorm, replace in path:
- from 'systelab-components/lib.+
- from 'systelab-components';
-
DialogService and MessagePopupServices are provided in root, so there is no need to provide them in any module. The option here is with WebStorm manually search for any of those services and remove them.
-
entryComponents for Modals or Cell renderers will no longer be needed and could be a problem for future Angular versions. In WebStorm, try to replace in path with the following regular expression (second parameter is nothing):
- ,\n?entryComponents: [^\]]*
- (blank)
Finally, update your package.json in order to add the peer dependencies:
"ag-grid-angular": "^28.2.0",
"ag-grid-community": "^28.2.0",
"angular-split": "^4.0.0",
"bootstrap": "^4.5.2",
"date-fns": "^2.15.0",
"jquery": "^3.5.1",
"mobile-drag-drop": "^2.3.0-rc.2",
"popper.js": "^1.16.1",
"primeicons": "^6.0.1",
"primeng": "^14.1.2",
"systelab-preferences": "^14.0.1",
"systelab-translate": "^14.0.6",
"pako": "^1.0.6",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",