Unable to retrieve the updated value from the service variable

Question

Unable to retrieve the updated value from the service variable

I'm attempting to implement a filter that allows me to search for items based on a service variable that is updated with user input. However, I am only able to retrieve the initial value from the service in my component.

Service HTML (whatever is typed in is correctly assigned to the variable searchInput):

<input [value]="searchInput" (keyup)="searchInputChange.next(searchFilterService.applyFilter($event.target.value))">

Service TS (named 'component' since there is already a service with the same name currently):

export class SearchFilterComponent {

    searchInput: string = 'test';
    searchInputChange: Subject<string> = new Subject<string>();

    constructor(
        public searchFilterService: SharedSearchFilterService) {
        this.searchInputChange.subscribe((value) => {
            this.searchInput = value
        });
    }

    getSearchInput(): string {
        return this.searchInput;
    }
}

Filter Service TS:

@Injectable()
export class SharedSearchFilterService {
    
    applyFilter(filterValue: string) {

        if (filterValue) return filterValue;
        else return ''; // To prevent receiving 'undefined'
    }
}

Component HTML (initially fetching the value 'test', but not updating with new values from the service):

<ng-container *ngIf="searchFilterService.licenceFilter(item, service.getSearchInput())">

Example link: https://stackblitz.com/edit/angular-buagfs

angular typescript subject

Answer 1

Answer №1

The code snippet provided shows the usage of the AppService component in an Angular application. The component includes a search functionality that emits values using the @Output decorator.

app.service.ts

@Component({
  selector: 'search-component',
  template: `
    <div fxLayout="row" fxLayoutAlign="space-between center">
      <input
        [(ngModel)]="searchInput"
        (keyup)="onKeyUp()"
      />
    </div>
  `
})
export class AppService implements OnInit {
  searchInput: string = 'test';
  @Output() inputValue = new EventEmitter<string>();

  constructor() {
  }

  ngOnInit() {
    this.inputValue.emit(this.searchInput);
  }

  onKeyUp(): void {
    this.inputValue.emit(this.searchInput);
  }

  getSearchInput(): string {
    return this.searchInput;
  }
}

app.component.html

<hello name="{{ name }}"></hello>
<search-component (inputValue)="onInputValueEmitted($event)"></search-component>
<div *ngIf="searchInput == 'test'">This shouldn't be seen if value is not 'test'</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

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

  constructor(private service: AppService) {}

  onInputValueEmitted(value: string) {
    this.searchInput = value;
  }
}

You can view the Stackblitz sample here

Answer 2

The code snippet provided shows the usage of the AppService component in an Angular application. The component includes a search functionality that emits values using the @Output decorator.

app.service.ts

@Component({
  selector: 'search-component',
  template: `
    <div fxLayout="row" fxLayoutAlign="space-between center">
      <input
        [(ngModel)]="searchInput"
        (keyup)="onKeyUp()"
      />
    </div>
  `
})
export class AppService implements OnInit {
  searchInput: string = 'test';
  @Output() inputValue = new EventEmitter<string>();

  constructor() {
  }

  ngOnInit() {
    this.inputValue.emit(this.searchInput);
  }

  onKeyUp(): void {
    this.inputValue.emit(this.searchInput);
  }

  getSearchInput(): string {
    return this.searchInput;
  }
}

app.component.html

<hello name="{{ name }}"></hello>
<search-component (inputValue)="onInputValueEmitted($event)"></search-component>
<div *ngIf="searchInput == 'test'">This shouldn't be seen if value is not 'test'</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

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

  constructor(private service: AppService) {}

  onInputValueEmitted(value: string) {
    this.searchInput = value;
  }
}

You can view the Stackblitz sample here

Answer 3

Answer №2

To ensure the variable this.searchInput is equal to the value passed to the function getSearchInput, you must assign the value like so:

//make sure to pass an argument to the function
getSearchInput(searchInput:string): string {
    this.searchInput=searchInput //<--assigning the variable
    return this.searchInput;
  }

Additionally, Angular offers another method to achieve the same result: using FormControl along with the valueChanges property.

If you are using a FormControl in your .html file:

<input [formControl]="control" />

In your .ts file:

//create a "getter" for easy access to this.control.value
get searchInput()
{
  return this.control.value
}
set searchInput(value)
{
   this.control.setValue(value)
}

control=new FormControl()
constructor() {
  this.control.valueChanges.subscribe(value => {
      console.log('Testing subject: ', value);
  });
}

Answer 4

To ensure the variable this.searchInput is equal to the value passed to the function getSearchInput, you must assign the value like so:

//make sure to pass an argument to the function
getSearchInput(searchInput:string): string {
    this.searchInput=searchInput //<--assigning the variable
    return this.searchInput;
  }

Additionally, Angular offers another method to achieve the same result: using FormControl along with the valueChanges property.

If you are using a FormControl in your .html file:

<input [formControl]="control" />

In your .ts file:

//create a "getter" for easy access to this.control.value
get searchInput()
{
  return this.control.value
}
set searchInput(value)
{
   this.control.setValue(value)
}

control=new FormControl()
constructor() {
  this.control.valueChanges.subscribe(value => {
      console.log('Testing subject: ', value);
  });
}

Unable to retrieve the updated value from the service variable

Answer №1

Answer №2

Similar questions

Angular2 material dropdown menu

Transferring Information Between Components

What is the process for generating flexible paths (URL strings) in angular applications?

Managing CORS in Angular2 for REST WebApi calls

Modifying an element's property by using the unsubscribe function

Sign up for the completion event within the datetime picker feature in Ionic 2

Ways to apply the strategy pattern in Vue component implementation

Tips for typing a narrow JSX.Element

The loading of woff2, woff, and ttf files resulted in a 400 error

Messages are not being emitted from the socket

Is array.length access cached by NodeJS?

Enhancing Code Completion Feature for Multiline Strings in Visual Studio Code

Issue encountered while attempting to utilize a basic redux reducer to define a boolean value, regarding a mismatch in overrides

Cache for JSON Schema in VS Code

The slides in Swiperjs are having trouble moving smoothly

Reasons behind Angular HttpClient sorting JSON fields

Error encountered while attempting to obtain OAuth2 API authorization token in ExpressJS Node.js Angular: "getaddrinfo ENOTFOUND"

Utilizing NPM Workspace Project in conjunction with Vite to eliminate the necessity of the dist folder during the Vite build process

pick only one option from each row

The subscription function in observables may result in values that are undefined