Ionic 4 ion-textarea HTML

#1

Previously, I was able to use the following to show html in a textarea:

<ion-textarea textarea id="article_text" class="article_text" type="text" placeholder="Article" [(ngModel)]="article" [innerHTML]="article" rows="20"></ion-textarea>

Where article could be something like: <b>Great Article!</b>

This no longer renders the html in Ionic 4.

Any suggestions on this? If the solution can get away from using innerHTML - all the better.

#2

Did you include FormsModule and if needed ReactiveFormsModule in your page module?

#3

I did not need to use a form at all, previously.
Do you think I need to put this in a form or just including the FormsModule would make this work?
I will try it.

#4

FormsModule was in there and I added ReactiveFormsModule:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ArticlePage]
})

No change.

#5

you do

[(ngModel)]="article"

any errors in the console?

#6

Nope. No errors.
If I remove [(ngModel)]=“article” then I see nothing. With it, I see unrendered html.

#7

what’s the purpose of textarea? did it help if you remove it?

#8

I cannot recall if I actually needed in 3.9.2 for sure but there is a good chance. Maybe to get the innerHTML part to work.
But no change if removed.

#9

weird…I’m out of idea sorry

#10

Effort appreciated!
It renders in a regular div, so I will use that in the meanwhile.

#11

I would consider the fact that this worked at all before to be a bug. I despise innerHTML, and wish it was deliberately dropped from Angular, but if what you are looking for is similar to what Discourse does with a preview function, I would implement it the same way. Separate the textarea where input happens, showing markup as markup, and have a separate element to display the rendered markup.

#12

This would be the best overcome,

<ion-item>
      <ion-label position="stacked">Problem Details</ion-label>
      <ion-textarea type="text" rows="5"></ion-textarea>
</ion-item>