@xnoname/web-components v1.1.0
ng web-components
Web-components is a lightweight angular 9 compatible component library. It should provide the majority of heavy used components.
Usage
The library has to be added to the package.json:
"@xnoname/web-components": "1.0.0",
To use the library the core module has to be added to the module of the host application.
@NgModule({
bootstrap: [...],
declarations: [...],
imports: [
CoreModule,
],
providers: [
ConfigurationService,
LanguageService,
TranslationService,
StartupService,
{
provide: APP_INITIALIZER,
useFactory: startupServiceFactory,
deps: [StartupService],
multi: true
},
...
],
})
Watch out to provide a startup service with some configuration values.
export function startupServiceFactory(startupService: StartupService): Function {
return () => startupService.load(environment.configuration);
}
At least the following configuration object is needed in order to get I18n to work and use features with text and labels involved.
language: {
default: 'DE',
supported: 'DE'
}
As an alternative one can link the source repository directly in his angular app. Then these steps have to be followed:
npm install
npm start
will start a sample app on port 4200
To use library in project package json has to be extended by a link command:
link: "npm link ../web-components/src --production"
Further you have to enable preserve symlink option to enable testing with library.
Demo
Find a demo of some of the components here: https://webcomponents.xnoname.com
Components:
- accordion
- blocking overlay
- button with primary flavour and a levitated button
- calendar
- checkbox form control
- chip
- collapsable panel
- combo box with and without input, custom templates and type-ahead
- content tile displaying content
- data table is a sortable searchable pageable table using custom row templates
- datetime picker form control supporting languages
- modal dialog
- dropdown form control
- html content element interacting with contentservice to display remote html content
- html editor is a basic html editor form control supporting headings, paragraphs and lists, formatting and auto-complete
- infobox is a big infobox with a icon
- input form control with validation result display
- like control
- list selector form control to select values of a list supporting custom templates for items
- a loading indicator
- menu header
- navigation link
- pagination control
- a path control to display breadcrumps
- popup button
- scroll panel
- scroll-to-top control
- section divider
- spinner
- tab control
- tag input form control
- tooltip
- workflow control
- context menu
Directives
- google analytocs directive
- autofocus directive
- outside click directive
Validators
- date format validator
- email validator
- min length validator
- not empty validator
- required validator
Pipes
- pipe a configuration value
- filter objects
- join objects
- pipe object properties as array
- pipe an objkect property by its path
- pad
- pagination pipe
- sort pipe
- switch pipe
- to date string
- to timespan
- translation pipe
Services
- analytics service
- calendar service
- content service resolving remote content
- filter objects array service
- language service
- loading indicator service to control global loading indication
- moment service to abstract moment library
- scroll service
- scroll spy service
- sort objects array service
- translation service