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

Ways to streamline the type from typeof T down to T

One important aspect of my function is its signature, which looks like the following. waitMessage<T extends IIPCMessagesConstructors>(wantedMessageType: T): Promise<// ?? //> The definition of IIPCMessagesConstructors is crucial and consists ...

typescripttypescript-typingstypescript2.0typescript-generics

angular-ouath2-oidc fails to redirect following user authorization

I'm working on implementing angular-oauth2-oicd for obtaining users' permission to access their basecamp3 accounts. The application is able to successfully load the access request, but I'm facing an issue where upon clicking 'grant acce ...

angularoauth-2.0angular-oauth2-oidc

Prevent the onclick function of a span element from being triggered when the user clicks on a dropdown menu contained within

Just delving into the world of web development and currently tackling a React project. Encountered an issue where I need to make a span element clickable. However, there's a dropdown within that span that doesn't have any onClick event attached t ...

javascripthtmlcssreactjstypescript

The JWT Token is not being sent to the allowedDomain or whitelistedDomains in auth0/angular-jwt due to a configuration issue involving Regexp

Currently, I am utilizing the auth0/angular-jwt library to inject JWT tokens into my application. The documentation for this library suggests that configuration can be achieved by using strings or RegExp for specifying allowed domains. However, upon implem ...

angularjwt

How to make sure that an element overflowing its container always starts from the top

My website has a section called <mat-drawer-container>, which contains a list of items called <mat-selection-list>. However, when the number of elements in the list exceeds the display height and scrolling is necessary, the scroll position star ...

htmlangularangular-material

typescriptCreating a custom useFetch hook with TypeScript and Axios

I have a query regarding the utilization of the useFetch hook with TypeScript and Axios. I came across an example of the useFetch hook in JavaScript, but I need help adapting it for TypeScript. The JavaScript implementation only handles response and error ...

javascriptreactjstypescriptaxios

Using React Material UI to create multiple collapse components

Currently, I am facing an issue where all the collapses in my list are linked to one state for "open." This means that if I open one list, all the other lists also open. I am looking for a way to keep the collapses separate from each other without needing ...

reactjstypescriptmaterial-uinested-lists

The Google APIs sheet API is throwing an error message stating "Invalid grant: account not found"

I need to retrieve data from a spreadsheet using the Sheet API. After setting up a project in Google Cloud Platform and creating a service account, I granted the account permission to edit the spreadsheet. I then downloaded the credentials in JSON format. ...

typescriptgoogle-sheetsgoogle-apinext.jsgoogle-sheets-api

Underscore.js is failing to accurately filter out duplicates with _uniq

Currently, I am integrating underscorejs into my angular project to eliminate duplicate objects in an array. However, I have encountered an issue where only two string arrays are being kept at a time in biddingGroup. When someone else places a bid that is ...

angulartypescriptunderscore.js

The storage does not reflect updates when using redux-persist with next-redux-wrapper in a Typescript project

I'm currently working on integrating redux-persist with next.js using next-redux-wrapper. However, I'm facing an issue where the storage is not updating and the state is lost during page refresh. Below is my store.ts file: import { createStore, ...

typescriptreact-reduxnext.jsredux-persistnext-redux-wrapper

Changing a string into a date format with the help of JavaScript AngularJS

My string is as follows: 13-12-2017 05:05 AM I am looking to convert it to the following format: Date 2017-12-13T05:05:00.000Z Attempted Solution: var mydate = '13-12-2017 05:05 AM'; var selectedDate = new Date(mydate); Upon logging the selec ...

javascriptangular

Rollup ESM creates faulty imports

I need to package a TypeScript React app as a component in an ES module or UMD, but the ES bundle generated is producing an invalid JS module. When bundling, I receive the following hints. However, I am unable to find a solution for this. (!) Missing glob ...

reactjstypescriptrollupjs

What is the method for utilizing a class variable without assigning a value to it initially

class testClass { student: { name: string, age: number } constructor(options?: any) { this.student = { name: '', age: 0 }; } setStudent(name:string, age:number) { this.student.name ...

typescript

Angular - Utilizing FormArrayName within child components

There are three main components involved: consent consent-scope-list consent-scope-item consent includes a FormGroup that houses two FormArrays. consentForm = this.fb.group({ identityScopes: this.fb.array([]), resourceScopes: this.fb.array([]) }); ...

angularangular-componentsangular-formsangular-formbuilder

Navigating the complexities of integrating Angular-based JS select/input values using CefSharp Offscreen on an external website: A comprehensive guide

I have encountered some challenges with setting input values on a third-party webpage that utilizes Angular for field validation. When attempting to set the value attribute using Chrome or CefSharp, the value does not update as expected. To work around th ...

javascriptc#angularcefsharp.offscreen

Using NextJs <Script> is only effective after a page has been reloaded

Currently delving into the world of NextJS and encountering an issue with integrating a third-party ebay script onto one of my route pages. The script only seems to appear sporadically upon reloading the page. However, when navigating to the store page via ...

javascriptreactjstypescriptnext.js

When a function containing multiple statements is utilized to generate a template string for an angular component, an error may occur indicating that the value cannot be statically determined

I'm experimenting with creating my component template dynamically using the following approach. import { Component } from "@angular/core"; function getTemplate() { let temp = ""; for (let index = 0; index < 5; index++) { ...

angular

Choosing a value with an Ionic checkbox

Here's the coding template I'm working on: <ion-list > <ion-item> <ion-label>This month</ion-label> <ion-checkbox checked=true></ion-checkbox> </ion-item> ...

angularionic2

Endure the class attribute in Angular 5

My SearchComponent has a route (/search) and SearchDetailComponent has a route (/search-detail:id). In the SearchComponent, there is a searchbox (input field) where I can type any text to start a search. After loading the search results and navigating to ...

angulartypescriptangular5

No data being displayed or returned from API when using async await

My Ionic 6 + Angular 14 application is currently facing an issue with displaying data retrieved from an API... I have implemented a service to fetch the data from the API and then called this service in the component. The app compiles without any errors a ...

javascriptangulartypescriptionic-framework