CODEWITHSUNDEEP
angular
sarath
sarath

Reputation: 700

How to call a component multiple times in Angular 2

I am new in Angular 2 . I just created a basic component in angular 2. The component is working, but when I call the component multiple times in the HTML, it only works for the first call.

Below is app.component.ts 

import {Component} from 'angular2/core';
import {bootstrap}    from 'angular2/platform/browser'


@Component({
    selector: 'click-me',
    template: `<input   #box (keyup.enter)="values=box.value"
          (blur)="onKey(box.value)" />`               
})

export class AppComponent {

    clickMessage = '';
    onKey(value: string) {

    }

    onClickMe() {    
        this.clickMessage = 'You are my hero!';
    }

bootstrap(AppComponent);

When I use '<click-me></click-me>' in my main index.html multiple times, it works for the first one.

Below is index.html

<html>
<script>
          System.config({
            packages: {        
              app: {
                format: 'register',
                defaultExtension: 'js'
              }
            }
          });
          System.import('app/app.component')
                .then(null, console.error.bind(console));
        </script>
      </head>
      <!-- 3. Display the application -->
      <body>

<click-me></click-me>
<click-me></click-me>
      </body>
    </html>

Upvotes: 0

Views: 5480

Answers (2)

Barry Tormey
Barry Tormey

Reputation: 3116

The reason this is happening is because you are trying to bootstrap a root element that has multiple instances. Coming from Angular 1, think of the bootstrap method in Angular 2 as the ng-app equivalent in Angular 1.

To overcome this issue, simply create a new component and import it into your root AppComponent. That way you can use it multiple times, and still pass a single instance into your bootstrap method.

It would look something like this:

import {bootstrap}    from 'angular2/platform/browser'
import {Component} from 'angular2/core';
import {DuplicateComponent} from 'app/duplicate.component.ts';

@Component({
    selector: 'my-app',
    template: "<click-me></click-me><click-me></click-me>",
    directives: [DuplicateComponent]
})
export class AppComponent { }

bootstrap(AppComponent);

and then the component you wanted to duplicate would contain your current logic

import {Component} from 'angular2/core';

@Component({
    selector: 'click-me',
    template: `<input   #box (keyup.enter)="clickMessage=box.value"
          (blur)="onKey(box.value)" />
          <button (click)="onClickMe()">Click</button>`
})

export class DuplicateComponent {
    clickMessage = '';
    onKey(value: string) { }

    onClickMe() {
        this.clickMessage = 'You are my hero!';
    }
}

It still appears your logic is a little bit off, but I think you're looking for something along these lines:

http://plnkr.co/edit/jcl7kZ4MzRBtL5WykoJj?p=preview

Upvotes: 4

muetzerich
muetzerich

Reputation: 5720

There was a bug in older beta versions. Try to update to the newest angular2 version.

Upvotes: 0

Related Questions