Html Question posted in
Some basic documentation can be found here.

Html – Angular ng-select rendering & sign as &

I am facing an issue where my selected option is being with & instead of & sign.

How do you make it show the string value normally without parsing it as html code and not impose any security risks like a threat for XSS attack?

 <ng-select
      [clearable]="false"
      [items]="items"
      [searchable]="false"
      class="custom"
      data-testid="request-xxz"
      formControlName="category"
      i18n-placeholder
      placeholder="Choose option"
    >
      <ng-template let-item="item" ng-option-tmp>
        <div
          [attr.data-testid]="
            'request-form-xxzy'
          "
        >
          {{ item.label }}
        </div>
      </ng-template>
    </ng-select>
Tags:

2

Answers


  1. 0

    Pls provide versions of your libraries (Angular, the ng-select, all that is relevant).
    I’ve taken a guess, and created a stackBlitz for package @ng-select/ng-select, on Angular 14. I do not see such a behaviour.
    Maybe you have this problem, since the &amp is coming from backend data?
    You could try htmlDecode() function from this answer, if you do get such data from backend, and would like to just unescape it, to get proper ampersands in it.

    Or, maybe, such a Pipe utilizing DomSanitizer.bypassSecurityTrustHtml(value) could be useful for your case.

    Login or Signup to reply.
  2. 0

    You can use the innerHtml binding

    ...
    <div [attr.data-testid]="'request-form-xxzy'" [innerHTML]="item.label">
    </div>
...

    This documentation explains how Angular uses property binding to bind values from components to HTML properties, including how to safely render HTML content using [innerHTML] while being aware of security considerations like cross-site scripting (XSS).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search