How to use Observables instead of document.querySelector in Angular 6

Question

I need to use Observables instead of document.querySelector in Angular 6. My code looks now like this:

onInputChange(result: string) {

const x = document.querySelector('.x') as HTMLElement;

if (result[0] === '4') {
  x.style.backgroundColor = '#ffffff';


} else if (result[0] === '5' && result[1] === '5') {
  x.style.backgroundColor = '#000000';


} else if (result[0] === '_') {
  x.style.backgroundColor = '#AFB8BD';

}

result = result.replace(new RegExp('u', 'g'), 'x');
(<HTMLInputElement>document.getElementById('someInput')).value = result;
}

Actually, the main idea is to change color of the background regarding the first number of "result" input Could someone help me to use Observables? I'm new in Frontend so sorry for this question

Answer 1

Basically I think your issue does not revolves around observables. You wish to change some color of element as a response to some other element action (let's assume on click, because this is not provided in your snippet)

Just use some standard onClick event listener to set other component style:

<button (click)="onClick()">
<div [class]="classFromController"

and in controller:

onClick() {
  if (/* any logic you wish */) {
    this.classFromController = 'black';
  } else if (/* other logic */) {
    this.classFromController = 'white';
  }
}

In your css

.black {
  backgroundColor = '#ffffff';
}
.white {
  backgroundColor = '#000000';
}

Avoid inline styles, because they are considered as terrible coding style and are easy to avoid.

If for some special reason you must use observables, consider using Observable.fromEvent() as referred below:

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromEvent

Answer 2

The problem to your question is, that we don't really know what your components are

Angular provides you two ways to interact with component and events

• How to reference elements & fromEvent (rxjs) You get an element reference to interact and listen with your component/snippet. Then you listen for an event with the fromEvent operator from rxjs

const yourEvent = fromEvent(button, 'click');

• Component interaktion with Input and Ouputs Read this documentation. Angular provides you the posibility to interact with datastreams and events from and into components by [input] and (ouptut) events.

Example:

    <input type="text" #comp (keyup)="onChange(comp.value)"/>