CODEWITHSUNDEEP
angular
Fazal Shah
Fazal Shah

Reputation: 73

component reusability in angular 2.0

I've just started to learn angular 2.0 and gotta confused to reuse the component once built. I started to learn quickstart example from https://angular.io/guide/quickstart and runs fine. But when I use that component again, It doesn't works. Heres my code:

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true }
      });
      System.import('app.ts');
    </script>
</head>
<body>
    <my-app>loading...</my-app>
    <my-app>loading...</my-app>
</body>
</html>

and this is my app.ts file:

import {Component, bootstrap} from 'angular2/angular2';
@Component({
    selector: 'my-app',
    template: '<h1>{{username}}</h1>'
})
class AppComponent {
    public username = "something";
}
bootstrap(AppComponent);

and the output shows:

something
loading...

What happened to second one!!!. Thanks in advance for making me clear how this works and how i gonna work out.

Upvotes: 1

Views: 281

Answers (1)

rerezz
rerezz

Reputation: 4210

Your AppComponent is the applications root component. Within the root component you can have reusable components. I've created a simple example: (http://plnkr.co/edit/02D8RI?p=preview):

The Application component contains two simple components:

<div>
  <h2>Hello Angular2!</h2>
  <simple></simple>
  <simple></simple>
</div>

The simple component: 

import { Component } from 'angular2/angular2';
@Component({
   selector: 'simple',
   template: '<h1>{{username}}</h1>'
})
export class SimpleComponent {
  public username = "something";
}

The concept of components is well described in Viktor Savkin's post: http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2

Upvotes: 1

Related Questions