move scrollbar based on searching text inside div and it has scrollbar in angular

Question

When I search text in div and it has scrollbar, and when it search least word scrollbar should go down automatically based on search in angular

Answer 1

We could for example, on each keystroke search of a matching value from the text. And if we find it, we replace it with different styling.

But I bet there are packages designed just for this.

Here is a small example that might help you: https://stackblitz.com/edit/angular-textarea-highlight-f5jvj3?file=src%2Fapp%2Ftextarea-highlight%2Ftextarea-highlight.component.ts

@Component({
  selector: "app-textarea-highlight",
  templateUrl: "./textarea-highlight.component.html",
  styleUrls: ["./textarea-highlight.component.css"],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => TextareaHighlightComponent),
      multi: true
    }
  ]
})
export class TextareaHighlightComponent
  implements  ControlValueAccessor {
  constructor() {}
  @Input() highlightTexts: string[] = [];
  @ViewChild("backdrop") $backdrop: ElementRef<HTMLDivElement>;
  @ViewChild("textarea") $textarea: ElementRef<HTMLTextAreaElement>;
  textValue: string = "";
  get highlightedText () {
    return this.applyHighlights(this.textValue)
  }

  applyHighlights(text) {
    text = text ? text
      .replace(/\n$/g, "\n\n") : '';
    this.highlightTexts.forEach(x => {
      text = text
      .replace(new RegExp(x, 'g'), "<mark>$&</mark>");
    })
    return text;
    
  }
  handleScroll() {
    var scrollTop = this.$textarea.nativeElement.scrollTop;
    this.$backdrop.nativeElement.scrollTop = scrollTop;

    var scrollLeft = this.$textarea.nativeElement.scrollLeft;
    this.$backdrop.nativeElement.scrollLeft = scrollLeft;
  }

  onChanges: ($value: any) => void;
  onTouched: () => void;

  writeValue(value: any): void {
    if (value !== undefined) {
      this.textValue = value;
    }
  }
  registerOnChange(fn: any): void {
    this.onChanges = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
}

Or maybe something like this is what you are looking for: https://dev.to/juniordevforlife/highlight-search-results-with-an-angular-pipe-42cb