Angular 2: Get Position of HTML Element

Is there a way to get the position of an element in Angular 8?

Here is an example on Stackblitz using getBoundingClientRect() to get all the data you need, and here is the code:

.ts :

import {
Component,
ElementRef,
ViewChild,
AfterViewInit,
AfterContentChecked,
AfterViewChecked
} from "@angular/core";

/**
* @title Basic Drag&Drop
*/
@Component({
selector: "cdk-drag-drop-overview-example",
templateUrl: "cdk-drag-drop-overview-example.html",
styleUrls: ["cdk-drag-drop-overview-example.css"]
})
export class CdkDragDropOverviewExample implements AfterViewChecked {
@ViewChild("block") block: ElementRef;

constructor() {}

ngAfterViewChecked() {
let datas = this.block.nativeElement.getBoundingClientRect();
console.log("datas = ", datas);
}

onDrop(item: any) {
console.log("item = ", item.target.getBoundingClientRect());
}
}

.html :

<div class="example-box" cdkDrag #block (mouseup)="onDrop($event)">
Drag me around
</div>

.css :

.example-box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
}

Note this is using cdkDrasg from Angular (I based the example from a stackblitz of the documentation) so you'll need to adapt a bit if you use something else for the drag & drop functionality.

Also, is you plan to edit the position manually (through typescript), consider using Renderer2 instead of using the ViewChild directly.

Manipulate position of an HTML element in angular 2

You can use appendChild using ElementRef. Here is an example

@Component({
selector: 'app',
template: `
<div>
<button type="button" (click)="appendToChild()">Append Item to Child</button>

<div #item>Item</div>

<div #appendToChildEl></div>
</div>
`
})
export class App {

@ViewChild('item') item: ElementRef;
@ViewChild('appendToChildEl') appendToChildEl: ElementRef;


appendToChild() {
this.appendToChildEl.nativeElement.appendChild(this.item.nativeElement);
}
}

A plunker example:
https://embed.plnkr.co/7DJ1nWN6sl563hcR71FV/

How to know position of html element in Angular Form

I don't have answer to this question, frankly because I don't think it's possible to do it in a clean way.

So the solution for me was to rework it whole and do it recursively so that adding another formControl/group would be easier and done in TS, after that just update or generate the whole html again.

Here are questions that reference the problem of generating it recursively:

Generate form trough loop

Generate table from form

How can you get current positional information about an element in Angular2

offsetTop is relative to it's place in the document, not relative to the view port.

See How to get an element's top position relative to the browser's window? for how to get the scroll position.

eg. var viewportOffset = el.getBoundingClientRect().top;

Get position X,Y from list from html

Use ViewChildren. If you use a template reference variable

<div #divItem *ngFor="let item from list">
{{item.lib}}
</div>

@ViewChildren('divItem') listDiv:QueryList<ElementRef>

In your function search

//first We lookfor the index of the Array
const index=this.list.findIndex(x=>indexOf(word)>=0)
if (index>=0)
{
//we find in the QueryList the element that has the "index"
const el=this.listDiv.find((_,i)=>i==index)
console.log(el.nativeElement.getBoundingClientRect())
//you can use also
el.nativeElement.scrollIntoView()
}

NOTE: You can use also a template reference variable in your input in the way

<input #input type="text" (input)="search(input.value)">

search(word:string){
....
}


Related Topics



Leave a reply



Submit