@gerandon/ngx-widgets
v19.0.0
Published
Angular widget (components) collection using CVA (ControlValueAccessor)
Downloads
209
Maintainers
Readme
NgxWidgets
This library was generated with Angular CLI version 18.x.
Short Description
This is basically a utility-widget Angular library, for creating ControlValueAccessors
in an easier way, by implementing and extending
the Core
classes.
Instead of creating ControlValueAccessor
implementations in each of our project, this library provides already defined classes for that functionality.
Try it out - Demo
Built-In components
Be patient with me, I'm trying to figure out what this README should really contain... :)
Core Classes
Widgets (built-in examples)
There are a few custom components, just to present how the core functionality and implementation works and makes the development easier (especially in case of a newly created project)
In the following example you can see a custom CVA implementation built into the library (as widget)
As you can see, instead of defining what our CVA will look like, we could use the Base implementation from the core of the library. That way (as seen) our component will have significantly less code on its TS side and we also reduced redundancy as well.
BasicInput (component)
@Component({
selector: 'basic-input',
templateUrl: './basic-input.component.html',
styleUrls: ['./basic-input.component.scss'],
encapsulation: ViewEncapsulation.None,
providers: [
{provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicInputComponent), multi: true},
{provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => BasicInputComponent), multi: true},
],
})
export class BasicInputComponent extends BaseTextInput<string> implements OnInit {
constructor(protected injector: Injector, protected cdr: ChangeDetectorRef) {
super(cdr, injector);
}
ngOnInit() {
super.ngOnInit();
}
}
<mat-form-field [floatLabel]="floatLabel && 'always'" [appearance]="appearance">
<mat-label *ngIf="label && floatLabel !== 'never'">{{ label | translate: translateParams }}</mat-label>
<input
#inputElement
#input="ngForm"
matInput
label=""
[type]="type"
[attr.disabled]="disabled"
[readonly]="disabled"
[placeholder]="placeholder | translate: translateParams"
[formControl]="control"
[maxLength]="maxLength"
[name]="name"
[required]="required"/>
<mat-icon *ngIf="icon" matPrefix color="primary">{{icon}}</mat-icon>
<span *ngIf="suffix" matSuffix>{{suffix}}</span>
<mat-error *ngIf="hasError('required')">{{ 'COMMON.REQUIRED' | translate: translateParams }}</mat-error>
<mat-error *ngIf="hasError('max')">{{ 'ERROR.NUMERIC.MAX' | translate }}</mat-error>
<mat-error *ngIf="hasError('min')">{{ 'ERROR.NUMERIC.MIN' | translate }}</mat-error>
</mat-form-field>