diff --git a/src/app/components/togglebutton/togglebutton.interface.ts b/src/app/components/togglebutton/togglebutton.interface.ts index 67d6d3b4551..c1ab3b02ff3 100644 --- a/src/app/components/togglebutton/togglebutton.interface.ts +++ b/src/app/components/togglebutton/togglebutton.interface.ts @@ -1,4 +1,6 @@ +import { TemplateRef } from '@angular/core'; import { ToggleButton } from './togglebutton'; + /** * Custom change event. * @see {@link ToggleButton.onChange} @@ -14,3 +16,20 @@ export interface ToggleButtonChangeEvent { */ checked: boolean | undefined; } + +/** + * Defines valid templates in ToggleButton. + * @group Templates + */ +export interface ToggleButtonTemplates { + /** + * Custom icon template. + * @param {boolean} context - checked state as boolean. + */ + icon(context: { + /** + * Checked. + */ + $implicit: boolean; + }): TemplateRef<{ $implicit: boolean }>; +} diff --git a/src/app/components/togglebutton/togglebutton.ts b/src/app/components/togglebutton/togglebutton.ts index 9c05cccf370..e54b0562d41 100755 --- a/src/app/components/togglebutton/togglebutton.ts +++ b/src/app/components/togglebutton/togglebutton.ts @@ -1,8 +1,10 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, NgModule, Output } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, NgModule, Output, QueryList, TemplateRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { RippleModule } from 'primeng/ripple'; import { ToggleButtonChangeEvent } from './togglebutton.interface'; +import { Nullable } from 'primeng/ts-helpers'; +import { PrimeTemplate, SharedModule } from 'primeng/api'; type ToggleButtonIconPosition = 'left' | 'right'; @@ -33,12 +35,16 @@ export const TOGGLEBUTTON_VALUE_ACCESSOR: any = { [attr.data-pc-name]="'togglebutton'" [attr.data-pc-section]="'root'" > + @if(!iconTemplate) { + } @else { + + } {{ checked ? (hasOnLabel ? onLabel : '') : hasOffLabel ? offLabel : '' }} `, @@ -117,6 +123,10 @@ export class ToggleButton implements ControlValueAccessor { */ @Output() onChange: EventEmitter = new EventEmitter(); + @ContentChildren(PrimeTemplate) templates!: QueryList; + + iconTemplate: Nullable>; + checked: boolean = false; onModelChange: Function = () => {}; @@ -125,6 +135,19 @@ export class ToggleButton implements ControlValueAccessor { constructor(public cd: ChangeDetectorRef) {} + ngAfterContentInit() { + this.templates.forEach((item) => { + switch (item.getType()) { + case 'icon': + this.iconTemplate = item.template; + break; + default: + this.iconTemplate = item.template; + break; + } + }); + } + toggle(event: Event) { if (!this.disabled) { this.checked = !this.checked; @@ -184,8 +207,8 @@ export class ToggleButton implements ControlValueAccessor { } @NgModule({ - imports: [CommonModule, RippleModule], - exports: [ToggleButton], + imports: [CommonModule, RippleModule, SharedModule], + exports: [ToggleButton, SharedModule], declarations: [ToggleButton] }) export class ToggleButtonModule {}