Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
dashboard.tsx
import { Component, State } from '@stencil/core';
import { Hero } from '../../models/hero';
import { HeroService } from '../../services/hero.service';
@Component({
tag: 'app-dashboard',
styleUrl: 'dashboard.css'
})
export class Dashboard {
private heroService: HeroService;
@State() private heroes: Hero[];
constructor() {
this.heroService = HeroService.Instance;
}
componentWillLoad() {
this.getHeroes();
}
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes.slice(1, 5));
}
render() {
return (
<div class='app-dashboard'>
<h2>Top Heroes</h2>
<div class="grid grid-pad">
{this.heroes ? (this.heroes.map((hero) =>
<a class="col-1-4">
<div class="module hero">
<h4>{hero.name}</h4>
</div>
</a>
)) : (null)}
</div>
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment