kit-overlay

README

Service for hosting elements/components in a layer is above of the page content.

Scope

  • Modals
  • Tooltips
  • Dropdowns

Usage

Use *kitOverlay directive

Any element/component could be projected.

<div *kitOverlay="display">
  Some content
</div>

*kitOverlay - expects a boolean expression, like *ngIf.

Toggle

Instead of creating additional variable in a component and custom handler, you can handle click/hover by kitOverlayToggle directive.

KitOverlayToggleDirective also implements KitAnchor interface.

<button kitOverlayToggle #toggle="toggle">Dropdown here</button>
<ui-dropdown *kitOverlay="toggle.state">
             ...
</ui-dropdown>

Use KitOverlayService

const ref = this.overlayService.hostComponent({component: DemoOverlayComponent});

Data-binding

For service-hosted components we have methods for communication with component instance.

input
export class OverlayComponent {
  @Input() field: string;
}
const ref = this.overlayService.hostComponent({component: OverlayComponent});
ref.input({field: 'value'});

input method passes value to the defined field and calls ngOnChanges life-cycle hook (if needed).

output
export class OverlayComponent {
  @Output() event = new EventEmitter<any>();
}
const ref = this.overlayService.hostComponent({component: OverlayComponent});
ref.instance.event.subscribe((value: any) => {
});

Host components in Lazy Modules

You could get error No component factory found for NameOfComponent inside Lazy Modules. To solve the problem just provide KitOverlayService in this module.

Example

API

[class] KitOverlayComponentRef

@Injectable

Members

SignatureDescription
componentRef: ComponentRef<T>
input(input: KitOverlayInput<T>)

Pass input to the hosted component.

[class] KitOverlayHostWrapperComponent

@Component

Selector:'kit-overlay-host-wrapper'

[class] KitOverlayHostComponent

@Component

Selector:'kit-overlay-host'

[class] KitOverlayToggleDirective

@Directive

Selector:'[kitOverlayToggle]'
Export as:'toggle'

Members

SignatureDescription
@Input() trigger: KitOverlayToggleTrigger = 'click'
get stateChanges(): Observable<boolean>
get state()

Get state.

get elementRef(): ElementRef

Get reference to anchored element.

get nativeEl()

Get anchored html-element.

show()

Set state to true.

close()

Set state to false.

toggle()

Toggle state.

[class] KitOverlayModule

@NgModule

Exports:[ KitOverlayDirective, KitOverlayToggleDirective, ]

[class] KitOverlayService

@Injectable

Provided in:'root'

Members

SignatureDescription
readonly containerClass = 'kit-overlay-container'
get onHostStable(): Observable<void>
hostComponent({component, providers = [], componentFactoryResolver, viewContainerRef}: { component: Type<T>; providers?: StaticProvider[]; componentFactoryResolver?: ComponentFactoryResolver; viewContainerRef?: ViewContainerRef; }): KitOverlayComponentRef<T>

Render component in the overlay.

hostTemplate({templateRef, context = {}, viewContainerRef}: { templateRef: TemplateRef<any>, context?: any; viewContainerRef?: ViewContainerRef; }): ViewRef

Render template (passed by TemplateRef) on the overlay.

moveUnder(ref: ViewRef, target: ViewRef)

Move passed ViewRef under target ViewRef. Used for multi-modals backdrop handling.

[class] KitOverlayDirective

@Directive

Selector:'[kitOverlay]'

Members

SignatureDescription
@Input() kitOverlay: boolean
get displayed(): Observable<boolean>
get viewRef(): ViewRef | null
updateHost()

[interface] KitOverlayPositionDirectiveParams

Members

SignatureDescription
anchor(): KitAnchor | HTMLElement
autofix(): KitOverlayAutofix
position(): KitOverlayPosition
type(): KitOverlayType

[interface] StrategyEl

Members

SignatureDescription
bottom(): number
height(): number
left(): number
right(): number
top(): number
width(): number

[interface] StrategyField

Members

SignatureDescription
width(): number
height(): number