How can I add a editable text box on canvas when we click on button using angular5

See more:

Angular5

How Can I add a editable text box on canvas when we click on button using "angular5" only

What I have tried:

I have created a button using bootstrap and i want code onclick Add button a editable text box to be loaded in our id defined position
onclick fn should be in 'Using Angular5 ' only

<title>
Bootstrap Page

.row {
		position: relative;
		}
		
	body {
			background-size: cover;
			min-width: 100%;
		}
		
	.left {
		border: 2px dashed black;
		height: 100vh;
		width: 100%;
		}

	#myCanvas {
		background:url("https://s10.aconvert.com/convert/p3r68-cdx67/bpvcr-e5c8y.svg");
		background-repeat: no-repeat;
		background-size: inherit;
		background-size: 900px 368px;
	}
	.right {
		border: 1px dotted red;
		height: 100vh;
		width: 100%;
		position: relative;
		}

	.add_text {
	    position: absolute;
		right: 10px;
		top: 10px;
		padding-left: 30px;
		padding-right: 30px;
		
		}
	.page-header {
		background-color:#31ac31;
		min-height: 80;
		max-height: 100;
		}

	img {
		height: 50;
		}
		
	.square {
			height: 75px;
			width: 75px;
		}

<br>


	<div>


	<br>
	 
		 <h>CM Edits
	

	<div class="row"> 
			<div class="col-md-1 col-sm-1 col-lg-1"> </div>
			
			 <div class="col-md-7 col-sm-7 col-lg-7">
			 
			 </div>
			  <div class="col-md-1 col-sm-1 col-lg-1"> </div>
			 
			<div class="col-md-3 col-sm-3 col-lg-3">
				Add Text
			</div>
	
	</div>
			
	<br><br><br>
		<div class="row"> 
			<div class="col-md-1 col-sm-1 col-lg-1"> </div>
				   <div class="col-md-7 col-sm-7 col-lg-7 left">
							   <canvas id="myCanvas" width="829" height="500" style="padding-left: inherit">
									 
									
							   
				   </div>
				   
					 <div class="col-md-1 col-sm-1 col-lg-1"> </div>
					 
				   <div class="col-md-3 col-sm-3 col-lg-3 right">
						  right pannel 
						

					

						 
				   </div>
		 </div>
	 </div>