How To Return First Element In Angular 6 Service

Cover image for How To Set Dynamic Height At Element With Angular Directive 📐

How To Set Dynamic Height At Element With Angular Directive 📐

The Problem

Interactive web designs crave elements with dynamic height that depends on their location in the window viewport. More specifically, their height starts at the top commencement position of the chemical element inside the window and ends at the cease of the window. In this article we volition try to implement dynamic summit using Athwart directives.

Implementation

Create New Angular Directive

First of all, we create an Angular directive by injecting the the native element from ElementRef.

                              @                Directive                ({                selector                :                "                [fluidHeight]                "                ,                })                consign                course                FluidHeightDirective                implements                AfterViewInit                {                @                Input                (                "                fluidHeight                "                )                topOffset                :                number                ;                // ...                individual                domElement                :                HTMLElement                ;                constructor                (                private                elementRef                :                ElementRef                )                {                this                .                domElement                =                this                .                elementRef                .                nativeElement                as                HTMLElement                ;                // ...                }                }

Calculate Top Get-go Of The Element

element-box-diagram

The adjacent step is to calculate the top beginning of the HTML element depending on the window. We apply the .getBoundingClientRect() method that returns a DOMRect object which is the smallest rectangle which contains the unabridged element, including its padding and border-width.

                              private                calcTopOffset                ():                number                {                attempt                {                const                rect                =                this                .                domElement                .                getBoundingClientRect                ();                const                scrollTop                =                window                .                pageYOffset                ||                document                .                documentElement                .                scrollTop                ;                return                rect                .                acme                +                scrollTop                ;                }                catch                (                due east                )                {                return                0                ;                }                }

Set Dynamic Height To Element

This method sets the calculated top to the host HTML element, using the Angular Renderer (Renderer2). If the user knows the to offset we don't need to recalculate information technology.

                              private                setHeight                ()                {                const                windowHeight                =                window                ?.                innerHeight                ;                const                topOffset                =                this                .                topOffset                ||                this                .                calcTopOffset                ();                let                height                =                windowHeight                -                topOffset                ;                // set up min height instead of the calculated                if                (                this                .                minHeight                &&                height                <                this                .                minHeight                )                {                meridian                =                this                .                minHeight                ;                }                this                .                renderer                .                setStyle                (                this                .                domElement                ,                '                height                '                ,                `                ${                height                }                px`                );                }

Observe Window Resize

Nosotros need to observe the window resize event in order to summate the elevation on any change. We use the fromEvent method from rxjs to register at window'due south resize events and it converts them to observable. The trouble here is that the events are too many when we resize the window and we have to decrease them. Thus, we use throttleTime and debounceTime from rxjs/operators to minimize the re-calculation of the dynamic meridian.

Tip: Unsubscribe on destroy to avoid retention leaks.

                              // annals on window resize outcome                fromEvent                (                window                ,                "                resize                "                )                .                pipe                (                throttleTime                (                500                ),                debounceTime                (                500                ))                .                subscribe                (()                =>                this                .                setHeight                ());

Last Effect 😉

Slap-up, we take done it! Nosotros accept created an Angular directive that sets dynamic superlative to its host HTML chemical element in a very curt time.

                              import                {                AfterViewInit                ,                Directive                ,                ElementRef                ,                Input                ,                Renderer2                ,                }                from                "                @angular/core                "                ;                import                {                fromEvent                }                from                "                rxjs                "                ;                import                {                debounceTime                ,                throttleTime                }                from                "                rxjs/operators                "                ;                @                Directive                ({                selector                :                "                [fluidHeight]                "                ,                })                consign                class                FluidHeightDirective                implements                AfterViewInit                {                @                Input                ()                minHeight                :                number                ;                @                Input                (                "                fluidHeight                "                )                topOffset                :                number                ;                private                domElement                :                HTMLElement                ;                constructor                (                private                renderer                :                Renderer2                ,                private                elementRef                :                ElementRef                )                {                this                .                domElement                =                this                .                elementRef                .                nativeElement                every bit                HTMLElement                ;                // register on window resize event                fromEvent                (                window                ,                "                resize                "                )                .                pipe                (                throttleTime                (                500                ),                debounceTime                (                500                ))                .                subscribe                (()                =>                this                .                setHeight                ());                }                ngAfterViewInit                ()                {                this                .                setHeight                ();                }                private                setHeight                ()                {                const                windowHeight                =                window                ?.                innerHeight                ;                const                topOffset                =                this                .                topOffset                ||                this                .                calcTopOffset                ();                permit                summit                =                windowHeight                -                topOffset                ;                // gear up min peak instead of the calculated                if                (                this                .                minHeight                &&                summit                <                this                .                minHeight                )                {                height                =                this                .                minHeight                ;                }                this                .                renderer                .                setStyle                (                this                .                domElement                ,                "                meridian                "                ,                `                ${                height                }                px`                );                }                private                calcTopOffset                ():                number                {                effort                {                const                rect                =                this                .                domElement                .                getBoundingClientRect                ();                const                scrollTop                =                window                .                pageYOffset                ||                document                .                documentElement                .                scrollTop                ;                return                rect                .                top                +                scrollTop                ;                }                catch                (                e                )                {                return                0                ;                }                }                }

We made it to the terminate!👏👏👏 Hope y'all found this article helpful! 😉