This is code by Dmytro Mezhenskyi, from Decoded Frontend - see 👏 Inspiration below, to learn a higher level of Angular programming. The main modules are:
- advanced-search-form search from a list of countries shown in a drop-down list
- complex-form-control Custom form field control with Angular Material & Reactive Forms using the Angular Material design component library
- overlay-example Angular Date Range Picker
- patterns example Bridge Angular design pattern: velocity and weather widgets using a common wrapper
- Note: to open web links in a new window use: ctrl+click on link
- Multiple tutorial modules use the same code base - selected in
app.component.html
by commenting out unused modules
Uses these Angular features
- @ViewChild decorator to configure a view query
- custom form field control to be used inside mat-form-field
- HostBinding decorator to mark a DOM property as a host-binding property and supply configuration metadata
- Angular Accessibility - a11y - package to provide a number of tools to improve accessibility. FocusMonitor is used - an injected service to listen for changes in the focus state of an element
- ControlValueAccessor Interface used as an interface that acts as a bridge between the Angular forms API and a native element in the DOM
- @angular/core Self decorator used on constructor parameters to tell the DI framework to start dependency resolution from the local injector.
- @angular/core Optional decorator used on constructor parameters, which marks the parameter as being an optional dependency. The DI framework provides null if the dependency is not found.
- Angular material overlay directive
- Angular CDK Overlay service to create overlays
- Angular Material Datepicker to be able to enter a date either through text input or by choosing a date from the calendar
- @Angular/core ContentChild parameter decorator that configures a content query - to get reference to the template component
- Angular component error state
- DoCheck lifecycle to invoke a custom change-detection function for a directive, in addition to the check performed by the default change-detector.
- ForwardRef Function to refer to references which are not yet defined.
RxJS
- RxJS iif used to subscribe to first or second observable based on a condition
- RxJS merge to turn multiple observables into a single observable
- RxJS EMPTY to creates an Observable that emits no items to the Observer and immediately emits a complete notification - with no scheduler.
- RxJS Subject a special type of Observable that allows values to be multicasted to many Observers.
- Angular v14
- Angular Material v14
- RxJS v7 library of observable sequences
- Install dependencies using
npm i
ng serve
for a dev server. Navigate tohttp://localhost:4200/
. The app will automatically reload if you change any of the source files.- Individual modules are selected in the
app.component.html
by commenting out the other modules
- Init lifecycle: toggle focus, pass form changes to the onChange lifecycle hook
ngOnInit(): void {
this.focusMonitor.monitor(this.input).subscribe((focused) => {
this.focused = !!focused;
this.stateChanges.next();
});
this.focusMonitor
.monitor(this.input)
.pipe(take(1))
.subscribe(() => {
this.onTouch();
});
this.form.valueChanges.subscribe((value) => this.onChange(value));
}
- Rxjs is easy to read and implement
- Status: One error:
Argument of type 'ErrorStateMatcher' is not assignable to parameter of type 'FormGroupDirective'. Type 'ErrorStateMatcher' is missing the following properties from type 'FormGroupDirective': validators, asyncValidators, submitted, _oldForm, and 50 more.ts(2345)
- To-Do: Fix (type) error which is caused by Angular removing
CanUpdateErrorStateCtor
&CanDisableCtor
from@angular/material/core
as not required
-
All code from these Youtube tutorials by Decoded Frontend as below:
-
advanced-search-control
-
Angular Material - Custom Form Field Control [Advanced, 2020, Pt.1]
-
Angular Material - Custom Form Field Control [Advanced, 2020, Pt.2]
-
complex-form-control
-
overlay-example
-
Angular Material CDK - Overlay Module Pt.1 (Comprehensive overview, Angular 9 / 2020)
-
Angular material date range picker [Detailed overview, 2020]
-
patterns-example
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: gomezbateman@yahoo.com