Subject in anular html file
<div style="background-color:burlywood" class="card">
<div class="card-body">
<h5 class="card-title">Component 3</h5>
<input name="comp3" #comp3 type="text" />
<button (click)="onSubmit(comp3)">Submit</button>
<p class="card-text">{{Component3Data}}</p>
</div>
</div>
//secong HTML file:
<div style="background-color: aliceblue;" class="card">
<div class="card-body">
<h5 class="card-title">Component 1</h5>
<input name="comp1" #comp1 type="text" />
<button (click)="onSubmit(comp1)">Submit</button>
<p class="card-text">{{Component1Data}}</p>
</div>
</div>
//third HTML file:
<div style="background-color:antiquewhite" class="card">
<div class="card-body">
<h5 class="card-title">Component 2</h5>
<input name="comp2" #comp2 type="text" />
<button (click)="onSubmit(comp2)">Submit</button>
<p class="card-text">{{Component2Data}}</p>
</div>
</div>