Exploring Angular 4: Embracing the Power of Observables

Question

Exploring Angular 4: Embracing the Power of Observables

I am currently working on a project that involves loading and selecting clients (not users, but more like customers).

However, I have encountered an issue where I am unable to subscribe to the Observables being loaded in my component. Despite trying various solutions found online, my lack of experience with Angular seems to be hindering me from finding the right solution.

What is functioning correctly at the moment:
- Loading clients in a select box
- Assigning the client's ID value to the options in the select box
- Sending the client's ID to client.service and saving the selected client as an Observable

My only challenge lies in the fact that the component fails to recognize changes in the Observables within the client.service.

Below is the code snippet for my client.service.ts:


import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { ApiService } from '../api.service';
import { Client } from './client';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

@Injectable()
export class ClientService {
    clients$: Observable<Client[]>;
    client: Client;
    selectedClient$: Observable<Client[]>;

    constructor(private api: ApiService) {
        this.clients$ = this.getAll();
    }

    public getAll(): Observable<Client[]> {
        return this.api.get<Client[]>('clients');
    }

    public setSelectedClient(clientId: number) {
        this.clients$ = this.getAll();
        if (clientId == null) {
            // Do nothing
        } else {
            this.selectedClient$ = this.clients$.map(arr =>
            { return arr.find(client => client.id === clientId) });
        }
    }

    public getSelectedClient() : Observable<Client> {
        return this.selectedClient$;
    }

}

This is the section of my component showing attempts made to resolve the issue:


import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs/Observable";
import { ClientService } from "../client/client.service";
import { Client } from "../client/client";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

@Component({
    selector: 'app-left-menu',
    templateUrl: './left-menu.component.html',
    styleUrls: ['./left-menu.component.css']
})

export class LeftMenuComponent implements OnInit {
    selectedClient$: Observable<Client>;
    client: Client = new Client();
    clients$: Observable<Client[]>;

    constructor(private clientService: ClientService) {}

    ngOnInit() {
      this.selectedClient$ = this.clientService.getSelectedClient();
        this.clients$ = this.clientService.getAll();
    }

    public setSelectedClient(clientId: number) {
        this.clientService.setSelectedClient(clientId);
    }

}

Lastly, included below is the HTML segment used to display and select a client:


<select #selectClient [ngModel]="selectedClient$ | async" 
   (ngModelChange)="setSelectedClient(selectClient.value)">
        <option *ngFor="let client of clients$ | async" [value]="client.id">
            {{ client.firstName }}
            {{ client.preposition }}
            {{ client.lastName }}
        </option>
 </select>

 <!-- Displaying selected client -->
 <h2 *ngIf="selectedClient$">{{(selectedClient$ | async)?.firstName}}
 </h2>

Your assistance in resolving this issue would be greatly appreciated. Thank you!

javascript angular typescript

Answer 1

Answer №1

Experience the Demo

Instead of using [value], try utilizing [ngValue]. This allows you to directly bind the client object to the [ngModel] directive. Additionally, I've incorporated the use of the Subject to easily inform other subscribers about the newly selected client:

client.service.ts :

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

import { Client } from './client';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
@Injectable()
export class ClientService {

    clients$: Observable<Client[]>;
    client: Client;
    selectedClient$: Subject<Client> = new Subject<Client>();

    //...
    public setSelectedClient(client: Client) {
        if (client)
            this.selectedClient$.next(client);
    }
    //...
}

component.ts :

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { ClientService } from './client.service';
import { Client } from './client'


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

    selectedClient : Client;
    client: Client = new Client();
    clients$ : Observable<Client[]>;

    constructor(private clientService: ClientService) {

    }

    ngOnInit() {
        //...
        this.clients$ = this.clientService.getAll();
        this.clientService.selectedClient$.subscribe(console.log)
    }

    setSelectedClient(client : Client){
      this.selectedClient = client;
      this.clientService.setSelectedClient(client)
    }
}

template :

<select #selectClient [ngModel]="selectedClient" 
(ngModelChange)="setSelectedClient($event)">
     <option *ngFor="let client of clients$ | async" [ngValue]="client">
         {{ client.firstName }}
         {{ client.preposition }}
         {{ client.lastName }}
     </option>
</select>

Answer 2

Experience the Demo

Instead of using [value], try utilizing [ngValue]. This allows you to directly bind the client object to the [ngModel] directive. Additionally, I've incorporated the use of the Subject to easily inform other subscribers about the newly selected client:

client.service.ts :

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

import { Client } from './client';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
@Injectable()
export class ClientService {

    clients$: Observable<Client[]>;
    client: Client;
    selectedClient$: Subject<Client> = new Subject<Client>();

    //...
    public setSelectedClient(client: Client) {
        if (client)
            this.selectedClient$.next(client);
    }
    //...
}

component.ts :

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { ClientService } from './client.service';
import { Client } from './client'


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

    selectedClient : Client;
    client: Client = new Client();
    clients$ : Observable<Client[]>;

    constructor(private clientService: ClientService) {

    }

    ngOnInit() {
        //...
        this.clients$ = this.clientService.getAll();
        this.clientService.selectedClient$.subscribe(console.log)
    }

    setSelectedClient(client : Client){
      this.selectedClient = client;
      this.clientService.setSelectedClient(client)
    }
}

template :

<select #selectClient [ngModel]="selectedClient" 
(ngModelChange)="setSelectedClient($event)">
     <option *ngFor="let client of clients$ | async" [ngValue]="client">
         {{ client.firstName }}
         {{ client.preposition }}
         {{ client.lastName }}
     </option>
</select>

Answer 3

Answer №2

The issue you are facing stems from how you have linked the observable properties clients$ and selectedClient$ to your LeftMenuComponent.

When the setSelectedClient() method in the ClientService is used to modify the properties, the changes do not reflect in the LeftMenuComponent as its ngOnInit() only assigns the properties once.

To resolve this, instead of re-assigning the properties within the component, you can directly bind the service properties in the template like so:

<select #selectClient [ngModel]="clientService.selectedClient$ | async" 
   (ngModelChange)="setSelectedClient(selectClient.value)">
        <option *ngFor="let client of clientService.clients$ | async" [value]="client.id">
            {{ client.firstName }}
            {{ client.preposition }}
            {{ client.lastName }}
        </option>
</select>

Alternatively, a neater approach would be utilizing getter properties in the component instead of direct assignment:

export class LeftMenuComponent implements OnInit {

    client: Client = new Client();
    get selectedClient$(): Observable<Client> {
        return this.clientService.selectedClient$;
    }
    get clients$(): Observable<Client> {
        return this.clientService.client$;
    }

    constructor(private clientService: ClientService) {

    }

    ngOnInit() {
        // perform initialization without explicit property assignment
    }

Answer 4

The issue you are facing stems from how you have linked the observable properties clients$ and selectedClient$ to your LeftMenuComponent.

When the setSelectedClient() method in the ClientService is used to modify the properties, the changes do not reflect in the LeftMenuComponent as its ngOnInit() only assigns the properties once.

To resolve this, instead of re-assigning the properties within the component, you can directly bind the service properties in the template like so:

<select #selectClient [ngModel]="clientService.selectedClient$ | async" 
   (ngModelChange)="setSelectedClient(selectClient.value)">
        <option *ngFor="let client of clientService.clients$ | async" [value]="client.id">
            {{ client.firstName }}
            {{ client.preposition }}
            {{ client.lastName }}
        </option>
</select>

Alternatively, a neater approach would be utilizing getter properties in the component instead of direct assignment:

export class LeftMenuComponent implements OnInit {

    client: Client = new Client();
    get selectedClient$(): Observable<Client> {
        return this.clientService.selectedClient$;
    }
    get clients$(): Observable<Client> {
        return this.clientService.client$;
    }

    constructor(private clientService: ClientService) {

    }

    ngOnInit() {
        // perform initialization without explicit property assignment
    }

Exploring Angular 4: Embracing the Power of Observables

Answer №1

Answer №2

Similar questions

Enhance your Primeng split button with an added icon when selected

Dealing with the challenge of sorting and editing one div at a time

Different time parameter for setting a timeout in Javascript

What causes observables stream to be cancelled or stopped by my HTTP request?

Validating React Typescript Props: Ensuring that two specific props do not exist simultaneously

How can the ordering of dynamically generated components be synchronized with the order of other components?

How can I safeguard my app from crashing when the initial state is set by undefined props?

Determine if Toggle Accordion is Expanded by Checking HTML Attribute Using Selenium

Error in React Typescript: No suitable index signature with parameter type 'string' was located on the specified type

Should the .js file type be omitted in the <script> tag for semantic accuracy?

After the initial submission, the Bootstrap placeholder for the Select Option is only displayed

Utilize an image in place of text (script type="text/javascript")

The Material Table in Angular is having issues with sorting functionality

Upon a successful AJAX post request, the page fails to display

Concealing a child component when hovering over its parent element with styled-components

Ways to invoke a function in an angular component from a separate component located in a different .ts file

What is the mechanism by which the useState hook in React determines the calling context?

Tips for displaying an error message when there is no match found in ng repeat due to filtering

Ways to attain a similar format - input map

Tips for incorporating a JavaScript script into local HTML code