Cacher is the code snippet organizer for pro developers

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

@Component({
  moduleId: module.id,
  selector: 'test5-app',
  templateUrl: 'test5.component.html',
  styleUrls: ['test5.component.css']
})

export class Test5AppComponent {
  stringX: string;
  arrayY: string[];
  
  constructor() {
    this.stringX = 'test5 works!';
    this.arrayY = ['one', 'two', 'three'];
  };

  onclick(myInput) {
    this.arrayY.push(myInput);
  };

  updateH1(obj) {
    this.stringX = obj;
  };
}

<h1>
  {{stringX}}
</h1>
<input #myInput (keyup.enter)="onclick(myInput.value)" (blur)="onclick(myInput.value)">
<button (click)="onclick(myInput.value)">Add</button>
<ul>
  <li (click)="updateH1(item)" *ngFor="let item of arrayY">
    {{item}}
  </li>
</ul>