Change dynamically css proprety of various inputs in angular

I would like to know the correct way to do one thing. I have those buttons, and I want the opacity of a button to increase when pressed. I’ve done lik this, but I’m afraid it’s not a good solution…
I always hear that use jQuery in angular is not a good thing, so I try to not use the .css proprety of jquery of an element…

<div class="calibrationDiv" *ngIf="startCalibration" (click)="onClick($event)" >

    
    <input type="button" class="Calibration" id="Pt1" [style.opacity]="0.2*calibrationPoints['Pt1'] + 0.2">
    <input type="button" class="Calibration" id="Pt2" [style.opacity]="0.2*calibrationPoints['Pt2'] + 0.2">
    <input type="button" class="Calibration" id="Pt3" [style.opacity]="0.2*calibrationPoints['Pt3'] + 0.2">
    <input type="button" class="Calibration" id="Pt4" [style.opacity]="0.2*calibrationPoints['Pt4'] + 0.2">
    <input type="button" class="Calibration" id="Pt5" [style.opacity]="0.2*calibrationPoints['Pt5'] + 0.2">
    <input type="button" class="Calibration" id="Pt6" [style.opacity]="0.2*calibrationPoints['Pt6'] + 0.2">
    <input type="button" class="Calibration" id="Pt7" [style.opacity]="0.2*calibrationPoints['Pt7'] + 0.2">
    <input type="button" class="Calibration" id="Pt8" [style.opacity]="0.2*calibrationPoints['Pt8'] + 0.2">
    <input type="button" class="Calibration" id="Pt9" [style.opacity]="0.2*calibrationPoints['Pt9'] + 0.2">
    
</div>

Source: Angular Questions