0

Hi I have form questions that require the user to replace text in a sentence. For example... 'Today is ' where the user will fill in the current day but I am not able to inject inputs through 'innerHtml' alone. I have placed my current code below:

private _replacementInput: string = '<input type="text" class="replacement-input">';
public get replacementInput() : SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(this._replacementInput);
}

constructor(private _sanitizer: DomSanitizer) {
}

and then in my view I have:

Today is <span [innerHtml]='replacementInput'></span>

As far as I can tell my code is correct but I still get an empty span tag rather than one with an input inside.

Zze
  • 18,229
  • 13
  • 85
  • 118
Shane Watson
  • 133
  • 1
  • 12
  • shouldn't it be [innerHtml]='replacementInput()' ? – Emil Mar 06 '18 at 17:18
  • 1
    It looks fine to me: https://stackblitz.com/edit/angular-nh4ptm – Zze Mar 06 '18 at 23:21
  • @Emil its a `get` so no, you don't need to invoke it. – Zze Mar 06 '18 at 23:21
  • @Zze thanks for the example, my code should work fine then as my implementation is exactly like yours. Could the fact that this component is part of a larger forms module be affecting anything. Do I have to import anything in the module? – Shane Watson Mar 07 '18 at 09:06
  • @Zze I have found the issue and that is that the text is passed to the component as part of the object where it looks like 'Today is (?)' where i replace the '(?)' with an input in the component. However this is already added to a span tag through [innerHtml] so it looks like the following: Today is . Basically you cant nest it – Shane Watson Mar 07 '18 at 09:37

1 Answers1

0

It looks like my issue was with my implementation. Basically it is that the text is passed to the component as part of the object where it looks like 'Today is (?)' where i replace the '(?)' with an input in the component.

However this is already added to a span tag through [innerHtml] so it looks like the following: 

<span [innerHtml]="formObject.question">
    Today is <span [innerHtml]="replacementInput></span>
</span>

I have edited @Zze stackblitz example to show you guys how this implementation wont work.

@Zze example: https://stackblitz.com/edit/angular-nh4ptm

My edited example: https://stackblitz.com/edit/angular-lkz4uc

Shane Watson
  • 133
  • 1
  • 12