banujan6

<div class="container">
    <div style="padding-bottom: 40px;"  *ngIf="imageRawString !== null">
      <div 
        class="object-marker"
        *ngFor="let objectData of objects"
        [ngStyle]="{
          'margin-left.px': objectData.rectangle.x / image.ratio,
          'margin-top.px': objectData.rectangle.y / image.ratio,
          'width.px': objectData.rectangle.w / image.ratio,
          'height.px': objectData.rectangle.h / image.ratio

banujan6

// Simple Observer Object

const observer = {
  next(data) {
    console.log('We Received new data ' + data);
  },
  error(err) {
    console.error('Oh, No. We got an error : ' + err);
  },
  complete() {

banujan6

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  
  subscriber.next("First State / Data of Observable"); // Notifiying first state
  subscriber.next("Second State / Data of Observable"); // Notifiying second state
  subscriber.next("Third State / Data of Observable"); // Notifiying third state
  
  // Just waiting 5 seconds
  

banujan6

/**
First Example
**/

import { Observable } from 'rxjs';

// Observable Object
const observable = new Observable(subscriber => {
  subscriber.next("First Message");

banujan6

import { Subject } from 'rxjs';

const subject = new Subject();

subject.subscribe({
  next: (v) => console.log(`observerA: ${v}`)
});
subject.subscribe({
  next: (v) => console.log(`observerB: ${v}`)
});

banujan6

import { Subject, Observable } from 'rxjs';

const observable = new Observable(subscriber => {
   subscriber.next(Math.random()); // passing a random number
})

// Gives 2 different number. Because Observables are unicast and it will be execute separatly for each subscription.

observable.subscribe(data => {
  console.log('subscription a :', data); //subscription a :0.2859800202682865

banujan6

import { Observable } from 'rxjs';
import { first } from 'rxjs/operators';

// Create a Observable which emits 2 values
const observable = new Observable(subscriber => {
  subscriber.next('First Message');
  subscriber.next('Second Message');
});

// "first()" is a pipeable operator that only returns the observable with the first value.

banujan6

import { of } from 'rxjs';

// of is a Creation Operator, 
// That can create new Observable by taking the parameters as the emitting values.

of("First Data", "Second Data")
  .subscribe(data => console.log(data));

// CONSOLE OUTPUT ------------------------
// > First Data

banujan6

import { Observable, asyncScheduler } from 'rxjs';
import { observeOn } from 'rxjs/operators';

// "asyncScheduler" is a type of Scheduler which executes the Observable Asynchronously.
// "observeOn" is a Pipeable Operator that help us to re-emit the data with Scheduler. 

const observable = new Observable((observer) => {
  observer.next("First Data");
  observer.next("Second Data");
  observer.next("Third Data");