Skip to content
@ng-doc/app / Interface

NgDocTypeControl

Interface describing Type Control.

A type control is a ControlValueAccessor. The playground sets the fields below before the control renders; declare them as plain fields or as signal inputs (name = input<string>()). A field declared as an input (a signal input or an @Input()) is set as an input, so the control's ngOnChanges reports it; a plain field is assigned and is not reported.

Generic types
T
Extends
ControlValueAccessor
DeclarationTypeScript
export interface NgDocTypeControl<T = unknown>
  extends ControlValueAccessor { … }

Members

Properties

5
default?: NgDocTypeControlField<T> | undefined

The default value of the input

description?: NgDocTypeControlField<string> | undefined

The description of the input (based on the comment)

isManual?: NgDocTypeControlField<boolean> | undefined

Determines if the property is manually added by the user using controls property in playground config

name?: NgDocTypeControlField<string> | undefined

The name of the input for which it is created

options?: NgDocTypeControlField<string[]> | undefined

The list of possible values, it usually works only for Type Aliases which has several values

Methods

4
(…): void
inherited from ControlValueAccessor

@description Registers a callback function that is called when the control's value changes in the UI.

This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.

When implementing the registerOnChange method in your own value accessor, save the given function so your class calls it at the appropriate time.

@usageNotes

Store the change function

The following example stores the provided function as an internal method.

registerOnChange(fn: (_: any) => void): void {
  this._onChange = fn;
}

When the value changes in the UI, call the registered function to allow the forms API to update itself:

host: {
   '(change)': '_onChange($event.target.value)'
}
(…): void
inherited from ControlValueAccessor

@description Registers a callback function that is called by the forms API on initialization to update the form model on blur.

When implementing registerOnTouched in your own value accessor, save the given function so your class calls it when the control should be considered blurred or "touched".

@usageNotes

Store the callback function

The following example stores the provided function as an internal method.

registerOnTouched(fn: any): void {
  this._onTouched = fn;
}

On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:

host: {
   '(blur)': '_onTouched()'
}
(…): void
inherited from ControlValueAccessor

@description Function that is called by the forms API when the control status changes to or from 'DISABLED'. Depending on the status, it enables or disables the appropriate DOM element.

@usageNotes The following is an example of writing the disabled property to a native DOM element:

setDisabledState(isDisabled: boolean): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
}
(…): void
inherited from ControlValueAccessor

@description Writes a new value to the element.

This method is called by the forms API to write to the view when programmatic changes from model to view are requested.

@usageNotes

Write a value to the element

The following example writes a value to the native DOM element.

writeValue(value: any): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
}
Symbol
Kind
Interface
Generic types
T
Extends
ControlValueAccessor
Scope
@ng-doc/app
Edit this page