nitayneeman

@Injectable()
export class AppService {
  fetchData(): Rx.Observable<string> {
    return Rx.Observable
      .of('Todo')
      .delay(1000);
  }
}

nitayneeman

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public todos: string[];

  constructor(private appService: AppService) {
    this.todos = ['Todo', 'Todo', 'Todo'];
  }

nitayneeman

<ul>
  <li *ngFor="let todo of todos; let i = index">
    {{ todo }} <button (click)="removeTodo(i)">Remove</button>
  </li>
</ul>
<button (click)="addTodo()">Add Todo</button>

nitayneeman

@Directive({
  selector: '[domChange]'
})
export class DomChangeDirective {
  private changes: MutationObserver;

  @Output()
  public domChange = new EventEmitter();

  constructor(private elementRef: ElementRef) {

nitayneeman

ngOnDestroy(): void {
  this.changes.disconnect();
}

nitayneeman

export class DomChangeDirective implements OnDestroy {

nitayneeman

<ul (domChange)="onDomChange($event)">

nitayneeman

const node = document.querySelector('.some-element');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => console.log(mutation));
});

observer.observe(node, {
  attributes: true,
  childList: true,
  characterData: true

nitayneeman

observer.disconnect();

nitayneeman

Rx.Observable
  .interval(1000)
  .first((value) => value === 3)
  .subscribe(
    (value) => console.log(`Emitted value: ${value}`),
    (error) => console.error(error),
    () => console.log('Completed')
  );