Class MainScreenComponent

MainScreenComponent dynamically displays a main screen area with responsive dimensions, adjustable layout, and stacking options based on the screen size and input properties.

Selector

app-main-screen-component

Standalone

true

Imports

CommonModule

Template

<div [ngStyle]="containerStyle">
  <ng-content></ng-content>
</div>

Inputs

  • mainSize (number): Percentage size of the main component. Default is 40.
  • doStack (boolean): Determines if components should be stacked. Default is true.
  • containerWidthFraction (number): Fraction of the container width to use. Default is 1.
  • containerHeightFraction (number): Fraction of the container height to use. Default is 1.
  • defaultFraction (number): Default height fraction for the container when controls are shown. Default is 0.94.
  • showControls (boolean): If true, shows control elements, affecting container height. Default is true.
  • updateComponentSizes (function): Callback for updating component sizes.

@ContentChildren('child') children - Query list of child elements within the component.

Properties

  • containerStyle: Returns a style object for the container based on dimensions and layout options.

Methods

  • ngOnInit(): Initializes the component and sets up event listeners for window resize and orientation changes.
  • ngOnChanges(changes: SimpleChanges): Updates dimensions and layout if any relevant inputs change.
  • ngOnDestroy(): Removes event listeners to prevent memory leaks.
  • ngAfterViewInit(): Applies computed styles to child elements after view initialization.
  • computeDimensions(): Calculates the dimensions for main and secondary components based on current layout settings.
  • updateDimensions(): Updates component dimensions based on window size and input properties.
  • applyChildStyles(): Applies computed styles to child components.

Example

<app-main-screen-component
  [mainSize]="60"
  [doStack]="false"
  [containerWidthFraction]="0.8"
  [containerHeightFraction]="0.9"
  [defaultFraction]="0.9"
  [showControls]="true"
  [updateComponentSizes]="onUpdateSizes"
>
  <div #child>Child Component</div>
</app-main-screen-component>

Implements

  • OnInit
  • OnChanges
  • AfterViewInit
  • OnDestroy

Accessors

computedContainerStyle

Constructors

constructor

Methods

updateComponentSizes ngOnInit ngOnDestroy ngOnChanges ngAfterViewInit computeDimensions updateDimensions applyChildStyles

Properties

mainSize doStack containerWidthFraction containerHeightFraction defaultFraction showControls containerStyle? customTemplate? children parentWidth parentHeight isWideScreen

Accessors

computedContainerStyle

  • get computedContainerStyle(): {
        accentColor?: string;
        alignContent?: string;
        alignItems?: string;
        alignSelf?: string;
        alignmentBaseline?: string;
        all?: string;
        animation?: string;
        animationComposition?: string;
        animationDelay?: string;
        animationDirection?: string;
        animationDuration?: string;
        animationFillMode?: string;
        animationIterationCount?: string;
        animationName?: string;
        animationPlayState?: string;
        animationTimingFunction?: string;
        appearance?: string;
        aspectRatio?: string;
        backdropFilter?: string;
        backfaceVisibility?: string;
        background?: string;
        backgroundAttachment?: string;
        backgroundBlendMode?: string;
        backgroundClip?: string;
        backgroundColor?: string;
        backgroundImage?: string;
        backgroundOrigin?: string;
        backgroundPosition?: string;
        backgroundPositionX?: string;
        backgroundPositionY?: string;
        backgroundRepeat?: string;
        backgroundSize?: string;
        baselineShift?: string;
        baselineSource?: string;
        blockSize?: string;
        border?: string;
        borderBlock?: string;
        borderBlockColor?: string;
        borderBlockEnd?: string;
        borderBlockEndColor?: string;
        borderBlockEndStyle?: string;
        borderBlockEndWidth?: string;
        borderBlockStart?: string;
        borderBlockStartColor?: string;
        borderBlockStartStyle?: string;
        borderBlockStartWidth?: string;
        borderBlockStyle?: string;
        borderBlockWidth?: string;
        borderBottom?: string;
        borderBottomColor?: string;
        borderBottomLeftRadius?: string;
        borderBottomRightRadius?: string;
        borderBottomStyle?: string;
        borderBottomWidth?: string;
        borderCollapse?: string;
        borderColor?: string;
        borderEndEndRadius?: string;
        borderEndStartRadius?: string;
        borderImage?: string;
        borderImageOutset?: string;
        borderImageRepeat?: string;
        borderImageSlice?: string;
        borderImageSource?: string;
        borderImageWidth?: string;
        borderInline?: string;
        borderInlineColor?: string;
        borderInlineEnd?: string;
        borderInlineEndColor?: string;
        borderInlineEndStyle?: string;
        borderInlineEndWidth?: string;
        borderInlineStart?: string;
        borderInlineStartColor?: string;
        borderInlineStartStyle?: string;
        borderInlineStartWidth?: string;
        borderInlineStyle?: string;
        borderInlineWidth?: string;
        borderLeft?: string;
        borderLeftColor?: string;
        borderLeftStyle?: string;
        borderLeftWidth?: string;
        borderRadius?: string;
        borderRight?: string;
        borderRightColor?: string;
        borderRightStyle?: string;
        borderRightWidth?: string;
        borderSpacing?: string;
        borderStartEndRadius?: string;
        borderStartStartRadius?: string;
        borderStyle?: string;
        borderTop?: string;
        borderTopColor?: string;
        borderTopLeftRadius?: string;
        borderTopRightRadius?: string;
        borderTopStyle?: string;
        borderTopWidth?: string;
        borderWidth?: string;
        bottom?: string;
        boxShadow?: string;
        boxSizing?: string;
        breakAfter?: string;
        breakBefore?: string;
        breakInside?: string;
        captionSide?: string;
        caretColor?: string;
        clear?: string;
        clip?: string;
        clipPath?: string;
        clipRule?: string;
        color?: string;
        colorInterpolation?: string;
        colorInterpolationFilters?: string;
        colorScheme?: string;
        columnCount?: string;
        columnFill?: string;
        columnGap?: string;
        columnRule?: string;
        columnRuleColor?: string;
        columnRuleStyle?: string;
        columnRuleWidth?: string;
        columnSpan?: string;
        columnWidth?: string;
        columns?: string;
        contain?: string;
        containIntrinsicBlockSize?: string;
        containIntrinsicHeight?: string;
        containIntrinsicInlineSize?: string;
        containIntrinsicSize?: string;
        containIntrinsicWidth?: string;
        container?: string;
        containerName?: string;
        containerType?: string;
        content?: string;
        contentVisibility?: string;
        counterIncrement?: string;
        counterReset?: string;
        counterSet?: string;
        cssFloat?: string;
        cssText?: string;
        cursor?: string;
        cx?: string;
        cy?: string;
        d?: string;
        direction?: string;
        dominantBaseline?: string;
        emptyCells?: string;
        fill?: string;
        fillOpacity?: string;
        fillRule?: string;
        filter?: string;
        flexBasis?: string;
        flexFlow?: string;
        flexGrow?: string;
        flexShrink?: string;
        flexWrap?: string;
        float?: string;
        floodColor?: string;
        floodOpacity?: string;
        font?: string;
        fontFamily?: string;
        fontFeatureSettings?: string;
        fontKerning?: string;
        fontOpticalSizing?: string;
        fontPalette?: string;
        fontSize?: string;
        fontSizeAdjust?: string;
        fontStretch?: string;
        fontStyle?: string;
        fontSynthesis?: string;
        fontSynthesisSmallCaps?: string;
        fontSynthesisStyle?: string;
        fontSynthesisWeight?: string;
        fontVariant?: string;
        fontVariantAlternates?: string;
        fontVariantCaps?: string;
        fontVariantEastAsian?: string;
        fontVariantLigatures?: string;
        fontVariantNumeric?: string;
        fontVariantPosition?: string;
        fontVariationSettings?: string;
        fontWeight?: string;
        forcedColorAdjust?: string;
        gap?: string;
        grid?: string;
        gridArea?: string;
        gridAutoColumns?: string;
        gridAutoFlow?: string;
        gridAutoRows?: string;
        gridColumn?: string;
        gridColumnEnd?: string;
        gridColumnGap?: string;
        gridColumnStart?: string;
        gridGap?: string;
        gridRow?: string;
        gridRowEnd?: string;
        gridRowGap?: string;
        gridRowStart?: string;
        gridTemplate?: string;
        gridTemplateAreas?: string;
        gridTemplateColumns?: string;
        gridTemplateRows?: string;
        hyphenateCharacter?: string;
        hyphens?: string;
        imageOrientation?: string;
        imageRendering?: string;
        inlineSize?: string;
        inset?: string;
        insetBlock?: string;
        insetBlockEnd?: string;
        insetBlockStart?: string;
        insetInline?: string;
        insetInlineEnd?: string;
        insetInlineStart?: string;
        isolation?: string;
        justifyContent?: string;
        justifyItems?: string;
        justifySelf?: string;
        left?: string;
        length?: number;
        letterSpacing?: string;
        lightingColor?: string;
        lineBreak?: string;
        lineHeight?: string;
        listStyle?: string;
        listStyleImage?: string;
        listStylePosition?: string;
        listStyleType?: string;
        marginBlock?: string;
        marginBlockEnd?: string;
        marginBlockStart?: string;
        marginBottom?: string;
        marginInline?: string;
        marginInlineEnd?: string;
        marginInlineStart?: string;
        marginLeft?: string;
        marginRight?: string;
        marginTop?: string;
        marker?: string;
        markerEnd?: string;
        markerMid?: string;
        markerStart?: string;
        mask?: string;
        maskClip?: string;
        maskComposite?: string;
        maskImage?: string;
        maskMode?: string;
        maskOrigin?: string;
        maskPosition?: string;
        maskRepeat?: string;
        maskSize?: string;
        maskType?: string;
        mathDepth?: string;
        mathStyle?: string;
        maxBlockSize?: string;
        maxHeight?: string;
        maxInlineSize?: string;
        maxWidth?: string;
        minBlockSize?: string;
        minHeight?: string;
        minInlineSize?: string;
        minWidth?: string;
        mixBlendMode?: string;
        objectFit?: string;
        objectPosition?: string;
        offset?: string;
        offsetAnchor?: string;
        offsetDistance?: string;
        offsetPath?: string;
        offsetPosition?: string;
        offsetRotate?: string;
        opacity?: string;
        order?: string;
        orphans?: string;
        outline?: string;
        outlineColor?: string;
        outlineOffset?: string;
        outlineStyle?: string;
        outlineWidth?: string;
        overflow?: string;
        overflowAnchor?: string;
        overflowClipMargin?: string;
        overflowWrap?: string;
        overflowX?: string;
        overflowY?: string;
        overscrollBehavior?: string;
        overscrollBehaviorBlock?: string;
        overscrollBehaviorInline?: string;
        overscrollBehaviorX?: string;
        overscrollBehaviorY?: string;
        paddingBlock?: string;
        paddingBlockEnd?: string;
        paddingBlockStart?: string;
        paddingBottom?: string;
        paddingInline?: string;
        paddingInlineEnd?: string;
        paddingInlineStart?: string;
        paddingLeft?: string;
        paddingRight?: string;
        paddingTop?: string;
        page?: string;
        pageBreakAfter?: string;
        pageBreakBefore?: string;
        pageBreakInside?: string;
        paintOrder?: string;
        parentRule?: null | CSSRule;
        perspective?: string;
        perspectiveOrigin?: string;
        placeContent?: string;
        placeItems?: string;
        placeSelf?: string;
        pointerEvents?: string;
        position?: string;
        printColorAdjust?: string;
        quotes?: string;
        r?: string;
        resize?: string;
        right?: string;
        rotate?: string;
        rowGap?: string;
        rubyPosition?: string;
        rx?: string;
        ry?: string;
        scale?: string;
        scrollBehavior?: string;
        scrollMargin?: string;
        scrollMarginBlock?: string;
        scrollMarginBlockEnd?: string;
        scrollMarginBlockStart?: string;
        scrollMarginBottom?: string;
        scrollMarginInline?: string;
        scrollMarginInlineEnd?: string;
        scrollMarginInlineStart?: string;
        scrollMarginLeft?: string;
        scrollMarginRight?: string;
        scrollMarginTop?: string;
        scrollPadding?: string;
        scrollPaddingBlock?: string;
        scrollPaddingBlockEnd?: string;
        scrollPaddingBlockStart?: string;
        scrollPaddingBottom?: string;
        scrollPaddingInline?: string;
        scrollPaddingInlineEnd?: string;
        scrollPaddingInlineStart?: string;
        scrollPaddingLeft?: string;
        scrollPaddingRight?: string;
        scrollPaddingTop?: string;
        scrollSnapAlign?: string;
        scrollSnapStop?: string;
        scrollSnapType?: string;
        scrollbarColor?: string;
        scrollbarGutter?: string;
        scrollbarWidth?: string;
        shapeImageThreshold?: string;
        shapeMargin?: string;
        shapeOutside?: string;
        shapeRendering?: string;
        stopColor?: string;
        stopOpacity?: string;
        stroke?: string;
        strokeDasharray?: string;
        strokeDashoffset?: string;
        strokeLinecap?: string;
        strokeLinejoin?: string;
        strokeMiterlimit?: string;
        strokeOpacity?: string;
        strokeWidth?: string;
        tabSize?: string;
        tableLayout?: string;
        textAlign?: string;
        textAlignLast?: string;
        textAnchor?: string;
        textCombineUpright?: string;
        textDecoration?: string;
        textDecorationColor?: string;
        textDecorationLine?: string;
        textDecorationSkipInk?: string;
        textDecorationStyle?: string;
        textDecorationThickness?: string;
        textEmphasis?: string;
        textEmphasisColor?: string;
        textEmphasisPosition?: string;
        textEmphasisStyle?: string;
        textIndent?: string;
        textOrientation?: string;
        textOverflow?: string;
        textRendering?: string;
        textShadow?: string;
        textTransform?: string;
        textUnderlineOffset?: string;
        textUnderlinePosition?: string;
        textWrap?: string;
        textWrapMode?: string;
        textWrapStyle?: string;
        top?: string;
        touchAction?: string;
        transform?: string;
        transformBox?: string;
        transformOrigin?: string;
        transformStyle?: string;
        transition?: string;
        transitionBehavior?: string;
        transitionDelay?: string;
        transitionDuration?: string;
        transitionProperty?: string;
        transitionTimingFunction?: string;
        translate?: string;
        unicodeBidi?: string;
        userSelect?: string;
        vectorEffect?: string;
        verticalAlign?: string;
        visibility?: string;
        webkitAlignContent?: string;
        webkitAlignItems?: string;
        webkitAlignSelf?: string;
        webkitAnimation?: string;
        webkitAnimationDelay?: string;
        webkitAnimationDirection?: string;
        webkitAnimationDuration?: string;
        webkitAnimationFillMode?: string;
        webkitAnimationIterationCount?: string;
        webkitAnimationName?: string;
        webkitAnimationPlayState?: string;
        webkitAnimationTimingFunction?: string;
        webkitAppearance?: string;
        webkitBackfaceVisibility?: string;
        webkitBackgroundClip?: string;
        webkitBackgroundOrigin?: string;
        webkitBackgroundSize?: string;
        webkitBorderBottomLeftRadius?: string;
        webkitBorderBottomRightRadius?: string;
        webkitBorderRadius?: string;
        webkitBorderTopLeftRadius?: string;
        webkitBorderTopRightRadius?: string;
        webkitBoxAlign?: string;
        webkitBoxFlex?: string;
        webkitBoxOrdinalGroup?: string;
        webkitBoxOrient?: string;
        webkitBoxPack?: string;
        webkitBoxShadow?: string;
        webkitBoxSizing?: string;
        webkitFilter?: string;
        webkitFlex?: string;
        webkitFlexBasis?: string;
        webkitFlexDirection?: string;
        webkitFlexFlow?: string;
        webkitFlexGrow?: string;
        webkitFlexShrink?: string;
        webkitFlexWrap?: string;
        webkitJustifyContent?: string;
        webkitLineClamp?: string;
        webkitMask?: string;
        webkitMaskBoxImage?: string;
        webkitMaskBoxImageOutset?: string;
        webkitMaskBoxImageRepeat?: string;
        webkitMaskBoxImageSlice?: string;
        webkitMaskBoxImageSource?: string;
        webkitMaskBoxImageWidth?: string;
        webkitMaskClip?: string;
        webkitMaskComposite?: string;
        webkitMaskImage?: string;
        webkitMaskOrigin?: string;
        webkitMaskPosition?: string;
        webkitMaskRepeat?: string;
        webkitMaskSize?: string;
        webkitOrder?: string;
        webkitPerspective?: string;
        webkitPerspectiveOrigin?: string;
        webkitTextFillColor?: string;
        webkitTextSizeAdjust?: string;
        webkitTextStroke?: string;
        webkitTextStrokeColor?: string;
        webkitTextStrokeWidth?: string;
        webkitTransform?: string;
        webkitTransformOrigin?: string;
        webkitTransformStyle?: string;
        webkitTransition?: string;
        webkitTransitionDelay?: string;
        webkitTransitionDuration?: string;
        webkitTransitionProperty?: string;
        webkitTransitionTimingFunction?: string;
        webkitUserSelect?: string;
        whiteSpace?: string;
        whiteSpaceCollapse?: string;
        widows?: string;
        willChange?: string;
        wordBreak?: string;
        wordSpacing?: string;
        wordWrap?: string;
        writingMode?: string;
        x?: string;
        y?: string;
        zIndex?: string;
        zoom?: string;
        getPropertyPriority?(property: string): string;
        getPropertyValue?(property: string): string;
        item?(index: number): string;
        removeProperty?(property: string): string;
        setProperty?(property: string, value: null | string, priority?: string): void;
        display: string;
        flex: string | number;
        flexDirection: string;
        width: string;
        height: string;
        padding: string | number;
        margin: string | number;
    }

  • Returns {
        accentColor?: string;
        alignContent?: string;
        alignItems?: string;
        alignSelf?: string;
        alignmentBaseline?: string;
        all?: string;
        animation?: string;
        animationComposition?: string;
        animationDelay?: string;
        animationDirection?: string;
        animationDuration?: string;
        animationFillMode?: string;
        animationIterationCount?: string;
        animationName?: string;
        animationPlayState?: string;
        animationTimingFunction?: string;
        appearance?: string;
        aspectRatio?: string;
        backdropFilter?: string;
        backfaceVisibility?: string;
        background?: string;
        backgroundAttachment?: string;
        backgroundBlendMode?: string;
        backgroundClip?: string;
        backgroundColor?: string;
        backgroundImage?: string;
        backgroundOrigin?: string;
        backgroundPosition?: string;
        backgroundPositionX?: string;
        backgroundPositionY?: string;
        backgroundRepeat?: string;
        backgroundSize?: string;
        baselineShift?: string;
        baselineSource?: string;
        blockSize?: string;
        border?: string;
        borderBlock?: string;
        borderBlockColor?: string;
        borderBlockEnd?: string;
        borderBlockEndColor?: string;
        borderBlockEndStyle?: string;
        borderBlockEndWidth?: string;
        borderBlockStart?: string;
        borderBlockStartColor?: string;
        borderBlockStartStyle?: string;
        borderBlockStartWidth?: string;
        borderBlockStyle?: string;
        borderBlockWidth?: string;
        borderBottom?: string;
        borderBottomColor?: string;
        borderBottomLeftRadius?: string;
        borderBottomRightRadius?: string;
        borderBottomStyle?: string;
        borderBottomWidth?: string;
        borderCollapse?: string;
        borderColor?: string;
        borderEndEndRadius?: string;
        borderEndStartRadius?: string;
        borderImage?: string;
        borderImageOutset?: string;
        borderImageRepeat?: string;
        borderImageSlice?: string;
        borderImageSource?: string;
        borderImageWidth?: string;
        borderInline?: string;
        borderInlineColor?: string;
        borderInlineEnd?: string;
        borderInlineEndColor?: string;
        borderInlineEndStyle?: string;
        borderInlineEndWidth?: string;
        borderInlineStart?: string;
        borderInlineStartColor?: string;
        borderInlineStartStyle?: string;
        borderInlineStartWidth?: string;
        borderInlineStyle?: string;
        borderInlineWidth?: string;
        borderLeft?: string;
        borderLeftColor?: string;
        borderLeftStyle?: string;
        borderLeftWidth?: string;
        borderRadius?: string;
        borderRight?: string;
        borderRightColor?: string;
        borderRightStyle?: string;
        borderRightWidth?: string;
        borderSpacing?: string;
        borderStartEndRadius?: string;
        borderStartStartRadius?: string;
        borderStyle?: string;
        borderTop?: string;
        borderTopColor?: string;
        borderTopLeftRadius?: string;
        borderTopRightRadius?: string;
        borderTopStyle?: string;
        borderTopWidth?: string;
        borderWidth?: string;
        bottom?: string;
        boxShadow?: string;
        boxSizing?: string;
        breakAfter?: string;
        breakBefore?: string;
        breakInside?: string;
        captionSide?: string;
        caretColor?: string;
        clear?: string;
        clip?: string;
        clipPath?: string;
        clipRule?: string;
        color?: string;
        colorInterpolation?: string;
        colorInterpolationFilters?: string;
        colorScheme?: string;
        columnCount?: string;
        columnFill?: string;
        columnGap?: string;
        columnRule?: string;
        columnRuleColor?: string;
        columnRuleStyle?: string;
        columnRuleWidth?: string;
        columnSpan?: string;
        columnWidth?: string;
        columns?: string;
        contain?: string;
        containIntrinsicBlockSize?: string;
        containIntrinsicHeight?: string;
        containIntrinsicInlineSize?: string;
        containIntrinsicSize?: string;
        containIntrinsicWidth?: string;
        container?: string;
        containerName?: string;
        containerType?: string;
        content?: string;
        contentVisibility?: string;
        counterIncrement?: string;
        counterReset?: string;
        counterSet?: string;
        cssFloat?: string;
        cssText?: string;
        cursor?: string;
        cx?: string;
        cy?: string;
        d?: string;
        direction?: string;
        dominantBaseline?: string;
        emptyCells?: string;
        fill?: string;
        fillOpacity?: string;
        fillRule?: string;
        filter?: string;
        flexBasis?: string;
        flexFlow?: string;
        flexGrow?: string;
        flexShrink?: string;
        flexWrap?: string;
        float?: string;
        floodColor?: string;
        floodOpacity?: string;
        font?: string;
        fontFamily?: string;
        fontFeatureSettings?: string;
        fontKerning?: string;
        fontOpticalSizing?: string;
        fontPalette?: string;
        fontSize?: string;
        fontSizeAdjust?: string;
        fontStretch?: string;
        fontStyle?: string;
        fontSynthesis?: string;
        fontSynthesisSmallCaps?: string;
        fontSynthesisStyle?: string;
        fontSynthesisWeight?: string;
        fontVariant?: string;
        fontVariantAlternates?: string;
        fontVariantCaps?: string;
        fontVariantEastAsian?: string;
        fontVariantLigatures?: string;
        fontVariantNumeric?: string;
        fontVariantPosition?: string;
        fontVariationSettings?: string;
        fontWeight?: string;
        forcedColorAdjust?: string;
        gap?: string;
        grid?: string;
        gridArea?: string;
        gridAutoColumns?: string;
        gridAutoFlow?: string;
        gridAutoRows?: string;
        gridColumn?: string;
        gridColumnEnd?: string;
        gridColumnGap?: string;
        gridColumnStart?: string;
        gridGap?: string;
        gridRow?: string;
        gridRowEnd?: string;
        gridRowGap?: string;
        gridRowStart?: string;
        gridTemplate?: string;
        gridTemplateAreas?: string;
        gridTemplateColumns?: string;
        gridTemplateRows?: string;
        hyphenateCharacter?: string;
        hyphens?: string;
        imageOrientation?: string;
        imageRendering?: string;
        inlineSize?: string;
        inset?: string;
        insetBlock?: string;
        insetBlockEnd?: string;
        insetBlockStart?: string;
        insetInline?: string;
        insetInlineEnd?: string;
        insetInlineStart?: string;
        isolation?: string;
        justifyContent?: string;
        justifyItems?: string;
        justifySelf?: string;
        left?: string;
        length?: number;
        letterSpacing?: string;
        lightingColor?: string;
        lineBreak?: string;
        lineHeight?: string;
        listStyle?: string;
        listStyleImage?: string;
        listStylePosition?: string;
        listStyleType?: string;
        marginBlock?: string;
        marginBlockEnd?: string;
        marginBlockStart?: string;
        marginBottom?: string;
        marginInline?: string;
        marginInlineEnd?: string;
        marginInlineStart?: string;
        marginLeft?: string;
        marginRight?: string;
        marginTop?: string;
        marker?: string;
        markerEnd?: string;
        markerMid?: string;
        markerStart?: string;
        mask?: string;
        maskClip?: string;
        maskComposite?: string;
        maskImage?: string;
        maskMode?: string;
        maskOrigin?: string;
        maskPosition?: string;
        maskRepeat?: string;
        maskSize?: string;
        maskType?: string;
        mathDepth?: string;
        mathStyle?: string;
        maxBlockSize?: string;
        maxHeight?: string;
        maxInlineSize?: string;
        maxWidth?: string;
        minBlockSize?: string;
        minHeight?: string;
        minInlineSize?: string;
        minWidth?: string;
        mixBlendMode?: string;
        objectFit?: string;
        objectPosition?: string;
        offset?: string;
        offsetAnchor?: string;
        offsetDistance?: string;
        offsetPath?: string;
        offsetPosition?: string;
        offsetRotate?: string;
        opacity?: string;
        order?: string;
        orphans?: string;
        outline?: string;
        outlineColor?: string;
        outlineOffset?: string;
        outlineStyle?: string;
        outlineWidth?: string;
        overflow?: string;
        overflowAnchor?: string;
        overflowClipMargin?: string;
        overflowWrap?: string;
        overflowX?: string;
        overflowY?: string;
        overscrollBehavior?: string;
        overscrollBehaviorBlock?: string;
        overscrollBehaviorInline?: string;
        overscrollBehaviorX?: string;
        overscrollBehaviorY?: string;
        paddingBlock?: string;
        paddingBlockEnd?: string;
        paddingBlockStart?: string;
        paddingBottom?: string;
        paddingInline?: string;
        paddingInlineEnd?: string;
        paddingInlineStart?: string;
        paddingLeft?: string;
        paddingRight?: string;
        paddingTop?: string;
        page?: string;
        pageBreakAfter?: string;
        pageBreakBefore?: string;
        pageBreakInside?: string;
        paintOrder?: string;
        parentRule?: null | CSSRule;
        perspective?: string;
        perspectiveOrigin?: string;
        placeContent?: string;
        placeItems?: string;
        placeSelf?: string;
        pointerEvents?: string;
        position?: string;
        printColorAdjust?: string;
        quotes?: string;
        r?: string;
        resize?: string;
        right?: string;
        rotate?: string;
        rowGap?: string;
        rubyPosition?: string;
        rx?: string;
        ry?: string;
        scale?: string;
        scrollBehavior?: string;
        scrollMargin?: string;
        scrollMarginBlock?: string;
        scrollMarginBlockEnd?: string;
        scrollMarginBlockStart?: string;
        scrollMarginBottom?: string;
        scrollMarginInline?: string;
        scrollMarginInlineEnd?: string;
        scrollMarginInlineStart?: string;
        scrollMarginLeft?: string;
        scrollMarginRight?: string;
        scrollMarginTop?: string;
        scrollPadding?: string;
        scrollPaddingBlock?: string;
        scrollPaddingBlockEnd?: string;
        scrollPaddingBlockStart?: string;
        scrollPaddingBottom?: string;
        scrollPaddingInline?: string;
        scrollPaddingInlineEnd?: string;
        scrollPaddingInlineStart?: string;
        scrollPaddingLeft?: string;
        scrollPaddingRight?: string;
        scrollPaddingTop?: string;
        scrollSnapAlign?: string;
        scrollSnapStop?: string;
        scrollSnapType?: string;
        scrollbarColor?: string;
        scrollbarGutter?: string;
        scrollbarWidth?: string;
        shapeImageThreshold?: string;
        shapeMargin?: string;
        shapeOutside?: string;
        shapeRendering?: string;
        stopColor?: string;
        stopOpacity?: string;
        stroke?: string;
        strokeDasharray?: string;
        strokeDashoffset?: string;
        strokeLinecap?: string;
        strokeLinejoin?: string;
        strokeMiterlimit?: string;
        strokeOpacity?: string;
        strokeWidth?: string;
        tabSize?: string;
        tableLayout?: string;
        textAlign?: string;
        textAlignLast?: string;
        textAnchor?: string;
        textCombineUpright?: string;
        textDecoration?: string;
        textDecorationColor?: string;
        textDecorationLine?: string;
        textDecorationSkipInk?: string;
        textDecorationStyle?: string;
        textDecorationThickness?: string;
        textEmphasis?: string;
        textEmphasisColor?: string;
        textEmphasisPosition?: string;
        textEmphasisStyle?: string;
        textIndent?: string;
        textOrientation?: string;
        textOverflow?: string;
        textRendering?: string;
        textShadow?: string;
        textTransform?: string;
        textUnderlineOffset?: string;
        textUnderlinePosition?: string;
        textWrap?: string;
        textWrapMode?: string;
        textWrapStyle?: string;
        top?: string;
        touchAction?: string;
        transform?: string;
        transformBox?: string;
        transformOrigin?: string;
        transformStyle?: string;
        transition?: string;
        transitionBehavior?: string;
        transitionDelay?: string;
        transitionDuration?: string;
        transitionProperty?: string;
        transitionTimingFunction?: string;
        translate?: string;
        unicodeBidi?: string;
        userSelect?: string;
        vectorEffect?: string;
        verticalAlign?: string;
        visibility?: string;
        webkitAlignContent?: string;
        webkitAlignItems?: string;
        webkitAlignSelf?: string;
        webkitAnimation?: string;
        webkitAnimationDelay?: string;
        webkitAnimationDirection?: string;
        webkitAnimationDuration?: string;
        webkitAnimationFillMode?: string;
        webkitAnimationIterationCount?: string;
        webkitAnimationName?: string;
        webkitAnimationPlayState?: string;
        webkitAnimationTimingFunction?: string;
        webkitAppearance?: string;
        webkitBackfaceVisibility?: string;
        webkitBackgroundClip?: string;
        webkitBackgroundOrigin?: string;
        webkitBackgroundSize?: string;
        webkitBorderBottomLeftRadius?: string;
        webkitBorderBottomRightRadius?: string;
        webkitBorderRadius?: string;
        webkitBorderTopLeftRadius?: string;
        webkitBorderTopRightRadius?: string;
        webkitBoxAlign?: string;
        webkitBoxFlex?: string;
        webkitBoxOrdinalGroup?: string;
        webkitBoxOrient?: string;
        webkitBoxPack?: string;
        webkitBoxShadow?: string;
        webkitBoxSizing?: string;
        webkitFilter?: string;
        webkitFlex?: string;
        webkitFlexBasis?: string;
        webkitFlexDirection?: string;
        webkitFlexFlow?: string;
        webkitFlexGrow?: string;
        webkitFlexShrink?: string;
        webkitFlexWrap?: string;
        webkitJustifyContent?: string;
        webkitLineClamp?: string;
        webkitMask?: string;
        webkitMaskBoxImage?: string;
        webkitMaskBoxImageOutset?: string;
        webkitMaskBoxImageRepeat?: string;
        webkitMaskBoxImageSlice?: string;
        webkitMaskBoxImageSource?: string;
        webkitMaskBoxImageWidth?: string;
        webkitMaskClip?: string;
        webkitMaskComposite?: string;
        webkitMaskImage?: string;
        webkitMaskOrigin?: string;
        webkitMaskPosition?: string;
        webkitMaskRepeat?: string;
        webkitMaskSize?: string;
        webkitOrder?: string;
        webkitPerspective?: string;
        webkitPerspectiveOrigin?: string;
        webkitTextFillColor?: string;
        webkitTextSizeAdjust?: string;
        webkitTextStroke?: string;
        webkitTextStrokeColor?: string;
        webkitTextStrokeWidth?: string;
        webkitTransform?: string;
        webkitTransformOrigin?: string;
        webkitTransformStyle?: string;
        webkitTransition?: string;
        webkitTransitionDelay?: string;
        webkitTransitionDuration?: string;
        webkitTransitionProperty?: string;
        webkitTransitionTimingFunction?: string;
        webkitUserSelect?: string;
        whiteSpace?: string;
        whiteSpaceCollapse?: string;
        widows?: string;
        willChange?: string;
        wordBreak?: string;
        wordSpacing?: string;
        wordWrap?: string;
        writingMode?: string;
        x?: string;
        y?: string;
        zIndex?: string;
        zoom?: string;
        getPropertyPriority?(property: string): string;
        getPropertyValue?(property: string): string;
        item?(index: number): string;
        removeProperty?(property: string): string;
        setProperty?(property: string, value: null | string, priority?: string): void;
        display: string;
        flex: string | number;
        flexDirection: string;
        width: string;
        height: string;
        padding: string | number;
        margin: string | number;
    }

Constructors

constructor

Methods

updateComponentSizes

ngOnInit

ngOnDestroy

ngOnChanges

ngAfterViewInit

computeDimensions

updateDimensions

applyChildStyles

Properties

mainSize

mainSize: number = 40

doStack

doStack: boolean = true

containerWidthFraction

containerWidthFraction: number = 1

containerHeightFraction

containerHeightFraction: number = 1

defaultFraction

defaultFraction: number = 0.94

showControls

showControls: boolean = true

OptionalcontainerStyle

containerStyle?: Partial<CSSStyleDeclaration>

OptionalcustomTemplate

customTemplate?: TemplateRef<any>

children

children: QueryList<ElementRef<any>>

parentWidth

parentWidth: number

parentHeight

parentHeight: number

isWideScreen

isWideScreen: boolean

Settings

Member Visibility

On This Page

Accessors
Constructors
Methods
Properties