Angular: TS2339: Property 'before' does not exist on type 'HTMLElement' / 'HTMLTextAreaElement' / etc / etc

Question

Goal: I need to move a div (that has a mat-select dropdown) ABOVE a mat-card-title IF the user is on a mobile device. If they are NOT on a mobile device, then I want to keep it where it is (to the right of the mat-card-title)

What it looks like on non mobile devices:

What I tried:

I tried using a basic condition with ngIf above, as well as below, but it makes the HTML look busy
I also thought about media queries but examples always show something moving down, not up (if it is nested within something else)
So then I tried using vanilla javascript, based on SO article: JavaScript moving element in the DOM
I've also looked at jQuery solutions, but I do not want to use jQuery

Problem: I am getting error TS2339: Property 'before' does not exist on type 'HTMLElement' as well as 'HTMLTextAreaElement'

I have tried many variations of casting these variables, as per Property 'value' does not exist on type 'HTMLElement' for Textarea - Angular But none of them work.

Not sure where to go from here?

HTML:

<div class="title-container">
    <mat-card-title id="signInTitle" class="text-center" i18n="@@MoVeSeLo_H1_1">
        Please Sign In
    </mat-card-title>
    <div id="langDropDown">
        <div *ngIf="(_lang_switch_controls)">
            <form [formGroup]="_siteForm">
                <mat-form-field class="language-field" appearance="outline">
                    <mat-select (selectionChange)="changeSite($event)" [value]="languages[i].value">
                        <mat-option *ngFor="let language of languages" [value]="language.value">
                            {{language.viewValue}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </form>
        </div>
    </div>
</div>

TypeScript:

const signInTitle = <HTMLTextAreaElement>document.getElementById("signInTitle");
const langDropDown = <HTMLDivElement>document.getElementById("langDropDown");

var uagent = navigator.userAgent.toLowerCase();
    if (uagent.match(/iPad|iPhone|android/)) {
        signInTitle.before(langDropDown);
    }

Can you show your `tsconfig.json` and `tsconfig.app.json`? – David May 13 '20 at 08:02 — David, May 13 '20 at 08:02
Which typescript version are you using? – David May 13 '20 at 16:33 — David, May 13 '20 at 16:33

David · Answer 1 · 2020-05-13T18:36:50.317

1

HtmlElement and the likes are defined in the typescript dom lib.

You need to use at least typescript 3.1.1 for these elements to implement ChildNode interface (which defines before method).

If you cannot update typescript, you can use insertBefore, or even the Renderer2 service from angular to manipulate DOM elements

edited May 13 '20 at 18:36

answered May 13 '20 at 16:49

David

33,444
11
80
118

Angular: TS2339: Property 'before' does not exist on type 'HTMLElement' / 'HTMLTextAreaElement' / etc / etc

1 Answers1