Angular 5 property binding from within the component html for the same component

I am using the property isPersonalInfoValid as a flag for a wizard component

I want the emailform.valid (emailForm is just a reference to the ngForm shown in the html below) to update the component property [isPersonalInfoValid], I tried many ways but none worked, currently this [(isPersonalInfoValid)] is treated as a property of the emailForm which is wrong, I want to use it as a property of personal-info component.

The code below is from the personal-info.component.html

<form #emailForm="ngForm" [(isPersonalInfoValid)]="emailForm.valid">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" name="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"
      [(ngModel)]="data.email" required email>

The code of personal-info.component.ts is as follows:

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { FormWizardModule } from 'angular2-wizard';

@Component({
  selector: 'app-personal-info',
  templateUrl: './personal-info.component.html',
  styleUrls: ['./personal-info.component.css'],
  // encapsulation: ViewEncapsulation.None
})
export class PersonalInfoComponent implements OnInit {

  @Input() isPersonalInfoValid = false;
  data: any = {
    email: '[email protected]'
  };
  constructor() { }

  ngOnInit() {
  }

  onStep1Next(event) {
    console.log('Step1 - Next');
  }

  onStepChanged(step) {
    console.log('Changed to ' + step.title);
}

}

Your help is appreciated, thanks

Edit:

I can bind the property only if I am using the component selector (in another component) but then I can't access the form.valid property , like this

<app-personal-info #personalInfo  [isPersonalInfoValid]="emailForm.valid ></app-personal-info>

I need to make the binding so that the form.valid changes the property isPersonalInfoValid

Edit 2:

The code is here