Web Components
  1. Components
  2. BladeContainerComponent

File

qwc/projects/qwc/src/lib/components/qwc-blade-container/qwc-blade-container.component.ts

Description

-Manages life cycle of dynamically created components in container. -Add component to appropriate slot. -Move component to bin slot (hidden) once all slots get occupied.

Since the initial component is created via markup not dynamically, so it is not possible to move that element in bin slot. The initial component slot marked as hidden rather than moving to bin slot. (https://stackoverflow.com/questions/45069815/moving-a-component-to-another-parent-component-in-angular).

Implements

OnInit

Metadata

selector qwc-blade-container
templateUrl qwc-blade-container.component.html

Index

Properties
Methods

Constructor

constructor(componentFactoryResolver: ComponentFactoryResolver, bladeContainerService: BladeContainerService, renderer: Renderer2)
Parameters :
Name Type Optional
componentFactoryResolver ComponentFactoryResolver No
bladeContainerService BladeContainerService No
renderer Renderer2 No

Methods

addBladeItem
addBladeItem(bladeItem: BladeItem)

Add blade item to appropriate slot in container.

Parameters :
Name Type Optional
bladeItem BladeItem No
Returns : void

void
Public getBladeItemCount
getBladeItemCount()

Get blade item count

Returns : any

number Get blade item count
getInitialBladeStateObservable
getInitialBladeStateObservable()

Get initial state observable

Returns : any

any
isBackBtnToBeShown
isBackBtnToBeShown()

Is back button visible

Returns : boolean

boolean
isModalBlade
isModalBlade(slot: number)

Is modal blade

Parameters :
Name Type Optional
slot number No
Returns : boolean

boolean
maximizeLastBlade
maximizeLastBlade()

Maximize right most blade in container.

Returns : void

void
minimizeLastBlade
minimizeLastBlade()

Minimize right most blade in container.

Returns : void

void
ngOnInit
ngOnInit()

Component lifecycle hook

Returns : void

void
reset
reset()

Remove all blades except intial component.

Returns : void

void
shiftRight
shiftRight()

Shift visible components in slots to right side , remove rightmost slot's component and move last added component in bin slot to leftmost slot.

Returns : void

void
updateInputBindings
updateInputBindings(bladeItemToFound: BladeItem)

Update Input value bindings without creating component again.

Parameters :
Name Type Optional
bladeItemToFound BladeItem No
Returns : void

void

Properties

binSlot
Type : ViewContainerRef
Decorators :
@ViewChild('binSlot', {read: ViewContainerRef, static: true})
bladeItems
Type : BladeItem[]
Default value : []
bladeStateObservable
Default value : new Subject<BladeState>()
initialSlot
Type : ViewContainerRef
Decorators :
@ViewChild('initialContainer', {read: ViewContainerRef, static: true})
lgMQL
Default value : window.matchMedia(`(min-width: ${this.SCREEN_MEDIUM_SIZE + 1}px)`)
Readonly MAX_SUPPORTED_BLADE_SLOTS
Type : number
Default value : 3
mdMQL
Default value : window.matchMedia(`(min-width: ${this.SCREEN_SMALL_SIZE + 1}px) and (max-width: ${this.SCREEN_MEDIUM_SIZE}px)`)
observableInitialBladeState
Default value : new BehaviorSubject<BladeState>(new BladeState({ newBladeSize: this.computeBladeSizeBasedOnScreenSize(3, this.getScreenSize()) }))
Readonly SCREEN_LARGE
Type : string
Default value : "lg"
Readonly SCREEN_MEDIUM
Type : string
Default value : "md"
Readonly SCREEN_MEDIUM_SIZE
Type : number
Default value : 992
Readonly SCREEN_SMALL
Type : string
Default value : "sm"
Readonly SCREEN_SMALL_SIZE
Type : number
Default value : 675
slot1
Type : ViewContainerRef
Decorators :
@ViewChild('slot1', {read: ViewContainerRef, static: true})
slot2
Type : ViewContainerRef
Decorators :
@ViewChild('slot2', {read: ViewContainerRef, static: true})
slot3
Type : ViewContainerRef
Decorators :
@ViewChild('slot3', {read: ViewContainerRef, static: true})
smMQL
Default value : window.matchMedia(`(max-width: ${this.SCREEN_SMALL_SIZE}px)`)

result-matching ""

    No results matching ""