在 TS 中添加 html 标签 Angular

Question

I'm trying to make an editor by myself the problem I'm having is when I apply the bold style all my text becomes bold how do I make from my click the text becomes bold if there is already text it should not be bold?

the other question with my way of doing it doesn't add atag how to do it too?

thanks in advance.

html

  <form [formGroup]="form">
    <div>
      <mat-form-field appearance="outline">
        <mat-label>textarea</mat-label>
        <textarea #text matInput formControlName="editor"></textarea>
      </mat-form-field>
    </div>
  </form>

ts.file

  @ViewChild('text') public textarea: ElementRef;

  public form: FormGroup;
  public isBold: boolean = false;

  constructor(private fb: FormBuilder, private renderer: Renderer2) {}

  ngOnInit(): void {
    this.createForm();
  }

  createForm() {
    this.form = this.fb.group({
      editor: null,
    });
  }

  addBoldStyle() {
    this.isBold = !this.isBold;
    if (this.isBold) {

      // let tag = document.createElement('strong');
      // let text = document.createTextNode(this.textarea.nativeElement.innerHTML);
      // tag.appendChild(text);

      this.textarea.nativeElement.style.fontWeight = 'bold';
    } else {
      this.textarea.nativeElement.style.fontWeight = null;
    }
  }

  add() {
    console.log(this.form.value);
  }

Answer 1

Let try to use

private renderer: Renderer2
...
this.renderer.setStyle(this.el.nativeElement, 'background', 'yellow');
this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '<p>Hello World<p>');