Smart.Editor Find and Replace
JavaScriptJavaScriptAngularAngularVueVueReactReact

Editor for Angular

Angular standalone version of this topic (compatible with Angular 17+). Import both the Smart UI component and module in the standalone component.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { EditorComponent, EditorModule } from 'smart-webcomponents-angular/editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, EditorModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  @ViewChild('editor', { read: EditorComponent, static: false }) editor!: EditorComponent;
}
<!-- app.component.html -->
<smart-editor #editor></smart-editor>

Use this.editor for API methods in this topic.

Editor Find and Replace

Smart.Editor toolbar has many actions that can modify the content. Some of the them are more complex and offer greater capabilities. Such is the Find and Replace feature.

The Find and Replace toolbar actions triggers a dialog window that allows to search for a specific text inside Editor's content. The matches found are displayed inside a list box and can be replaced by another string also defined by the user in a separate text box.

The text matches are highlighted inside the Editor and the user can navigate between the matches via the dialog window.

By default the matching criteria is case insensitive. However there's an additional option to match the case of the search string.

Here's an example:

Editor Find and Replace

The find and replace dialog is triggered by clicking on the the appropriate action inside the Toolbar.

The Find and Replace feature is available only when the editMode is set to HTML (default).

Editor Search Bar

An additional Search bar is also available for users who want to quickly find the desired text inside the Editor's content section.

The search bar is enabled by default and can be triggered via a keyboard combination: Control + F only when the Editor's content section is focused.

The Search bar feature is only avaialble for editMode HTML.

The Search bar is case insensitive and can be disabled via the disableSearchBar.

Here's an example:

Editor Find & Replace

The findAndReplaceTimeout property determines the timeout before the search criteria is applied and the results are displayed. The property is used for both find and replace and search bar features.

For AI tooling

Developer Quick Reference

Topic: editor-find-and-replace   Component: Editor   Framework: Angular

Main methods: (none detected)

Common config keys: (none detected)

Implementation Notes

Compatibility: Angular 17+ (standalone)   API access pattern: @ViewChild(...) + this.component.method()

Lifecycle guidance: Bind inputs declaratively and call imperative API through @ViewChild in/after ngAfterViewInit.

Common pitfalls:

  • Using @ViewChild API too early (before view init).
  • Omitting standalone imports for Smart modules in @Component.imports.
  • Type mismatches between configuration fields and template bindings.

Validation checklist:

  • Ensure module import exists in standalone component imports array.
  • Use typed @ViewChild(..., { read: ComponentType }).
  • Call imperative methods after view initialization.