How to use?

HTML

<!-- RichText code --><divclass="rich"><!-- Controls --><divid="toolBar2"><buttontype="button"class="intLink controls"(click)="formatDoc('bold');"><imgclass="controls-img"src="../assets/bold.svg"alt=""></button><buttontype="button"class="intLink controls"(click)="formatDoc('italic');"><imgclass="controls-img"src="../assets/italic.svg"alt=""></button><buttontype="button"class="intLink controls"(click)="formatDoc('underline');"><imgclass="controls-img"src="../assets/underline.svg"alt=""></button><buttontype="button"class="intLink controls"(click)="formatDoc('justifyleft');"><imgclass="controls-img"src="../assets/text-align-left.svg"alt=""></button><buttontype="button"class="intLink controls"(click)="formatDoc('justifycenter');"><imgclass="controls-img"src="../assets/text-align-center.svg"alt=""></button><buttontype="button"class="intLink controls"(click)="formatDoc('justifyright');"><imgclass="controls-img"src="../assets/text-align-right.svg"alt=""></button></div><!-- /Controls --><!-- Rich text --><inputclass="hidden"formControlName="main_description"type="text"><!-- The input is hidden because we can't assign formControlName to a div, so we're going to copy the div's HTML to assign it to the input --><div#richTextclass="full"id="textBox"contenteditable="true"></div><!-- /Rich text --></div><!-- /RichText code -->

TypeScript

import{Component,ElementRef,ViewChild}from'@angular/core';@Component({selector:'app-root',templateUrl:'./app.component.html',styleUrls:['./app.component.scss']})exportclassAppComponent{title='Angular_RichText_Demo';//Get div element to pass content to input  @ViewChild('richText')richText!:ElementRef;//Text formatting function//Initializing variableoDoc:any;formatDoc(cmd:any){this.oDoc=document.getElementById("textBox");document.execCommand(cmd);this.oDoc?.focus();}save(){// Open the console to see the output!//You can set this value on an input to send the data in angular formsconsole.log(this.richText?.nativeElement.innerHTML);}}

CSS

// Angular RichText styles.intLink {cursor: pointer;border:0;background-color:#ffffff;}#toolBar1select {font-size:10px; }#textBox {width: auto;height:250px;border-bottom:5px;border-top:1px#dad6d6 solid;padding:12px;overflow: scroll;}#textBox#sourceText {padding:0;margin:0;min-width:498px;min-height:200px;}.controls{margin-right:8px;transition: ease-in0.2s;padding-top:5px;border-radius:5px;}.controls:hover{background-color:#cecbcb;}.controls-img{width:20px;}.rich{background-color: white;padding-top:10px;border-radius:5px;box-shadow:rgba(0,0,0,0.35)0px5px15px;border:1px#dad6d6 solid;}#toolBar2{padding-left:6px;padding-bottom:9px;}.hidden{display: none;}//This class hides the scrollbar space.::-webkit-scrollbar {display: none;    }