How to display content with html tags for reactive forms Angular

Question

Component.html

<form [formGroup]="formName">
  <input formControlName="title">
</form>

Component.ts

this.formName.patchValue({
  title : this.content
})

Sometimes this.content contains html tags like <i>/<b> tags. In that case, the tags are also displaying. How can we achieve that particular text in italics or bold. Example: this.content = Solve ur doubts in (<i>StackOverflow</i>) Expected Output : Solve ur doubts in (StackOverflow)

In general, by passing this.content in [innerHTML] attribute solved the issue. But in my case it's a reactive form and innerHtML can't be used. Can someone suggest what can be done to get the output as Solve ur doubts in (StackOverflow)

Thanks in advance.

ArgCedric · Accepted Answer · 2023-10-17 12:37:37Z

2

you can use innerHTML, exemple:

<div [innerHTML]="content"></div>

Be careful, in your patchValues, it is not an equal but a colon

this.formName.patchValue({ title: this.content })

In some cases, you will need to specify that the html is "secure". For example if it comes from an API I advise you to make a pipe to simplify

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(value: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

And to use :

<div [innerHTML]="content | safeHtml"></div>

edited Oct 17, 2023 at 12:37

answered Oct 17, 2023 at 12:30

ArgCedric

521 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shanu Over a year ago

Thanks for the reply, but as I mentioned, for reactive forms, innerHTML is not accessible. If I use as suggested, form actions can't be performed for that varaibale.

ArgCedric Over a year ago

I'm not sure this is possible directly with input and reactive form. I can only suggest that you go through a style overview:

<form [formGroup]="formName">     <input formControlName="title" /> </form>  <section>     <div [innerHTML]="formName.value.title"></div> </section>

Or if you really want to do WYSIWYG, use a package dedicated to that. I couldn't do better, maybe someone more knowledgeable than me will contradict me and find a solution for you.

Collectives™ on Stack Overflow

How to display content with html tags for reactive forms Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related