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>×</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>