How to call a function from the component to the template?

Good morning, I'm trying to call a function that displays data from my database. But I'm not sure how to call the template.

    import { DatabaseProvider } from './../../providers/database/database';
    import { AreasProvider, Areas } from './../../providers/areas/areas';

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams, AlertController, ToastController } from 'ionic-angular';
    import { DragulaService } from 'ng2-dragula/ng2-dragula';
    import { SQLiteObject } from '@ionic-native/sqlite';

@IonicPage()
@Component({
  selector: 'page-area',
  templateUrl: 'area.html',
})

export class AreaPage {

  areaProvider: any;
  dbProvider: any;
  q1 = [];
  //q2 = [];
  r1=[];
  //r2=[]; 

  areas:any[]=[];
  onlyInactives:boolean =false;
  searchText: string=null;


  constructor(private navCtrl: NavController, public alertCtrl: AlertController, 
    private dragulaService: DragulaService, dbProvider:DatabaseProvider,
     private toast:ToastController,areaProvider:AreasProvider)  {



    for (var i = 0; i < 1 ; i++) {
      this.q1.push( i );
    //  this.q2.push( i );
    }

    for (var i = 0; i < 4; i++) {
      this.r1.push( i );
    //  this.r2.push( i );
      }


      dragulaService.drop.subscribe((value) => {
        let alert = this.alertCtrl.create({
          title: 'Item moved',
          subTitle: 'Item foi movido com sucesso!',
          buttons: ['OK']
        });
        alert.present();
      });
    }

    ionViewDidEnter(){
      this.getAll();
    }



    getAll(){
      this.areaProvider.getAll(!this.onlyInactives,this.searchText)
      .then((result: any[])=>{
        this.areas=result;
      });
    }

  }





<ion-header>
  <ion-navbar>
    <ion-title align="center" padding>AREA</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding style="background-color:#ffd700">

<!--                                             Primeiro Drag and Drop                                               -->
<ion-col  class="center">
    <br><br>
  <div class="header" padding align="center">
      <h2>Que área pertence ?</h2></div>

      <br><br><br> <ion-list [dragula]='"my-bag"' ([dragulaModel])="q1" align="center">
        <button ion-item *ngFor="let areas of q1" >
          {{q1.NOME}}
        </button>
      </ion-list>
    </ion-col>
<!--                                             Primeiro Drag and Drop                                               -->



<!--                                             Segundo Drag and Drop                                               -->
<ion-col  class="center">
    <br><br>
  <div class="header" padding align="center"></div>
      <br><br><br> <ion-list [dragula]='"my-bag"' [dragulaModel]="r1">
    <button ion-item *ngFor="let item of r1" >
      {{item}}
    </button>
  </ion-list>
</ion-col>
<!--                                             Segundo Drag and Drop                                               -->


<footer align="center">
  <ion-icon  name="mail"> [email protected]/</ion-icon>
  <ion-icon  name="mail"> [email protected]</ion-icon>
</footer>
</ion-content> 

I need to call pro template area