I have a problem with this in the new version | seconde: number; const counter = Observable.interval(1000);

Question

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

export class ObservableTestComponent implements OnInit {
  
  seconde: number;

  ngOnInit(): void {
    const counter = Observable.interval(1000);

    counter.subscribe((value: number) => {
      this.seconde = value;
    })
  }
}

I want to convert this code to the latest version of rxjs

Answer 1

Try this:

import { Component, OnInit } from '@angular/core';
import { Observable, interval } from 'rxjs';

export class ObservableTestComponent implements OnInit {

  seconde: number;

  ngOnInit(): void {
    const counter = interval(1000);

    counter.subscribe({
      next: (value: number) => { this.seconde = value; },
      error: () => console.error('An error occurred :'),
      complete: () => console.log('There are no more action happen.')
    })
 }
}

Answer 2

I guess it is really easy... But remember to clean the subscription (with one of these operators: takeUntil or takeUntilDestroyed)

import { Component, OnDestroy, OnInit } from '@angular/core';
import { interval, Subject, takeUntil, tap } from 'rxjs';

@Component({
  template: `{{ seconde }}`,
  selector: 'my-selector',
})
export class ObservableTestComponent implements OnInit, OnDestroy {
  seconde?: number;

  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    interval(1000)
      .pipe(
        tap((value) => (this.seconde = value)),
        takeUntil(this.destroy$),
      )
      .subscribe();
  }

  ngOnDestroy() {
    this.destroy$.next();
  }
}

Answer 3

Angular team released an easy implementation for unsubscribing using the takeUntilDestroyed

Here is an example should do the job for this basic use case:

import { Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';

@Component({
  selector: 'obs-test',
  standalone: true,
  template: `just working like a charm !`,
})
export class ObservableTestComponent {
  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe((countEachSecond) => {
        console.log(countEachSecond);
      });
  }
}

Angular v17.