Cloudflight Js Utils

Appearance

IsDisplayDirective ​

Class

Adds and removes the element depending on the current breakpoint. For the breakpoint-queries passed to this directive please consult provideIsDisplay.

Example 1

html
<div *clfIsDisplay="'small'">small</div>

Example 2

html
<div *clfIsDisplay="'!small'">not small</div>

Example 3

html
<div *clfIsDisplay="'>=small'">not small</div>

Example 4

html
<div *clfIsDisplay="'<=small'">not small</div>

Example 5

html
<div *clfIsDisplay="'small'; else implicitNotSmall">small</div>

<ng-template #implicitNotSmall>
    <div>not small</div>
</ng-template>

Example 6

html
<ng-container *clfIsDisplay="'small'; then explicitSmall; else explicitNotSmall"></ng-container>

<ng-template #explicitSmall>
    <div>small</div>
</ng-template>

<ng-template #explicitNotSmall>
    <div>not small</div>
</ng-template>

See ​

Source: lib/directive/is-display.directive.ts:68

Implements ​

  • OnDestroy

Accessors ​

clfIsDisplay ​

set clfIsDisplay(option: ValidOption): void

Source: lib/directive/is-display.directive.ts:114

clfIsNotDisplay ​

set clfIsNotDisplay(option: string | number): void

Source: lib/directive/is-display.directive.ts:124