CODEWITHSUNDEEP
angularprimeng
Juliet Rybets
Juliet Rybets

Reputation: 59

how to change Labels in primeng toggle button Angular?

I have info button as component. And I want to use it more than one time with different Labels. Primeng has onLabel attribute, but it doesnt work in parent component. May be somebody know how to do that?

info-button.component html:

<p-toggleButton
    onIcon="pi pi-info"
    offIcon="pi pi-times">i</p-toggleButton>

ts

@Component({
  selector: 'app-infobutton',
  templateUrl: './info-icon.component.html',
  styleUrls: ['./info-icon.component.css']
})
export class IconComponent implements OnInit {
  @Input()
  onLabel: string;

  constructor() { }

  ngOnInit() {
  }
}

I call info button in some component, more than ones some.component html: 

<app-infobutton class="col-1" [onLabel]="'text'" ></app-infobutton>
<app-infobutton class="col-1" [onLabel]="'text2'" ></app-infobutton>

ts:

export class ParentComponent implements OnInit{
  text: string = "some text";
  text2: string = "another text";
}

this 'some Text' I get as attribute. not like label.

Output

<app-infoicon _ngcontent-cee-c3="" class="col-1" _nghost-cee-c5="" ng-reflect-on-label="some Text" <!--this is my output-->>
   <div _ngcontent-cee-c5="" class="info-icon icon-default">
      <p-togglebutton _ngcontent-cee-c5="" officon="pi pi-times" onicon="pi pi-info" ng-reflect-on-icon="pi pi-info" ng-reflect-off-icon="pi pi-times">
           <div class="ui-button ui-togglebutton ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-state-active" ng-reflect-ng-class="[object Object]">
               <span class="ui-button-text ui-unselectable-text">Yes <!--this is Label--></span></div>
       </p-togglebutton>
    </div>
 </app-infoicon>

Upvotes: 0

Views: 3729

Answers (2)

MoxxiManagarm
MoxxiManagarm

Reputation: 9124

Just extend your template like this

<p-toggleButton
    [onLabel]="onLabel"
    onIcon="pi pi-info"
    offIcon="pi pi-times">i</p-toggleButton>

Upvotes: 1

&#216;rjan
&#216;rjan

Reputation: 2879

I assume you are using the PrimeNg component library as that was the first library i found using the selctor <p-togglebutton>

Based on the documentation, to be able to show a label, you have to pass the label attribute to the component like this: 

<p-toggleButton onLabel="I confirm"></p-toggleButton>

So based on your example I assume you have to pass you're label attribute to the component like this:

<p-toggleButton
  [onLabel]="onLabel"
  onIcon="pi pi-info"
  offIcon="pi pi-times">i</p-toggleButton>

Upvotes: 1

Related Questions