job-listing-vote.tsx

import {Component, Element, Prop, State} from '@stencil/core';
import firebase from 'firebase';

@Component({
  tag: 'job-item',
  styleUrl: 'job-item.scss'
})
export class JobItem {

  @Prop() job: any;
  @State() vote: any;
  @State() points: number;
  @State() votesRef: any;

  componentDidLoad() {
      // Look for votes
      this.updateWatchers();
      // Listen to firebase users...
  }

  updateWatchers() {
    // Find a reference to only votes that are for the associated job
    this.votesRef = firebase.database().ref('votes').orderByChild('voteOn').equalTo(this.job.id);
    // Attach a listner for changes on this reference
    this.votesRef.on('value', (snapshot) => {
        // Listen For New Votes, Update Vote Count And Current Vote
        console.log('Vote count changed', this.job.company);
        let voteCount = 0;
        snapshot.forEach( (vote): any => {
            let voteValue = vote.val();
            voteCount += voteValue.points;
            // Could do some other stuff here
        });
        console.log('voteCount' , voteCount);

        this.job.points = voteCount;
        this.points = voteCount;
     }, (err) => {
         console.warn(err);
     });
  }