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

What is the most efficient method of incorporating a navbar into an Angular project?

Convert an HTML file to .msg format or prevent the send button from functioning in Outlook messages

What is a suitable alternative to forkJoin for executing parallel requests that can still complete even if one of them fails?

The element 'nz-list-item-meta-title' in NG-ZORRO is unrecognized

Invisible Angular Material Date Picker Issue

SlidingPane header in React disappearing behind Nav bar

Having trouble with Updating the Records in NodeJs and Angular

Is there a way to exclusively view references of a method override in a JS/TS derived class without any mentions of the base class method or other overrides in VS Code?

Invoke a function within the embedded element

The TypeScript error "File 'XXX' is not recognized as a module" is preventing successful compilation

Creating dynamic attributes for hibernate mapping through front-end integration

Strange behavior observed in Angular Reactive form

The data type 'boolean' cannot be assigned to the type 'StoryFnReactReturnType' in a React Storybook project using Typescript

Ways to conceal an element in Angular based on the truth of one of two conditions

Can you set up a mechanism to receive notifications for changes in an array variable in Angular?

Setting a timeout from the frontend in the AWS apigClient can be accomplished by adjusting the

Encountering issue in Angular 14: Unable to assign type 'Date | undefined' to type 'string | number | Date' parameter

Utilizing a React hook to render and map elements in a function

Tips for resolving the issue of 'defineExpose' method being undefined in Vue3

Using the ternary operator for rendering components in TSX: A beginner's guide