Menu
I'm trying to learn Angular 2, so I was making some hello world examples.
Here is my code:
boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {DataService} from './app.dataservice'
bootstrap(AppComponent, [DataService]);
index.html
...
<body>
<hello-world>Loading...</hello-world>
<hello-world>Loading...</hello-world>
</body>
...
app.component.ts
import {Component} from 'angular2/core';
import {DataService} from './app.dataservice'
@Component({
selector: 'hello-world',
template: '<h1>Hello {{ item }}</h1>'
})
export class AppComponent {
items: Array<number>;
item: number;
constructor(dataService: DataService) {
this.items = dataService.getItems();
this.item = this.items[0];
}
}
app.dataservice.ts
export class DataService {
items: Array<number>;
constructor() {
this.items = [1,2,3];
}
getItems() {
return this.items;
}
}
The code seems to work fine since the first hello-world custom tag is being correctly showed with the code inside the ts. However, the second hello-world tag is not transformed. Only one custom element is shown.
Can't be more than 1 custom tag? How can I do that?
EDIT
I have added the new import inside app.components.ts
import {ByeWorld} from './app.byeworld';
and in app.byeworld.ts
import {Component} from 'angular2/core';
@Component({
selector: 'bye-world',
template: '<h1>Bye World</h1>'
})
export class ByeWorld {
constructor() {
}
}
347
I have tested this. You can not make more than one Angular 2 Main Components with the same name. But you can make as many as you want for non-Main components. How can main and non-main component are differentiated?
The component file name should be spelled in lower dash case , each word separated by dashes, and end in .component.ts . The HeroDetailComponent class goes in the hero-detail.component.ts file. To define a component, you always import the Component symbol. The @Component decorator provides the Angular metadata for the component.
Angular will create new instances for any of InjectionToken or Injectable in cases of using: This is happening because Angular creates a new module Injector for any lazy loaded module, this behavior is perfectly described in docs and this article.
Now there are two components that need to reference the Hero class. The Angular style guide recommends one class per file anyway. Move the Hero class from app.component.ts to its own hero.ts file.
I have tested this. You can not make more than one Angular 2 Main Components with the same name. But you can make as many as you want for non-Main components.
Main component is the one that gets bootstrapped.
Have a look of the screen shot.
My main component called: Which I made it twice in the HTML:
<body>
<my-app>Loading...</my-app>
<my-app>Loading...</my-app>
</body>
As you can see, there is a loading at the end of the bottom of the picture.
However, it works for non-main components. As you can see my-hero-detail components can be created as many as I can.
<div class="center-align">
<h1>{{title}}</h1>
</div>
<div class="row" style="margin-bottom: 0;">
<div class="col s12 m6">
<div id="my-heroes" class="card">
<div class="card-header">
<span>My Heroes</span>
</div>
<div class="card-content">
<ul class="heroes">
<li *ngFor="#hero of heroes"
(click)="onSelect(hero)"
[class.selected]="hero === selectedHero">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
</div>
</div>
</div>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
</div>
<div class="row">
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
</div>
My Hero Detail Component:
import {Component} from 'angular2/core';
import {Hero} from '../hero';
@Component({
selector: 'my-hero-detail',
templateUrl: 'app/hero-detail/hero-detail.html',
inputs: ['hero'],
})
export class HeroDetailComponent {
public hero: Hero;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With