Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
hero-details.tsx with id param
import { Component, Prop } from '@stencil/core';
import { MatchResults } from '@stencil/router';
import { Hero } from '../../models/hero';
import { HeroService } from '../../services/hero.service';
@Component({
tag: 'app-hero-details',
styleUrl: 'hero-details.css'
})
export class HeroDetails {
private heroService: HeroService;
@Prop() match: MatchResults;
@Prop({ mutable: true }) private hero: Hero;
constructor() {
this.heroService = HeroService.Instance;
}
componentWillLoad() {
this.getHero();
}
getHero() {
this.heroService.getHero(parseInt(this.match.params.id))
.subscribe(hero => {
this.hero = hero;
});
}
handleChangeName(event) {
this.hero = {
id: this.hero.id,
name: event.target.value
};
}
render() {
return (
<div class='app-hero-details'>
{this.hero ? (
<div>
<h2>{ this.hero.name.toUpperCase() } Details</h2>
<div><span>ids: </span>{this.hero.id}</div>
<div>
<label>name:
<input type="text" value={this.hero.name} onInput={(event) => this.handleChangeName(event)} placeholder="name" />
</label>
</div>
</div>
) : (
null
)
}
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment