⚡ Angular Material Advanced

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

📄 Table of contents

• ⚡ Angular Material Advanced
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• 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.

📷 Screenshots

📶 Technologies

• Angular v14
• Angular Material v14
• RxJS v7 library of observable sequences

💾 Setup

• Install dependencies using npm i
• ng serve for a dev server. Navigate to http://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

💻 Code Examples

• 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));
  }

🆒 Features

• Rxjs is easy to read and implement

📋 Status & To-Do List

• 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

👏 Inspiration

• 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

• Control Value Accessor in Angular [Advanced, 2020]

• overlay-example

• Angular Material CDK - Overlay Module Pt.1 (Comprehensive overview, Angular 9 / 2020)

• Angular CDK - Overlay Module Pt.2 (Advanced, 2020)

• Angular material date range picker [Detailed overview, 2020]

• patterns-example

• Angular Design Patterns – Bridge [Advanced, 2020]

• Eight reasons why you should be using RxJS

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com