MoSheikh MoSheikh - 2 years ago 469
AngularJS Question

Angular 2 Testing App stuck on loading

making a test app for Angular 2 but for some reason I can't resolve, my app is stuck on "Loading..."

Here are the files:


import {Component} from '@angular/core';
import {LittleTourComponent} from './little-tour.component';

selector: 'my-app',
template: `
directives: [LittleTourComponent]
export class AppComponent { }


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

@Component ({
selector: 'little-tour',
template: `
<input #newHero (keyup.enter)='addHero(newHero.value)'
(blur)="addHero.(newHero.value); newHero.value = '' ">

<button (click) = addHero(newHero.value)>Add</button>

<ul><li *ngFor='let hero of heroes'>{{hero}}</li></ul>

export class LittleTourComponent {
heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
addHero (value: string) {
if (value) {


<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="systemjs.config.js"></script>
System.import('app').catch(function(err){ console.error(err); });


and the main.ts:

import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';


The terminal doesn't yield any errors when I start npm but I'm sure there's something I must've missed in the code. Since I'm still trying to wrap my head around the basics of Angular 2, your help would be greatly appreciated. Thank you!

Answer Source

It works now with this:

    <input #newHero (keyup.enter)='addHero(newHero.value)'
    (blur)="addHero" newHero.value = '' >


You can add value from your input box to the list like so:

<input  [(ngModel)] = "newHero">
<button (click) = addHero(newHero)>Add</button>
<ul><li *ngFor='let hero of heroes'>{{hero}}</li></ul>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download