CODEWITHSUNDEEP
angulardependency-injectionserviceobservable
Tsolakidis Konstantinos
Tsolakidis Konstantinos

Reputation: 59

Select an Object to add into an Observable in Angular with a service

I have a search engine, where the user is able to search for Drugs via multiple labels.

            <tbody *ngFor="let result of searchResults.content | slice:0:99">
            <tr>
                <td>{{result.slot.number}}</td>
                <td>{{result.tradingName}}</td>
                <td>
                    <p *ngFor="let subs of result.substances">{{subs.dose}}{{subs.entity}},
                        {{subs.substance.substanceName}}</p>
                </td>
                <td>{{result.type}}, {{result.quantity}}</td>
                <td>{{birthdayToString(result.expire)}}</td>
                <td>{{result.entryDate}}</td>
                <td><button (click)="addToCard()" class="btn btn-success ml-1">Add</button></td>
            </tr>
        </tbody>

At the point Add the user should have the option to add this object in a list and then work with this object that is stored in an Observable in an other Component.

ts file of this html: 

constructor(private http: HttpClient, private drugService: DrugsService, private router: Router, private cardService: CardService) {
this.searchTerm.pipe(
  map((e: any) => e.target.value),
  debounceTime(700),
  distinctUntilChanged(),
  filter(term => term.length >= 1)
).subscribe(searchTerm => {
  this.loading = true;
  this._searchEntries(searchTerm);
});
}

ngOnInit() {
  this.fetchDrugs();
}

searchEntries(term: any): Observable<any> {
return this.http.get(this.drugSearch + term).pipe(
  map(response => {
    this.searchResults = response;
    //  console.log(response);
  })
)
}

  addToCard() {
  this.cardService.addDrug(({
    tradingName: "Depon",
    type: "Pill",
    quantity: 22,
    expire: new Date(),
    entryDate: new Date(),
    slot: 5
  }));
}

Right now in my ts file i am hardcoding a Drug in addToCard().

But i would like to pass the Object the user is clicking and not a hardcoded one. How can i do this ?

Card Service:

export class CardService {
drugs: Drugs = [];

public objObservable: any;
private objObserver: any;

constructor() {
    this.objObservable = new Observable((localObserver) => {
        this.objObserver = localObserver; // Convert this.objObserver from any to an observer object
        this.objObserver.next(this.drugs); // Connect this.drugs to observable object by observer
    });
}

getDrugs(): Observable<Drugs> {
    return this.objObservable;
}

addDrug(newDrug: Drug) {
    this.drugs = [...this.drugs, newDrug];
    return this.objObserver.next(this.drugs);
}

removeDrug(neo4jId: string) {
    this.drugs = this.drugs.filter((item: Drug) => item.neo4jId !== neo4jId);
    return this.objObserver.next(this.drugs);
}

clear() {
    this.drugs = [];
    this.objObserver.next.this.drugs;
}
}

i Would like to use this service and the addDrug function to pass the Object and put it into the Observable, but how ?

This is my Drug model in case you need it to understand:

export interface Drug {
neo4jId?: string;
drugId?: string;
tradingName: string;
type: string;
quantity: number;
expire: Date;
entryDate: Date;
lastModified?: Date;
slot: number;
substances?: Substance[]
};

export interface Drugs extends Array<Drug> { }

Upvotes: 0

Views: 120

Answers (1)

Barremian
Barremian

Reputation: 31125

Send the result into the event handler. Try the following

Template

<button (click)="addToCard(result)" class="btn btn-success ml-1">Add</button>

Component

addToCard(drug: Drug) {
  this.cardService.addDrug(drug);
}

Upvotes: 1

Related Questions