Change fontsize of html elements on button click in angular

Question

Here is my template.

<div>
<p>First</p>
<p>Second</p>
<div>
<p>Third</p>
<p>Fourth</p>
</div>
<button>+</button>
<button>+</button>

On clicking +/- I want to increase/decrease font size of say first three Paragraph Element. How to do it

Answer 1

template:

<div>
    <p [ngStyle]="{'font-size.px':fontSize}">First</p>
    <p [ngStyle]="{'font-size.px':fontSize}">Second</p>
    <p [ngStyle]="{'font-size.px':fontSize}">Third</p>
    <p [ngStyle]="{'font-size.px':fontSize}">Fourth</p>
</div>
<button (click)="IncrFontSize()">+</button>
<button (click)="DecreFontSize()">-</button>

Code:

   fontSize = 24;
   IncrFontSize() {
    this.fontSize++;
   }
   DecreFontSize() {
    this.fontSize--;
   }