Create Editor with Angular

I ask the question again here because I can't find a solution that works, how do I make it so that when I click an html tag is added example: <strong></strong> with text in the middle and if I click again I get out of the html tag?

with the method I use I only add style but when I console.log I don't get what I want, moreover all the content of my textarea becomes bold .

thanks again.

html

  <mat-form-field appearance="outline">
    <mat-label>textarea</mat-label>
    <textarea #myTextArea matInput formControlName="editor"></textarea>
  </mat-form-field>

ts.file

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

  public isBold: boolean = false;

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

  addBoldStyle() {
    this.isBold = !this.isBold;
    if (this.isBold) {
      this.textarea.nativeElement.style.fontWeight = 'bold';
    } else {
      this.textarea.nativeElement.style.fontWeight = null;
    }
  }

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