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

The selected attribute does not function properly with the <option> tag in Angular

Inconsistent CSS3 transitions behavior in Firefox 4

ngRepeat does not completely refresh the DOM when dealing with a basic array

Is it necessary for me to master React in order to code with React Native?

Triggering a gTag Event on the Fly using Google Tag Manager

Using AngularJs, you can access the document.body.onfocus event within the controller of

managing nested JSON arrays in JavaScript

Effortlessly moving through each day on Fullcalendar by utilizing the resourceTimeline feature

"Implementing AngularJS bidirectional data binding to dynamically link user inputs with corresponding fields

How can I retrieve the total number of records (count) in an XML response using PostMan?

The page reloads automatically following the completion of an ajax request

How to Use AJAX, jQuery, and JSON to Send an Array to PHP

Once the page is refreshed, the checkbox should remain in its current state and

Leveraging webpack for requiring modules in the browser

I am currently working on building a single-page application using React and Vite. However, I am facing an issue where the page is not rendering anything and just displaying a blank screen. Can anyone provide guidance on troubleshooting and

Deploying NextJs application with Firebase's static site generation (SS

What is the process for accessing a URL using a web browser and receiving a plain text file instead of HTML code?

Track every click on any hyperlink throughout the entire webpage

What is the process for retrieving information from my Google Analytics account to incorporate into my website?

Issue with populating labels in c3.js chart when loading dynamic JSON data