Nativescript Angular Firebase Listeners populating ListView



I am trying to populate a ListView of custom components.
The ListView datasource is a BehaviourSubject populated by items retrieved from a Firebase listener. The datasource gets populated correctly but the ListView is empty.
Here is the relevant code :

  1. Profile Service

This is where the listener is added. I provide the callback function as a parameter

addProfilePhotosListener(callbackFunction: Function) {
        const userPhotosPath = 'somePath';
        return firebase.addChildEventListener(zonedCallback((data) => {
                }), userPhotosPath);
  1. ListView HTML

This is the html markup. I use the async pipe to retrieve data from the BehaviourSubject

<ListView [items]="profilePhotos | async">
    <ng-template let-item="item">
        <app-post [photo]="item"></app-post>
  1. ListView Component

These are the relevant parts of the associated component:
I use changeDetection as per the Nativescript Documentation.

Decorator :

  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush

Constructor : here is where I add the listener and register my callback function

  constructor(public profileService: ProfileService) {
    this.profilePhotos = new BehaviorSubject([]);

Listener callback function : this.items is a plain array and this.profilePhotos is my BehaviourSubject

  private addPhotoToArray(photo: ComunicationModels.PhotoDto) {

In the last function I can console.log the photo and item gets inserted in the items array.
What is wrong with my code? Why is nothing showing up? Is there a better way to dinamically populate the ListView?


Do you think your issue is specific to firebase? Can you confirm whether simply updating the profilePhotos (without firebase) still works?


Thanks for your reply!
No it’s not a Firebase specific issue as if I create a *ngFor on the array with the app post component,everything works


ListView worked just fine for me. Can you try to update this example and reproduce the issue?

NS-Angular async ListView not working

Thanks for the playground…anyways I fixed the error…it was the wrong binding of this inside the callback function.