Geek Answers Handbook

Angular 2 Testing application downloaded at boot

creating a test application for Angular 2, but for some reason I can’t allow it, my application is stuck in "Loading ..."

Here are the files:

app.component.ts:

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

@Component({
    selector: 'my-app',
    template: `
    <h1>Test</h1>
    <little-tour></little-tour>
    `,
    directives: [LittleTourComponent]
})
export class AppComponent { }

little-tour.component.ts:

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) {
            this.heroes.push(value);
        }   
    }
}

index.html

<html>
  <head>
    <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>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

and main.ts:

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

bootstrap(AppComponent);

The terminal does not give any errors when starting npm, but I am sure that there is something in the code that I should skip. Since I'm still trying to wrap my head around the basics of Angular 2, your help would be greatly appreciated. Thank!

+4
source share
1 answer

Now it works with this:

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

plunker

You can add a value from your input field to the list as follows:

<input  [(ngModel)] = "newHero">
<button (click) = addHero(newHero)>Add</button>
<ul><li *ngFor='let hero of heroes'>{{hero}}</li></ul>
+3

More articles:


All Articles