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:


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

import {Observable} from 'rxjs/Observable';

import { BehaviorSubject }   from 'rxjs/BehaviorSubject';

  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() {}

    return this.selectItemArray$.asObservable();

    return this.selectItemArray$.next(item);
    this.selectInput.nativeElement.value = "";
    return this.updateItemArray(item);



<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>
   <input id="form-select-input" type="text" name="form-select" 
  <div class="form-select-dropdown-value"*ngIf="formselectinput.value">
   <span (click)="selectItem(ingredient)">{{formselectinput.value}}</span>

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.