Convert AngularJS to Angular 4

Question

I am a beginner with Angular4, I try to create an indetermine checkbox but it does not work, I want something like that, if you can translate this AngularJS code to Angular4, I would be grateful.

 

code Html : 

<div data-ng-repeat="person in model.people" class="person">

<label>

<input type="checkbox" data-indeterminate-checkbox data-child-list="person.fruits" data-property="eaten" data-ng-model="person.allEaten"> {{person.name}} [All eaten: {{person.allEaten}}]

</label>

<div data-ng-repeat="fruit in person.fruits" class="child-list">

<label>

<input type="checkbox" data-ng-model="fruit.eaten"> {{fruit.type}}

</label>

</div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>

 

code AngularJS : 

var app = angular.module('combo', []);

app.controller('MainCtrl', ['$scope', function($scope) {

$scope.model = {

allEaten: false,

people: [

{

name: "Bob",

fruits: [

{ type: 'Apple', eaten: false },

{ type: 'Banana', eaten: false },

{ type: 'Pear', eaten: true },

{ type: 'Tomato', eaten: false },

{ type: 'Grapefruit', eaten: true },

]

},

{

name: "Joe",

fruits: [

{ type: 'Apple', eaten: true },

{ type: 'Banana', eaten: true },

{ type: 'Pear', eaten: true },

{ type: 'Tomato', eaten: true },

{ type: 'Grapefruit', eaten: true },

]

}

]

};

}]);

/**

* Directive for an indeterminate (tri-state) checkbox.

* Based on the examples at http://stackoverflow.com/questions/12648466/how-can-i-get-angular-js-checkboxes-with-select-unselect-all-functionality-and-i

*/

app.directive('indeterminateCheckbox', [function() {

return {

scope: true,

require: '?ngModel',

link: function(scope, element, attrs, modelCtrl) {

var childList = attrs.childList;

var property = attrs.property;

// Bind the onChange event to update children

element.bind('change', function() {

scope.$apply(function () {

var isChecked = element.prop('checked');

// Set each child's selected property to the checkbox's checked property

angular.forEach(scope.$eval(childList), function(child) {

child[property] = isChecked;

});

});

});

// Watch the children for changes

scope.$watch(childList, function(newValue) {

var hasChecked = false;

var hasUnchecked = false;

// Loop through the children

angular.forEach(newValue, function(child) {

if (child[property]) {

hasChecked = true;

} else {

hasUnchecked = true;

}

});

// Determine which state to put the checkbox in

if (hasChecked && hasUnchecked) {

element.prop('checked', false);

element.prop('indeterminate', true);

if (modelCtrl) {

modelCtrl.$setViewValue(false);

}

} else {

element.prop('checked', hasChecked);

element.prop('indeterminate', false);

if (modelCtrl) {

modelCtrl.$setViewValue(hasChecked);

}

}

}, true);

}

};

}]);

 

Here is the link : http://jsfiddle.net/johnwun/wnjze03h/