add html tag Angular in TS

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 a tag 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);
  }

you need to only target the selected text. see https://stackoverflow.com/a/5379408/8820118 for more infos. Afterwards you have to put a `` around it and add the desired class. If you only want to write in bold letter without selection, you also have to use the span class. In that case you would have to add a span when clicking the bold icon and close the span when clicking it again. I think you need an eventlistener when typing in that case so you can retrieve the written text until the bold icon is clicked again. — nosTa, Sep 21 '22 at 08:48

score 0 · Answer 1 · answered Sep 21 '22 at 08:50

0

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>');

answered Sep 21 '22 at 08:50

Hai Mai

39
3

thank you for your help i would like to know how to put the content of my textarea between the tags? in my case the tag – foo42 Sep 21 '22 at 09:10
1

I think you cannot do it with teaxtarea -> it will display your text in the textarea instead of "yourtext" in both styles. Let try div with contenteditable I think – Hai Mai Sep 21 '22 at 09:14

add html tag Angular in TS

1 Answers1