Skip to content

Instantly share code, notes, and snippets.

@anton-gorbikov
Last active Apr 1, 2019
Embed
What would you like to do?
import { Component } from '@angular/core';
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-root',
template: '<app-tree [data]="data"></app-tree>'
})
export class AppComponent {
data = of({
title: 'aaa',
value: 2,
items: [
{ title: 'bbb', value: 4 },
{ title: 'ccc', value: 6 },
{ title: 'ddd', value: 8 }
]
}).pipe(
map((data) => {
console.warn('Do some lightweight operation');
return data;
})
);
}
import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-tree',
template: `
<div *ngIf="data | async as data">{{data.title}}: {{data.value}}</div>
<ng-container *ngIf="data | async as data">
<ng-container *ngIf="data.items">
<app-tree *ngFor="let item of data.items; index as i" [data]="getSubtree(i)">
</app-tree>
</ng-container>
</ng-container>
`
})
export class TreeComponent {
@Input() data: Observable<any>;
getSubtree(i: number) {
return this.data.pipe(
map((data) => data.items[i])
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment