Angular Study notes (cdk-accessibility)

@angular/CKD is Ng's infrastructure for UI builds.

is developed and maintained by the material team, the reason why there is CDK seems to be because in the development of material at random abstraction a level out for everyone to use.

This series is I follow the official website tutorial and check the angular/material source of learning notes.

1. Keymanger

The application scenario is select, menu, which has the list options component, which is responsible for the logic of the option active when handling the keyboard up and down buttons

NG provides 3 classes of Listkeymanager, Focuskeymanager, Activedescendantkeymanager, focus, and active that are actually inherited by the Listkeymanager in general, with the same functionality.

It is very simple to use:

Chip-list.ts

@ContentChildren (matchip) chips:querylist<matchip>;

 This New Focuskeymanager<matchip> (this. chips). Withwrap ();

When instantiating the options to throw in, withwrap to support the loop, note that the option component to implement the Listkeymanageroption interface, so that Keymanager can set the active Ya

From the Keymanger of several methods to see its function of the source code

Setactiveitem (Index:number) OnKeydown (event:keyboardevent) setfirstitemactive () setlastitemactive () Setnextitemactive () setpreviousitemactive ()

Angular Study notes (cdk-accessibility)