如何在PrimeNG组件类中修改按钮标签（不使用HTML的label属性）

To set your PrimeNG button's label to "delivery address" from the component class (instead of using the label attribute directly in HTML), follow these simple steps:

Step 1: Define the Label Variable in Your Component Class #

In your Angular component's TypeScript file, declare a public property to hold the button label text:

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component', // Replace with your component's actual selector
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  // Store the label text in a class property
  buttonLabel: string = "delivery address";
}

Step 2: Bind the Variable to Your PrimeNG Button #

Connect the class variable to your button in the template using one of these two reliable methods:

Option 1: Use PrimeNG's label Input Property (Recommended) #

PrimeNG's pButton component has a built-in label input that you can bind to your class variable via property binding:

<button pButton type="button" [label]="buttonLabel"></button>

Option 2: Use Angular Interpolation with Content Projection #

You can also insert the variable directly inside the button tag using Angular's interpolation syntax:

<button pButton type="button">{{ buttonLabel }}</button>

Both approaches will render the button with the "delivery address" label pulled from your component class, keeping your template clean and separating text content from markup.

内容的提问来源于stack exchange，提问作者Thejashwini Dev