What is the best way to retrieve HTML content using an Angular method?

Okay, so the title might not be the greatest...but I couldn't think of anything better:

I want to emphasize search keywords in the result list...that's why I'm having trouble with this problem. CSS:

.highlightText{
 font-weight: bold;
}

In TypeScript:

myVariable = "hello world";
keyword=" bonjour";

highlightText(text: string){
   return text.replace(keyword, "<span class='highlightStyle'>"+keyword+"</span>");
}

In HTML:

<div>
    {{highlightText(myVariable)}}
</div>

On the screen, I see the whole text..:

< span class='highlightStyle' >bonjour< /span > world

But what I really expect is: bonjour world

That's it :D

any ideas?

Thanks,Csaba

angulartypescript

Answer №1

Opting for a pipe is recommended as it offers higher performance by only running functions when their input arguments change, unlike regular functions which run during every change detection cycle.

For more information, take a look at this example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to pass only the second parameter to a function in TypeScript?

Let's consider a TypeScript function as shown below: openMultipleAddFormModal(commission?: Commission, people?: People): void { // some data } To make a parameter optional, I have added the Optional Chaining operator. Now, how can I modify the code ...

javascripttypescript

Retrieve the generic type parameter of an interface implementation

I am attempting to extract a type parameter from an interface in order to use it as a parameter for a generic function. In my particular scenario, I have the following generic types: interface ITranslatable<T, K extends keyof T> { translations: IT ...

typescripttypescript-generics

I'm attempting to integrate Angular Material into my project but I'm struggling to figure out how to resolve the issue

npm ERR! code ERESOLVE npm ERR! ERESOLVE was unable to find a resolution npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/tslint npm ERR! dev tslint@"~6.1.0" from the root projec ...

angularnpmangular-material

When evaluating code with eval, properties of undefined cannot be set, but the process works seamlessly without

Currently, I am attempting to utilize the eval() function to dynamically update a variable that must be accessed by path in the format myArray[0][0[1][0].... Strangely enough, when I try this approach, I encounter the following error: Uncaught TypeError: ...

javascripttypescriptvue.jsvuejs3

To continue receiving rxjs updates, kindly subscribe if the specified condition is met

Is there a way to check a condition before subscribing within the operator chain? Here's what I have: // parentElem:boolean = false; // the parent elem show/hide; let parentElem = false; // inside the ngAfterViewInit(); this.myForm.get('grandPa ...

javascriptangulartypescriptrxjs

Tips for preventing the need to cast a DOM element to any in Typescript

In my Typescript code, I am retrieving the value of a DOM element like this: document.getElementById('MyElementId') as HTMLElement).value I feel unsure about casting it to HTMLElement. Is there a better way to specify the type and retrieve this ...

typescriptdom

Typescript is unable to locate the .d.ts files

Working on a personal project and came across a library called merge-graphql-schemas. Since the module lacks its own typings, I created a file at src/types/merge-graphql-schemas.d.ts In merge-graphql-schemas.d.ts, I added: declare module "merge-graphql-s ...

node.jstypescriptexpressgraphqlapollo

Is the 'Remaining Amount' field and 'Remaining Amount is Greater than 0' field accessible within the Netsuite platform? If not, are there any alternative methods to achieve the same result?

I'm currently in the process of recreating the saved search shown below. ...

typescript

How can you add or remove an item from an array of objects in Angular/RXJS using Observables?

Purpose: The goal is to append a new object to an existing Observable array of objects and ensure that this change is visible on the DOM as the final step. NewObject.ts: export class NewObject { name: string; title: string; } Here's the example ...

angulartypescriptrxjsobservablebehaviorsubject

Grid layout with columns of equal width in Bootstrap

I'm currently working on creating a dashboard with Angular and Bootstrap 4. I've utilized the equal-width columns from https://getbootstrap.com/docs/4.0/layout/grid and it's functioning well. However, I'm facing an issue where if the lo ...

htmlcssangularbootstrap-4

The error message "Cannot bind to 'ngForOf' because it is not recognized as a valid property of the element."

After utilizing NGFor for quite some time, I encountered an unexpected issue in a new application where I received the error message: Can't bind to 'ngForOf' since it isn't a known property of 'div'.' I found it strang ...

angulartypescript

Dealing with asynchronous operations in a pipeline with fp-ts

I'm currently exploring fp-ts and have been contemplating how to restructure my functions in order to steer clear of nested folds. While many online examples showcase a clean invocation of the pipe function, I am struggling to eliminate the nested fol ...

typescriptfp-ts

Why is the function not being called when declaring a variable, resulting in a type error?

click here reference: const fn1 = (arg1: { key: number, })=>{ console.log(arg1) } fn1({ key: 1 }) const data = { key: 1, a: 1, } fn1(data) fn1({ key: 1, a: 1, }) more info Assistance needed: Why is ...

typescript

Creating efficient React components with TypeScript and leveraging generic props

I’ve been working on understanding and resolving my issue with React components' generic props. I came across a code example in an article about using TypeScript with functional React components and generic props. Unfortunately, when trying to repli ...

reactjstypescripttypescript-generics

The Angular 2+ page fails to load properly on Internet Explorer or SharePoint

I created an Angular 5 solution that functions well in both Chrome and Firefox within SharePoint 2013. However, I have run into issues when using IE11. The index.html file was inserted into the SharePoint page using a Content Editor web part. Even after di ...

angularinternet-explorersharepoint

Having trouble getting my Angular 2 project up and running

After downloading a MEAN stack project from bitbucket, I attempted to run the front end (Angular 2) locally by navigating to the angular folder and using the command ng serve. However, I encountered the following error: "The serve command requires to be ...

angularmean-stack

Creating a wrapper component to enhance an existing component in Vue - A step-by-step guide

Currently, I am utilizing quasar in one of my projects. The dialog component I am using is becoming redundant in multiple instances, so I am planning to create a dialog wrapper component named my-dialog. my-dialog.vue <template> <q-dialog v-bin ...

javascripttypescriptvue.jsquasar-frameworkquasar

Transfer the unique field name to a universal assistant

Consider the code snippet provided in this playground: class A { private z = 0 } type K = "z" type ValidKeys = A[K] extends any ? K : never The type ValidKeys compiles correctly and matches K only when K represents a subset of keys from A. It ...

typescriptprivatemobx

Using Angular 2 to Create Nested ngFor Loops

I'm facing an issue that I can't seem to resolve. I attempted to use *ngFor in my code, but it seems that I am making a mistake with nested ngFor loops. To illustrate what I need to achieve, I ended up writing some messy code just to show the str ...

jsonangularangular2-templatengfor

Unable to access the `isDragging` property in TypeScript when using the `useDrag` method from react-d

As a newcomer to utilizing react in combination with typescript, I am currently working on implementing a drag and drop feature using the react-dnd package along with typescript. I came across this helpful blog that has guided me through the process of dra ...

reactjstypescriptreact-dnd