If you want to eliminate duplicate values, consider using the distinctUntilChanged operator. You can also incorporate the filter function within the pipe.

this.myService.getDataFromService(data)
  .pipe(
    filter(_ => data.length === 3), 
    distinctUntilChanged()
  ).subscribe(result => console.log(result));

Implement the RxJs FromEvent method to capture input events from the input field.

@ViewChild('#input', {static:true}) inputField: ElementRef<any>;

ngOnInit(){
   FromEvent(inputField, 'input')
     .pipe(
         map(event => event.target.value),
         map((value:string) => value.trim()),
         filter((value:string) => value.length === 3), 
         debounceTime(500),
         distinctUntilChanged()
     )
     .subscribe(keyword => {
         // Perform API Call with keyword
     })
}

Check out this solution on StackBlitz:

handleInput(data){
  if(data.length >= 3){
    let isAlreadyCalled = this.calledValues.includes(data) ? true : false;
    if(isAlreadyCalled){
      return;
    }else{
      this.calledValues.push(data)
      console.log("Calling API for", data)
    }
  }
}

Consider storing the values that have been called in an array and checking against it before making further calls. I've provided an example where the API call is triggered when the input length exceeds 3 characters, as I find this approach more logical than your current implementation.

component for children

import { Component, Input, Output, EventEmitter, OnDestroy } from "@angular/core";
import { Observable, Subject, interval } from "rxjs";
import { debounce, map, filter, tap } from "rxjs/operators";

@Component({
  selector: "hello",
  template: `
    <input type="text" id="textInput" (keyup)="handleKeyUp($event)" />
  `
})
export class HelloComponent implements OnDestroy {
  requestComplete: { [key: string]: boolean } = {};

  @Output()
  sendValue = new EventEmitter<string>();

  dataFilter = new Subject<string>();
  constructor() {
    this.dataFilter
      .pipe(
        debounce(() => interval(500)),
        filter(x => x && x.length === 3 && !this.requestComplete[x]),
        tap(x => (this.requestComplete[x] = true))
        //tap( x => console.log(x)),
      )
      .subscribe(x => {
        this.sendValue.emit(x);
      });
  }

  ngOnInit() {
  }

  ngOnDestroy(): void {
    delete this.requestComplete;
  }

  handleKeyUp(e) {
    this.dataFilter.next(e.target.value);
  }
}

include in parent component html

<hello (sendValue)="receiveData($event)"></hello>

Parent component code

receiveData(info){
   console.log(info); // this prints the data (Example: abc)
}

Check out Full working example with parent child components

Firstly, let's ensure that your input data is observable to facilitate the implementation of other features:

private inputData$ = new Subject<string>();

public getInputField(data: string){
  this.inputData$.next(data);
}

Now we have the flexibility to manipulate this input stream as needed. For example, we can adopt the method proposed by @Thorsten Rintelen above

ngOnInit() {
  this.inputData$
    .pipe(
      filter(data => data.length === 3),
      distinctUntilChanged(), // ensures that an API call is made only when the input changes
      switchMap(data => this.myService.getDataFromService(data)),
    )
    .subscribe(apiResult => console.log(apiResult));
}

NOTE: This approach only stores the most recent input. If you wish to store and reuse all API responses, you may need to implement a caching layer around your API service method without altering anything else.

When the user removes the letter "d," the updated data value will be "abc." I prefer not to make another API call since we have already fetched the data for "abc."

One approach could be to use the distinct method, which returns an Observable that emits items only if they are different from the previous ones.

Using distinctUntilChanged ensures that only values distinct from the previously emitted one are output.

  valueChanges.pipe(
    filter(x => x.length === 3),
    distinct()
  )

Check out the live example on CodeSandbox Demo

I hope this solution works for you!

I have created a versatile function that can be used to limit API calls based on the number of characters provided.

const cached = {};
/**
 * @desc Verify if an API call is permissible
 * based on user input and length criteria
 * @param {String} input - user input value
 * @param {Number} len   - required length for API invocation.
 * @returns {Boolean}
 */
function doCallAPI(input, len) {
  if(input.length === len) {
    if(!cached[input]) {
      // Make the API call
      cached[input] = 1;
      return true;
    }
  }
  else if(input.length < len) for(let i in cached) cached[i] = 0;
  return false
}

Explanation:

1. Check if the input's length matches the specified length limit (in this case, 3).
   • IF YES, verify if the cached object contains the key corresponding to the input value with a non-zero value
     • IF NO, it means the API has not been called for this input yet. Therefore,
     • SET cached[input value] = 1 to add the value to the cached object
   • Return true to indicate that the API call is allowed.
2. Check if the length of the input (e.g., 2) is less than the specified limit.
3. Iterate through the cached object and set all values to 0, indicating that API calls are not permitted for inputs exceeding the specified length limit (here, 3).
4. Return false to signal that an API call is not allowed.

This is how you can implement this:

getInputField(data){
 console.log(data); // This will display the data (Example: abc)
 // Only execute the API call if the data length is 3
  if(doCallAPI(data, 3)){
    this.myService.getDataFromService(data).subscribe(res=>console.log(res));
  }
}

    const previousLetter = "";

    obtainUserInput(fieldData) {
     if(!previousLetter === fieldData.toLowerCase()) && fieldData.length === 3) {
        myService.getDataFromService(fieldData).subscribe(response=>{
        previousLetter = fieldData.toLowerCase();
        console.log(response)
        });
      }
    }

This method should work as intended