3
\$\begingroup\$

I'm currently developing a small Angular tagging module which will enable me to populate an array from a text input, pretty much like Selectize to give an example.

I'm using a BehaviorSubject and give back the same BehaviorSubject as Observable to which I then subscribe and push the filtered value in an array.

I have the feeling that my code is somewhere in between traditional code and reactive programming. If someone would help reviewing my code I'd be very grateful.

Here's the component code:

form-select.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';

import {Observable} from 'rxjs/Observable';

import { BehaviorSubject }   from 'rxjs/BehaviorSubject';

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

  private items = [];
  private selectItemArray$ = new BehaviorSubject<string>(undefined);  

  @ViewChild('formselectinput') public selectInput

  constructor() {  

    let subscription = this.observeSelectItem().subscribe(
      value => {
        return this.items.push(value);
      }
    );
    //If truthy
    this.items = this.items.filter(value=>!!value === true)

  }

  ngOnInit() {}

  observeSelectItem():Observable<string>{
    return this.selectItemArray$.asObservable();
  }

  updateItemArray(item){
    return this.selectItemArray$.next(item);
  }
  selectItem(item){
    this.selectInput.nativeElement.value = "";
    console.info(this.selectInput);
    return this.updateItemArray(item);
  }
  }

}

form-select.component.html

<div class="form-select-container">
  <div class="item-container" *ngIf="items">
    <span *ngFor="let item of items">{{item}} 
      <span (click)="removeItem(item)"><a>&times;</a></span>
    </span>
  </div>
   <input id="form-select-input" type="text" name="form-select" 
   #formselectinput 
   [(ngModel)]="ingredient">
  <div class="form-select-dropdown-value"*ngIf="formselectinput.value">
   <span (click)="selectItem(ingredient)">{{formselectinput.value}}</span>
  </div>
</div>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.