Development documentation
  1. Components
  2. UppVisibleControlComponent

File

libs/upp-wdgt/src/components/upp-visible/upp-visible.ts

Description

A wrapper component that utilizes the VisibleDirective to detect and manage visibility changes. It optimizes performance by detaching and reattaching Angular's change detection mechanism based on the component's visibility.

Example :
```html
<upp-visible-control (visibilityChange)="onVisibilityChange($event)">
  <p>Content inside this component will only update when visible.</p>
</upp-visible-control>
Example :
```typescript
onVisibilityChange(isVisible: boolean) {
  console.log('Component is visible:', isVisible);
}

Implements

AfterViewInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector upp-visible-control
templateUrl ./upp-visible.html

Index

Properties
Methods
Outputs

Constructor

constructor(change: ChangeDetectorRef)
Parameters :
Name Type Optional Description
change ChangeDetectorRef No

A reference to Angular's ChangeDetectorRef, used to manually control change detection.

Outputs

visibilityChange
Type : EventEmitter<boolean>

Emits a boolean value whenever the component's visibility changes. true if the component is visible, false otherwise.

Methods

ngAfterViewInit
ngAfterViewInit()

Lifecycle hook that runs after Angular has initialized the view. It checks if the component is initially visible and detaches change detection if it is not.

Returns : void
onVisibilityChange
onVisibilityChange(isVisible: boolean)

Handles visibility changes detected by the VisibleDirective. Detaches Angular's change detection when the component is hidden and reattaches it when visible.

Parameters :
Name Type Optional Description
isVisible boolean No
  • The new visibility state of the component.
Returns : void

Properties

_directive
Type : VisibleDirective | undefined
Decorators :
@ViewChild(VisibleDirective)
 
<div uppVisible style="display: contents;" (visibilityChange)="onVisibilityChange($event)">
    <ng-content></ng-content>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""