I’m fairly new to Ionic, and have a basic knowledge of using html and css. Currently working with a simple app wherein a user can login/create an account and can post a discussion which will then other users can upvote/downvote that discussion. I would like to implement that upvote/downvote system that display a count number on how many it receives on my ionic app using Firebase database + authentication.

Thank you so much

HTML:

<ion-card *ngFor="let post of posts">

<ion-card-content>
{{post.title}}
</ion-card-content> 

<ion-card-header>
<ion-card-title>{{ post.details }}</ion-card-title> 
</ion-card-header>

<ion-button (click)="onClick()" fill="clear" color="dark">
<ion-icon name="arrow-up-outline"></ion-icon>
</ion-button>

 //I would like this button to show the numbers of upvote/downvote 
<ion-button fill="clear">
<ion-label color="dark">{{ }}</ion-label>
</ion-button>

<ion-button (click)="onClick()" fill="clear" color="dark">
<ion-icon name="arrow-down-outline"></ion-icon>
</ion-button>

TS:

import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { LoadingController, ToastController } from '@ionic/angular';
import { AngularFirestore } from "@angular/fire/compat/firestore";

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
posts: any;

  constructor(
    private loadingCtrl: LoadingController,
    private toastCtrl: ToastController,
    private firestore: AngularFirestore,
    
  ) { }

  ngOnInit() {
  }

  ionViewWillEnter(){
this.getPosts();
  }

async getPosts(){
//show loader
let loader = this.loadingCtrl.create({
  message: "Please wait..."
});
(await loader).present();

try{
this.firestore.collection("discussion")
.snapshotChanges()
.subscribe(data => {
this.posts = data.map(e => {
  return{
    id: e.payload.doc.id,
    title: e.payload.doc.data()["title"],
    details: e.payload.doc.data()["details"],
  };
});
});

//dismiss loader
(await loader).dismiss();
} catch(e){
this.showToast(e);
}


}


showToast(message: string){
  this.toastCtrl.create({
    message: message,
    duration: 3000
  })
  .then(toastData => toastData.present());
}

}

TS:

export interface Discussion{
    title: string;
    details: string;
}
export interface User{
    email: string;
    password: string;
}