Soma de valores de ion-input

Ionic Framework ionic-v3
1

Pessoal boa noite, estou desenvolvendo uma aplicação de cartão ponto digital. Acontece que, preciso fazer a soma de valores digitados pelo usuário nos ion-input. Esses ion-input inicialmente estavam com o type=“time”. Porém como eu não estava conseguindo manipular os elementos, eu mudei para type=“text”. Eu consigo manipular normalmente os dois input e fazer a soma dos dois, desde que eu não aplique a máscara de hora nos campos. Quando eu aplico a máscara ele retorna sempre NaN, se eu faço uma soma sem a máscara ele me informa o valor corretamente no console.

Alguém consegue me ajudar ? Como eu faria a manipulação desses valores, com essa máscara ? Ou alguma outra forma de manipular elementos do type=“time”?

Segue o meu código .ts

import { Component, ViewChild, ElementRef } from ‘@angular/core’;
import { NavController, AlertController } from ‘ionic-angular’;
import { FuncionariosDados } from ‘…/…/models/funcionarios’;
import { Funcionarios } from ‘…/…/services/funcionarios-service’;

@Component({
selector: ‘page-cadastro-de-funcion-rios’,
templateUrl: ‘cadastro-de-funcion-rios.html’
})

export class CadastroFuncionariosPage {

@ViewChild(‘inicioExpediente’) inicio: ElementRef;
@ViewChild(‘saidaIntervalo’) intervalo: ElementRef;

buttonClicked: boolean = false;
funcionario = {} as FuncionariosDados;

constructor(public navCtrl: NavController, public alert: AlertController, private funcionariosAdd: Funcionarios) {}

showAlert() {
const alert = this.alert.create({
subTitle: ‘Cadastro efetuado com sucesso!’,
buttons: [‘OK’]
});
alert.present();
}

ionViewDidLoad() {
console.log(‘ionViewDidLoad CadastroFuncionariosPage’);
}

addFuncionario(funcionario: FuncionariosDados) {
this.funcionariosAdd.addFuncionario(funcionario).then(ref => {
this.showAlert();
})
}

onButtonClick() {
this.buttonClicked = !this.buttonClicked;
}

calcular(){
var resultado = this.inicio.value - this.intervalo.value;
console.log(resultado);
}

Código HTML

  <ion-item id="cadastroDeFuncionRiosCLT-input19">
    <ion-label floating>
      Início do Expediente
    </ion-label>
    <ion-icon name="alarm" item-right></ion-icon>
    <ion-input [(ngModel)]="funcionario.inicioExpediente" type="text" name="input_inicio_exp" #inicioExpediente [brmasker]="{mask:'00:00', len:5}"></ion-input>
  </ion-item>
  <div class="spacer" style="height:8px;" id="cadastroDeFuncionRiosCLT-spacer16"></div>
  <ion-item id="cadastroDeFuncionRiosCLT-input22">
    <ion-label floating>
      Horário de Intervalo
    </ion-label>
    <ion-icon name="alarm" item-right></ion-icon>
    <ion-input [(ngModel)]="funcionario.horarioIntervalo" type="text" name="input_hora_intervalo" #saidaIntervalo [brmasker]="{mask:'00:00', len:5}"></ion-input>
  </ion-item>