CODEWITHSUNDEEP
chatnativescriptnativescript-angular
Nibir Alam
Nibir Alam

Reputation: 110

Get current element in listview

I am developing a simple messenger. I want to implement message seen/unseen feature. How can i get the position of the marked elements, these elements are inside the wrap layout which is inside the listview?

enter image description here

This is the code i am using to render messages.

<ListView (loaded)="testLoad($event)"
   #chatBox
   separatorColor="transparent"
   class="chat-box"
   [items]="messages"
  (loaded)="scrollChatToBottom()"
  row="0">
  <ng-template let-item="item">
  <StackLayout 
    class="bubble-container">
    <Label
        [text]="item.createdAt | timeAgo"
        class="message-date-{{bubbleClass(item)}} SourceSansPro- 
   LightItalic"></Label>
    <WrapLayout 
      [class]="bubbleClass(item)" orientation="horizontal">
      <!--<Image 
      [src]="item.sender.pictureUrl"
      [class]="bubbleClass(item) + '-picture'">e></Imag-->
      <TextView
        editable="false"
        class="message-content SourceSansPro-Regular"
        [text]="item.messageBody"></TextView> 

    </WrapLayout >

    </StackLayout>
   </ng-template>
 </ListView>

Upvotes: 0

Views: 322

Answers (2)

Eliseo
Eliseo

Reputation: 57981

I don't know about ListView, but I supouse always can use a directive to get the ElementRef. If you has the ElementRef you can get the el.nativeElement.offsetTop.

So, the only thing it's make some like:

@Directive({
  selector: '[pos]'
})
export class PosDirective  {
  @Input('pos') index:number;
  el:ElementRef
  constructor(el:ElementRef){ 
    this.el=el;
   }
}

Our directive need the "index". I put a simple example using a ngFor in <p>

<p [pos]="i" *ngFor="let item of data;let i=index">{{item}}</p>
<button (click)="showPos(0)">click</button>

We "get the p" (really the directive) using ViewChildren

  @ViewChildren(PosDirective)positions:QueryList<PosDirective>;

  showPos(index:number)
  {
    const elem=(this.positions.toArray()[index]) as PosDirective;
    console.log(elem.el.nativeElement.offsetTop)
  }

See the stackblitz

Upvotes: 1

Manoj
Manoj

Reputation: 21908

The whole idea of ListView is to reuse the View (template) as needed, only the data may be different but the same instance of View will be reused for different indexes as you scroll.

So in general you should control your View by your data. If you are planning to show read message as bold / light or in different color it can be done via CSS, so just have to bind the right class based on read / unread flag in your data item.

If you still want to access the actual View element, it may be possible with RadListView. I don't think there is an easy way to access the View instance in ListView at the moment.

Upvotes: 1

Related Questions