Skip to content

ngx-components 15.3.0-pr87.3

Install from the command line:
Learn more about npm packages
$ npm install @shiftcode/ngx-components@15.3.0-pr87.3
Install via package.json:
"@shiftcode/ngx-components": "15.3.0-pr87.3"

About this version

@shiftcode/ngx-components

🎯
Target runtime: Node >=24 and modern Browsers + Firefox ESR
Target lib: es2022 + ES2023.Array

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;
}

testing-fab

Floating action button for non-production testing controls.

import { provideTestingFab, TestingFabComponent } from '@shiftcode/ngx-components'

bootstrapApplication(AppComponent, {
  providers: [
    provideTestingFab([
      {
        id: 'backend-env',
        label: 'Backend Environment',
        type: 'select-query-param',
        queryParam: 'env',
        options: [
          { label: 'QA', value: 'qa' },
          { label: 'Preview', value: 'preview' },
        ],
      },
    ]),
  ],
})

Add <sc-testing-fab /> once in a root-level template where it should be available.

Details

Assets

  • ngx-components-15.3.0-pr87.3.tgz

Download activity

  • Total downloads 1
  • Last 30 days 1
  • Last week 1
  • Today 0

Recent versions

View all