Angular child component change

<!doctype html>

<html>

<head>
  <script src="./lib/main.ts"></script>
</head>

<body>
  <my-app>
    loading...
  </my-app>
</body>

</html>

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { Parent } from './components/parent';
import { Child } from './components/child';

@Component({
    selector: 'my-app',
    template: `
        <div>
            <h2>Hi {{name}} </h2>
            <parent></parent>
        </div>
    `,
    styles: [`div { background-color: #CCC; padding: 1rem; }`]
})
export class App {
    name: string;
    constructor() {
        this.name = `Angular! v${VERSION.full}`;
    }
}

@NgModule({
    imports: [CommonModule, BrowserModule, FormsModule,  ReactiveFormsModule],
    declarations: [App, Parent, Child],
    bootstrap: [App],
})
export class AppModule {}

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

body {
    font-family: sans-serif;
}

import { Component } from '@angular/core';

@Component({
    selector: 'parent',
    template: `
    <div>
        <p><b>This is the parent component</b></p>
        <child [value]="item.key1"
               (valueChange)="onValueChange($event)">
            </child>
        <p><b>Variable Value:</b> {{item | json}} </p>
    </div>
    `
})
export class Parent {
    item = {
        key1: 'test value',
        key2: 'another test value'
    };

    onValueChange(newValue) {
        console.log('Initial: ' + newValue);

        if (newValue.length > 4) {
            newValue = newValue.substring(0, 4);
        }
        console.log('Final: ' + newValue);

        this.item.key1 = newValue;
    }
}

import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';

@Component({
    selector: 'child',
    template: `
    <div>
        <p>This is the child component</p>

        <input type="text"
               [(ngModel)]="value"
               (blur)="onBlur($event)" />

        <p><b>Value:</b> {{value}} </p>
    </div>
    `,
    styles: [`div { background-color: #0CC; padding: 0.1rem 1rem; }`]
})
export class Child {
    @Input() value: string;
    @Output() valueChange = new EventEmitter();

    onBlur() {
        this.valueChange.emit(this.value);
    }
}

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.3",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^6.0.9",
        "@angular/compiler": "^6.0.9",
        "@angular/core": "^6.0.9",
        "@angular/forms": "^6.0.9",
        "@angular/platform-browser": "^6.0.9",
        "@angular/platform-browser-dynamic": "^6.0.9",
        "core-js": "^2.5.5",
        "rxjs": "^6.1.0",
        "zone.js": "^0.8.26"
    },
    "main": "./lib/main.ts",
    "plnkr": {
        "runtime": "system",
        "useHotReload": true
    }
}

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}