README.md

@shiftcode/ngx-components

Contains angular components and directives which are usable across different projects.

All components use changeDetection: ChangeDetectionStrategy.OnPush

auto-focus

Autofocus an element when building the view.

button

Custom button component to fix a bug in Safari/Firefox

click-outside

Event emitter for clicks outside an element.

flying-focus

Visualize focused element when using tab to navigate. Can be customized with css custom properties:

:root {
    --sc-flying-focus-gap: -4px;
    --sc-flying-focus-box-shadow: 0 0 0 2px black;
    --sc-flying-focus-border-radius: 0;
}

insert-view-ref

Directive to insert a viewRef in a template without the need to get a ViewChild in your controller

class ComponentX {
  readonly componentRef: ComponentRef<any> = createComponent(MyDynamicComponent, { ... })
}

  <ng-template [scInsertViewRef]="componentRef.hostView"></ng-template>

smooth-height

Animated change height of a container triggered by a custom value.

svg

Load SVGs when used and add as svg to the DOM.

textarea-autosize

Autosize the textarea while typing and/or programmatic value changes.

tooltip

Simple Text Tooltip. Can be customized with css custom properties:

:root {
  --sc-tooltip-background: #888;
  --sc-tooltip-color: #eee;
  --sc-tooltip-border-radius: 4px;
  --sc-tooltip-font-size: 12px;
  --sc-tooltip-line-height: 16px;
  --sc-tooltip-padding: 4px 8px;
}