CODEWITHSUNDEEP
angularrxjsobservable
FitzChevalerie
FitzChevalerie

Reputation: 29

Angular 7 and RxJS observables

i'm currently trying to get the hang of RxJs functions. To begin with, i would like to combine two observables with the "concat" function. Without success, unfortunately. Here is my code :

The component =>

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

@Component({
  selector: 'app-appareils',
  templateUrl: './appareils.component.html',
  styleUrls: ['./appareils.component.scss']
})
export class AppareilsComponent implements OnInit {


  constructor(private appareilsService : AppareilsService ) {
  }

  ngOnInit() {

    var counter = interval(1000)
    var sequence = range(1, 10)
    var concat(counter,sequence)

    concat.subscribe(
      (value) => {
        this.rxjsValue = value
      },
      (error) => {
        console.log('Uh-oh, an error occurred! : ' + error);
      },
      () => {
        console.log('Observable complete!');
      }
    )
  }

}

The template =>

<p>
{{ rxjsValue }} 
</p>

So the idea is that every second, the rxJsValue is edited in the template and rendered to view. Since I'm strictly following the documentation, I'm pretty confused, I have to admit : http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-concat

I can't see the flaw in the logic, could someone point me where the problem is?

Upvotes: 0

Views: 1886

Answers (2)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38757

You can achieve the following by using interval as well as operators take, and map in combination with the async pipe:

Component:

import { Component } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { map, take } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  rxjsValue$: Observable<number>;

  ngOnInit() {
    this.rxjsValue$ = interval(1000).pipe(take(10), map(r => r + 1));
  }
}

Template:

{{rxjsValue$ | async}}

Here is an example in action.

In your example yor question, you have two separate lines of import statements, both from rxjs, this can cause compile errors. At minimum, they need to be merged together into a single statement:

import { Observable, interval, range, concat } from 'rxjs';

Hopefully that helps!

Upvotes: 2

Daniel
Daniel

Reputation: 1042

I don't really understand why you are using concat, you can see here a working example that I have done to you https://stackblitz.com/edit/angular-abxeqw

Upvotes: 0

Related Questions