How to use @angular/cdk - 10 common examples

set step(v) {
        this._step = coerceNumberProperty(v, this._step);
        if (this._step % 1 !== 0) {
            this._roundLabelTo = /** @type {?} */ ((this._step.toString().split('.').pop())).length;
        }
        // Since this could modify the label, we need to notify the change detection.
        this._changeDetectorRef.markForCheck();
    }
    /**

private _resetSelection(): void {
		this.selection = new SelectionModel(this.isMultiSelectEnabled, []);

		// Emit event when selection changes
		if (this._selectionSub) {
			this._selectionSub.unsubscribe();
		}
		this._selectionSub = this.selection.changed.subscribe((change: SelectionChange) => {
			const selected: object[] = change.source.selected;
			this.selectChanged.emit(selected);
		});
	}

switchMap(() => this._itemSelectionChanges),
      );
    },
  );

  /** Output observable that fires every time the selection on the ToggleButtonGroup changes. */
  // Disabling no-output-native rule because we want to keep a similar API to the radio group
  // tslint:disable-next-line: no-output-native
  @Output() readonly change: Observable> = this
    ._itemSelectionChanges;

  /** Emits whenever the group component is destroyed. */
  private readonly _destroy = new Subject();

  /** Selection model for the current ToggleButtonGroup. */
  private _toggleButtonSelectionModel = new SelectionModel<
    DtToggleButtonItem
  >(false);

  /** @internal Content children which selects all DtToggleButtonItems within its content. */
  @ContentChildren(DtToggleButtonItem) _toggleButtonItems: QueryList<
    DtToggleButtonItem
  >;

  constructor(
    private _ngZone: NgZone,
    private _changeDetectorRef: ChangeDetectorRef,
  ) {}

  /** ngAfterContentInit Hook to initialize contentChildren observables.  */
  ngAfterContentInit(): void {
    // subscribe to toggleButtonItems changes in the contentchildren.

it('should move focus to the next header when pressing the up arrow', () => {
    const fixture = TestBed.createComponent(SetOfItems);
    fixture.detectChanges();

    const headerElements = fixture.debugElement.queryAll(By.css('mat-expansion-panel-header'));
    const headers = fixture.componentInstance.headers.toArray();

    focusMonitor.focusVia(headerElements[headerElements.length - 1].nativeElement, 'keyboard');
    headers.forEach(header => spyOn(header, 'focus'));

    // Stop before the first header
    for (let i = headers.length - 1; i > 0; i--) {
      dispatchKeyboardEvent(headerElements[i].nativeElement, 'keydown', UP_ARROW);
      fixture.detectChanges();
      expect(headers[i - 1].focus).toHaveBeenCalledTimes(1);
    }
  });

it('should focus the first item that starts with a letter', fakeAsync(() => {
        keyManager.onKeydown(createKeyboardEvent('keydown', 84, 't')); // types "t"

        tick(debounceInterval);

        expect(keyManager.activeItem).toBe(itemList.items[1]);
      }));

it('DELETE emits the (removed) event', () => {
          const DELETE_EVENT = createKeyboardEvent('keydown', DELETE) as KeyboardEvent;

          spyOn(testComponent, 'chipRemove');

          // Use the delete to remove the chip
          chipInstance._handleKeydown(DELETE_EVENT);
          fixture.detectChanges();

          expect(testComponent.chipRemove).toHaveBeenCalled();
        });

it('should focus previous item when press LEFT ARROW', () => {
          let nativeChips = chipListboxNativeElement.querySelectorAll('mat-chip-option');
          let lastNativeChip = nativeChips[nativeChips.length - 1] as HTMLElement;

          let LEFT_EVENT = createKeyboardEvent('keydown', LEFT_ARROW, undefined, lastNativeChip);
          let array = chips.toArray();
          let lastIndex = array.length - 1;
          let lastItem = array[lastIndex];

          // Focus the last item in the array
          lastItem.focus();
          expect(manager.activeItemIndex).toEqual(lastIndex);

          // Press the LEFT arrow
          chipListboxInstance._keydown(LEFT_EVENT);
          chipListboxInstance._blur(); // Simulate focus leaving the listbox and going to the chip.
          fixture.detectChanges();

          // It focuses the next-to-last item
          expect(manager.activeItemIndex).toEqual(lastIndex - 1);
        });

it('SPACE ignores selection', () => {
          const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE) as KeyboardEvent;

          spyOn(testComponent, 'chipSelectionChange');

          // Use the spacebar to attempt to select the chip
          chipInstance._keydown(SPACE_EVENT);
          fixture.detectChanges();

          expect(chipInstance.selected).toBeFalsy();
          expect(testComponent.chipSelectionChange).not.toHaveBeenCalled();
        });

it('should detect focus via touch', fakeAsync(() => {
    // Simulate focus via touch.
    dispatchFakeEvent(buttonElement, 'touchstart');
    buttonElement.focus();
    fixture.detectChanges();
    tick(TOUCH_BUFFER_MS);

    expect(buttonElement.classList.length)
        .toBe(2, 'button should have exactly 2 focus classes');
    expect(buttonElement.classList.contains('cdk-focused'))
        .toBe(true, 'button should have cdk-focused class');
    expect(buttonElement.classList.contains('cdk-touch-focused'))
        .toBe(true, 'button should have cdk-touch-focused class');
    expect(changeHandler).toHaveBeenCalledWith('touch');
  }));

it('should clear the timeouts on click', fakeAsync(() => {
        dispatchFakeEvent(nextButton, 'mousedown');
        fixture.detectChanges();

        dispatchFakeEvent(nextButton, 'click');
        fixture.detectChanges();

        // No need to assert. If fakeAsync doesn't throw, it means that the timers were cleared.
      }));