Documentation Feedback

Even though I am an Angular veteran I find myself struggling every time I want to create a custom material component.

I would like to see more guides / tutorials on how to wrap existing form field components such as matInput and mat-select.

Wrap a matInput or mat-select

I need to have a mat-select with some pre defined options that I reuse through out my application.
I would simply want to relay everything from my component to the underlying mat-select

<app-permission-select formControlName="myUserPermissions"></app-permission-select>

this should pass both value, changes, validation to the underlying mat-select

and since you most of the time also have a mat-form-field it should also work in this context

<mat-form-field>
  <mat-label>Permissions</mat-label>
  <app-permission-select formControlName="myUserPermissions"></app-permission-select>
</mat-form-field>

Wrap a auto complete or mat-select with async data fetching

This is very similar to the one above but because of its async nature it's more complex to get it right with how to best setup the data fetching, form merging and validation to work properly.

<mat-form-field>
  <mat-label>Select a Project Manager</mat-label>
  <app-user-picker formControlName="projectManager"></app-user-picker>
</mat-form-field>

The nature of this kind of custom input is often to auto complete or fetch a list of existing database items and be able to choose from them.

The guide could have a reactive service as a backing service for the picker
and the output to the projectManager field could be their User ID.

Summary

The more guides we have for common use cases the more people would visit the docs.
It doesn't matter if the guide doesn't match my need exactly. It should just guide you in the right direction regarding how to connect all the docs with:

• formControlName vs formControl
• ControlValueAccessor
• ControlContainer
• NgControl
• Validators

Ps. I would happily help to contribute if we first can discuss what the best solutions are for the above.

Examples

• https://stackblitz.com/edit/angular-custom-material-form-control