Guide on inserting text fields or HTML content into a dropdown list using ng-multi-select in Angular 5

My current setup includes a multi-select drop-down with checkbox default. Now, I am looking to incorporate a text field next to the selected value.

Initially, I attempted adding plain HTML code within quotes, but it did not yield the desired outcome. Then, I tried escaping double quotes, however, the result remained unchanged.

dummyArray: Array<any> = [{
    'pan_name': '',
    'pan_label':'',
    'pan_type':'Mul-select',
    'pan_field':'',
    'pan_value':[{'id':1,'name':'xxxx'+'<h2 class=/"fg-white/">AboutUs</h2>`'}]
}]

<div class="form-check">
    <label>{{field.pan_label}}</label>
    <ng-multiselect-dropdown [placeholder]="'Select'"
                             [data]="field.pan_value"
                             name="{{field.pan_field}}"
                             [(ngModel)]="field.pan_name"
                             [settings]="dropdownSettings">
    </ng-multiselect-dropdown>
</div>

I aim to introduce a text field alongside the selected value.

angulartypescriptmulti-select

Answer №1

By default, HTML binding to the view is restricted for security reasons (XSS). Angular offers a service that helps sanitize HTML content before binding it to the view. You can learn more about this service here.

An example of how you can use this service is by creating a custom pipe for sanitizing HTML:

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) { }
  transform(value: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

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

Preventing Component Reuse in Angular 2 RC2 version "2.0.0-rc.2 (2016-06-15)"

During my work with angular 2 RC1 version, I encountered a situation where I needed to implement navigation within nested structures. Specifically, I wanted to be able to navigate from one Component (A) to the same Component (A), but without Angular reusin ...

angularjsangular

Issue with Ag grid rendering in Angular 2 with webpack 2 configuration not displaying properly

I'm currently attempting to integrate ag-grid into my Angular2 project, but I'm experiencing difficulties with rendering. I'm using the ag-grid package and following a tutorial for a .NET project generated with the command 'dotnet new ...

asp.netangularnpmwebpackag-grid

Retrieving object and its attributes within a select tag using Angular 2

I am facing an issue with a JSON object in my code: { "OfferFieldList": { "Title":"someTitle", "Id":"someId" }, "OfferFieldList": { "Title":"someTitle", "Id":"someId" } } In addition, I have a select tag: ...

javascripthtmlangular

What is the method for creating pipes that filter multiple columns?

My pipe is designed to work exclusively for the "name" column and not for the author anymore. transform(items: Book[], filter: Book): any { if (!items || !filter) { return items; } // Filter items array; keep items that match and retu ...

angularjstypescriptangular2-services

Guide to capturing the response in Angular 4 using HttpInterceptor

I have an Interceptor called TokenInterceptor: @Injectable() export class TokenInterceptor implements HttpInterceptor { constructor(private tokenService: TokenService) { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<Http ...

angularangular-http-interceptors

Develop a personalized FormControl using Validators

I have designed a custom component called AComponent that utilizes Material design elements. I want to integrate this component as a formControl in my Reactive Form within the AppComponent. To achieve this, I have implemented the ControlValueAccessor inter ...

angularangular-materialangular-reactive-forms

Storing checkbox status in Angular 7 with local storage

I am looking for a way to keep checkboxes checked even after the page is refreshed. My current approach involves storing the checked values in local storage, but I am unsure of how to maintain the checkbox status in angular 7 .html <div *ngFor="let i ...

htmlangulartypescript

Using webpack's hash in JavaScript for cache busting

Can someone guide me on adding a hash to my js file name for cache-busting purposes? I've researched online but still uncertain about where to include the [hash] element. Any help would be appreciated. Provided below is a snippet from my webpack.conf ...

javascripttypescriptwebpackoffice-addins

What is the best method for showcasing organized data with select and optgroup in Angular?

Searching for a way to create a grouped dropdown select using Angular? In this case, the group is based on the make property. const cars = [{ make: "audi", model: "r8", year: "2012" }, { ...

angulartypescript

What is the best way to bring npm packages into an Angular project?

Is there a way to import a package called cssdom into Angular successfully? For example, I tried importing it like this: import * as CssDom from "cssdom"; However, I encountered the following error: https://i.sstatic.net/LzZwQ.png When attemp ...

angulartypescriptnpm

Trigger the Angular Dragula DropModel Event exclusively from left to right direction

In my application, I have set up two columns using dragula where I can easily drag and drop elements. <div class="taskboard-cards" [dragula]='"task-group"' [(dragulaModel)]="format"> <div class="tas ...

angulartypescriptdrag-and-dropdragulang2-dragula

The NullInjectorError is thrown when the Angular service providedIn: root is imported from a library

After moving my service into a separate npm package, I encountered an issue where the service was marked to be provided in the root injector but resulted in a NullInjectorError when trying to use it in my app. To solve this problem, I had to include Quer ...

angularnpmdependency-injectionangular-providers

When it comes to TypeScript, there is a limitation in assigning a value to an object key with type narrowing through the

I created a function called `hasOwnProperty` with type narrowing: function hasOwnProperty< Obj extends Record<string, any>, Prop extends PropertyKey, >( obj: Obj, prop: Prop, ): obj is Obj & Record<Prop, any> { return Object ...

javascripttypescript

``Should one prioritize the use of Generics over Inheritance, or is there a better way

We are currently in the process of implementing new contracts for our icons system, and we have encountered a debate on which approach is more preferable. Both options result in the same interface: Using Generics -> Although the interface may be less ...

typescriptgenericsinheritanceinterface

Angular request utilizing HTTP method GET

I'm encountering an issue with an http request using the post method. When I send it to the backend where the endpoint is mapped as My CarController @RequestMapping(value = "/car") @AllArgsConstructor @CrossOrigin public class CarController ...

angularspring-boot

How can I distinguish between the multiple lists returned by the Web API and store them in separate arrays?

My web API returns multiple lists, such as employersList and locationsList. Here is the current code I am using: items = []; constructor(private http: HttpClient) {} getMember(){ this.http.get('http://apirequest').toPromise().then(da ...

angulartypescript

How to access the types of parameters in a function type

I am working on a function that takes a value and default value as arguments. If the value is a boolean, I want the return type to match the type of the default value. Here is the function I have: export type DetermineStyledValue<T> = ( value: str ...

reactjstypescripttsx

What is the impact on active subscriptions when the browser is closed or refreshed?

Within the app component (the root component) of an Angular application, I have a few subscriptions set up. Since the app component remains active and is never destroyed until the application is closed, the ngOnDestroy method of the app component does not ...

angularrxjsangular2-observablesrxjs-observables

Tips for customizing the main select all checkbox in Material-UI React data grid

Utilizing a data grid with multiple selection in Material UI React, I have styled the headings with a dark background color and light text color. To maintain consistency, I also want to apply the same styling to the select all checkbox at the top. Althou ...

javascriptreactjstypescriptmaterial-uidatagrid

Buffer.from in Node.js exposes program context leakage

Have you encountered a bug where the Buffer.from() function reads outside of variable bounds when used with strings? I experienced some unusual behavior on my backend, where concatenating 2 buffers resulted in reading contents of variables and beyond, inc ...

node.jstypescript