Ionic Firebase Database card

Question

I would like add card with firebase database. My code :

//home.page.ts
loadTinderCards() {
    this.cards = [
      {
        img: "https://placeimg.com/300/300/nature",
        title: "Demo card 1",
        description: "This is a demo cards"
      },
    ]
  };

I don't want to write down every card one by one.

//home.page.html
<ion-content>

  <ion-refresher slot="fixed" (ionRefresh)="loadTinderCards()">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <tinder-ui [cards]="cards" (choiceMade)="logChoice($event)"></tinder-ui>


</ion-content>

Answer 1

I have a add page.

//add.page.html
<ion-content>
  <div class="header">
    <div class="title">Add</div>
  </div>

  <ion-item>
    <ion-label><b>Publiez quelque chose</b></ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Titre:</ion-label>
    <ion-input type="text" [(ngModel)]="postData.title"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Texte:</ion-label>
    <ion-input type="text" [(ngModel)]="postData.text"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Url de l'image:</ion-label>
    <ion-input type="text" [(ngModel)]="postData.imgUrl"></ion-input>
  </ion-item>
  <ion-button expand="block" (click)="publish()">Publier</ion-button>

</ion-content>

For send data in my database.

//add.page.ts
export class AddPage {
  postData = {
    text: '',
    imgUrl: '',
    title: ''
  };

  constructor(public router:Router,  public afDB: AngularFireDatabase,
    public afAuth: AngularFireAuth) {}


  publish() {
    this.afDB.list('Posts/').push({
       text: this.postData.text,
       imgUrl: this.postData.imgUrl,
       title: this.postData.title,
       likesNb: 0
    });
    this.postData = {
      title:'',
      text: '',
      imgUrl: ''
  };
 }

}