Skip to content

Instantly share code, notes, and snippets.

View refactored-newsletter.ts
@Component({
selector: 'newsletter',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<fieldset class="newsletter">
<legend>Bots Newsletter</legend>
<h5>Hello {{firstName$ | async}}, if you like what you see - please enter your email below to subscribe:</h5>
<form>
<input #email type="email" name="email">
<input type="button" value="Subscribe"
View refactored-bot-detail-header.ts
@Component({
selector: 'bot-detail-header',
template: `
<h2>{{bot?.description}}</h2>
<h5>Total completed Rescues: {{completedRescues?.length}}</h5>
<newsletter></newsletter>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BotDetailHeaderComponent {
View refactored-bot-detail.html
<div class="container">
<bot-detail-header
[bot]="bot$ | async"
[completedRescues]="completedRescues$ | async">
</bot-detail-header>
<table class="table rescues-list">
<tbody>
<tr *ngFor="let rescue of (completedRescues$ | async)">....</tr>
View refactored-bot-detail.ts
@Component({
selector: 'rescue-bot-detail',
templateUrl: './rescue-bot-detail.component.html'
})
export class RescueBotDetailComponent implements OnInit {
bot$: Observable<Bot>;
completedRescues$: Observable<completedRescue[]>;
constructor(
private route: ActivatedRoute,
View newsletter.ts
@Component({
selector: 'newsletter',
template: `
<fieldset class="newsletter">
<legend>Bots Newsletter</legend>
<h5>Hello {{firstName}}, if you like what you see - please enter your email below to subscribe:</h5>
<form>
<input #email type="email" name="email">
<input type="button" value="Subscribe"
View bot-detail-header.ts
@Component({
selector: 'bot-detail-header',
template: `
<h2>{{bot?.description}}</h2>
<h5>Total completed Rescues: {{completedRescues?.length}}</h5>
<newsletter [firstName]="firstName" (subscribe)="onSubscribe($event)"></newsletter>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BotDetailHeaderComponent {
View bot-detail.html
<div class="container">
<bot-detail-header
[bot]="bot$ | async"
[completedRescues]="completedRescues$ | async"
[firstName]="(user$ | async).firstName"
(subscribe)="onSubscribe($event)">
</bot-detail-header>
<table class="table rescues-list">
@Rome-H
Rome-H / bot-detail.ts
Last active Jun 8, 2017
components design: rescue-bot-example
View bot-detail.ts
@Component({
selector: 'rescue-bot-detail',
templateUrl: './rescue-bot-detail.component.html'
})
export class RescueBotDetailComponent implements OnInit {
user$: Observable<User>;
bot$: Observable<Bot>;
completedRescues$: Observable<completedRescue[]>;
constructor(