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
Space Between Navbar and the Content
Prevent Child Div from Overflowing Its Parent Container When Resizing the Page
How to Load Image (And Other Assets) in Angular an Project
Parent Div Don't Wrap Child Div
How to Embed an External Webpage Without Using Iframe
How to Prevent Autoplay in Iframe HTML Content
Force Element to Display Outside of Overflow:Hidden
Make First Column Fixed and Next Column Scrollable in HTML Table
Provide an Image for Whatsapp Link Sharing
How to Disable Viewport Zooming on Mobile Safari
Chrome User Agent Stylesheet Overwriting My Site Style
Using Mailto to Send Email With an Attachment
Make an HTML Number Input Always Display 2 Decimal Places
Reverse Order of Columns in CSS Grid Layout
How to Click a Button on a Website Using Puppeteer Without Any Class, Id ,... Assigned to It