Angular 更改按钮单击时html元素的大小

这是我的模板

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

首先

第二

第三

第四

+
+

单击+/-后，我想增加/减少前三段元素的字体大小。 如何操作模板：

<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>

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