Affichage avec angular 4

Bonjour,
Je suis débutante en Angular 4 et j'essaye d'afficher un input qui affiche ensuite les lettres affichées pour voir ce que cela fait.
Mais malheureusement rien ne s'affiche.
Quelqu'un sait-il pourquoi?
Merci d'avance pour votre réponse.

le fichier enfant app.children.ts:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'app-children',
  template:`<div>
    <div> 
      Propriété name:{{name}}
    </div>
     historique des valeurs :
    <ul>
      <li *ngFor="let oldName of nameHistory"> {{oldName}}</li>
    </lu>
  </div>`
})
 
export class ChildrenComponent {
 nameHistory: string[] = [];
 private _name: string;
 
 get name() :string{
  return this._name;
 }
 
  @Input()
  set name(value: string){
    this.nameHistory.push(value);
    this._name = value;
  }
}

le fichier parent app.component.ts:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
import { Component} from '@angular/core';
 
 
@Component({
	selector :'app-root',
	template: `
		<div>
			<input [(ngModel)]="message" placeholder="Mot à taper"/>
			<hr/>
			<app-children [name] ="message"></app-children>
		</div>`,
	styles:[`
			:host{
				display: inline-block;			
			}`]
 
})
export class AppComponent {
message: string; 
}