Rx Doubts

talk.component.ts

import {
  Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild,
  ViewContainerRef
} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-talk',
  styles: [
      `
      :host {
        background-color: red
      }
    `
  ],
  template: `

    <input #buscar>

    <p [ngStyle]="style" (click)="onClick()">
      {{talk?.title | titlecase}}
      -
      {{talk?.date | date:'HH:mm'}}
    </p>
    <div #favorite></div>
  `,
  styleUrls: ['./talk.component.css']
})
export class TalkComponent implements OnInit {

  @Input() talk;

  @ViewChild('buscar')
  buscar: ElementRef;

  @Output() talkClicked: EventEmitter<any> = new EventEmitter();

  @ViewChild('favorite', {read: ViewContainerRef}) favorite: ViewContainerRef;

  style = {
    'background-color': 'lightgray',
    'padding': '10px'
  };

  constructor(private factory: ComponentFactoryResolver,
              private route: ActivatedRoute) {
    this.route.params
      .subscribe(x => console.log(x.id));

  }

  ngOnInit() {
    // this.favorite.createComponent(
    //   this.factory.resolveComponentFactory(FavoriteTalkComponent));

    Observable.fromEvent(this.buscar.nativeElement, 'keyup')
      .map((x: any) => x.target.value)
      .debounceTime(500)
      .distinctUntilChanged()
      .subscribe(x => console.log(x));
  }

  onClick() {
    console.log(this.talk);
    this.talkClicked.emit(this.talk);
  }

}