Ionic 3 App - Best way to work with non-ionic html components

Ionic library offers a big collection of components and the documentation is great. So, if you need a button with a custom function called onClick, you quickly find the best way to do it by placing the button into a page.html (home.html in my case)

<button ion-button (click)="logEvent(this)"> Button</button>

and adding a function to the into a page.ts (home.ts in my case)

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  logEvent(event) {
    console.log(event);
  }
}

But what is the best way to work with non-ionic elements such as a standard html checkbox element? Because Ionic 3 does not have a star rating element, I have to import a third-party solution for this element.

The rendering works well and the star rating looks like this .

Now my problem is, I need to bind an onClick function to the inputs of the checkbox element. Having some minor experience in JavaScript, I tend to simply define a script section in the page.html and do some regular JavaScript binding. This, however, does not feel right, and, does no even seem to work.

I would appreciate if someone with experience could point out the most likely obvious way to do it as I could not google it. Obviously I am searching the wrong direction.

The checkbox element looks like this:

<div class="wrapper">
  <input type="checkbox" id="st1" value="1" />
  <label for="st1"></label>
  <input type="checkbox" id="st2" value="2" />
  <label for="st2"></label>
  <input type="checkbox" id="st3" value="3" />
  <label for="st3"></label>
  <input type="checkbox" id="st4" value="4" />
  <label for="st4"></label>
  <input type="checkbox" id="st5" value="5" />
  <label for="st5"></label>
</div>