Skip to content

Instantly share code, notes, and snippets.

@amikitevich

amikitevich/Input property to ReplaySubject

Last active July 21, 2017 00:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save amikitevich/9bd22d3a0bf88f1d9833e1611752ce86 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save amikitevich/9bd22d3a0bf88f1d9833e1611752ce86 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. amikitevich revised this gist Jul 21, 2017. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions Input property to ReplaySubject
    View file
    Original file line number Diff line number Diff line change
    @@ -30,6 +30,7 @@ export class TodoService {
    @Component({
    selector: 'todo-list',
    template: `<todo-item *ngFor="let item of items$ | async" [todo]="item"></todo-item>`,
    changeDetection: ChangeDetectionStrategy.OnPush
    })
    export class TodoListComponent implements OnInit {

    @@ -46,6 +47,7 @@ export class TodoListComponent implements OnInit {
    @Component({
    selector: 'todo-item',
    template: `Category: {{categoryName$ | async}}: {{todoText$ | async}}`,
    changeDetection: ChangeDetectionStrategy.OnPush
    })
    export class TodoItemComponent implements OnInit {

    @@ -67,3 +69,5 @@ export class TodoItemComponent implements OnInit {
    }

    }

    }
  2. amikitevich revised this gist Jul 20, 2017. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions Input property to ReplaySubject
    View file
    Original file line number Diff line number Diff line change
    @@ -31,11 +31,15 @@ export class TodoService {
    selector: 'todo-list',
    template: `<todo-item *ngFor="let item of items$ | async" [todo]="item"></todo-item>`,
    })
    export class TodoListComponent {
    export class TodoListComponent implements OnInit {

    public items$: Observable<Todo[]> = this.todoService.getTodoItems();
    public items$: Observable<Todo[]>;

    constructor(private todoService: TodoService) { }

    ngOnInit() {
    this.items$: Observable<Todo[]> = this.todoService.getTodoItems();
    }

    }

  3. amikitevich created this gist Jul 20, 2017.
    65 changes: 65 additions & 0 deletions Input property to ReplaySubject
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    /**
    * service that emulates http
    */
    @Injectable()
    export class TodoService {

    readonly todos = [
    {id: 1, text: 'todo1', categoryId: 1},
    {id: 2, text: 'todo2', categoryId: 2},
    {id: 3, text: 'todo3', categoryId: 1},
    {id: 4, text: 'todo4', categoryId: 1}
    ];

    readonly todoCategory = [
    {id: 1, name: 'todoCategory1'},
    {id: 2, name: 'todoCategory1'}
    ];

    public getTodoItems() {
    return Observable.of(this.todos);
    }

    public getCategory(categoryId: number) {
    const category = this.todoCategory.find(item => item.id === categoryId);
    return Observable.of(category);
    }

    }

    @Component({
    selector: 'todo-list',
    template: `<todo-item *ngFor="let item of items$ | async" [todo]="item"></todo-item>`,
    })
    export class TodoListComponent {

    public items$: Observable<Todo[]> = this.todoService.getTodoItems();

    constructor(private todoService: TodoService) { }

    }

    @Component({
    selector: 'todo-item',
    template: `Category: {{categoryName$ | async}}: {{todoText$ | async}}`,
    })
    export class TodoItemComponent implements OnInit {

    readonly todo$ = new ReplaySubject<Todo>(1);

    public todoCategoryName$: Observable<TodoCategory>;

    @Input() set todo(value: Todo) {
    this.todo$.next(value);
    }

    constructor(private todoService: TodoService) { }

    ngOnInit() {

    this.todoCategoryName$ = this.todo$
    .switchMap(todo => this.todoService.getCategory(todo.categoryId))
    .pluck('name');
    }

    }