diff --git a/src/app/components/badge/badge.ts b/src/app/components/badge/badge.ts index bc36926dd44..fb1fdc95e2d 100755 --- a/src/app/components/badge/badge.ts +++ b/src/app/components/badge/badge.ts @@ -47,9 +47,21 @@ export class BadgeDirective implements OnChanges, AfterViewInit { * @group Props */ @Input() public value: string | number; + /** + * Inline style of the element. + * @group Props + */ + @Input() badgeStyle: { [klass: string]: any } | null | undefined; + /** + * Class of the element. + * @group Props + */ + @Input() badgeStyleClass: string; private id!: string; + badgeEl: HTMLElement; + private get activeElement(): HTMLElement { return this.el.nativeElement.nodeName.indexOf('-') != -1 ? this.el.nativeElement.firstChild : this.el.nativeElement; } @@ -60,7 +72,7 @@ export class BadgeDirective implements OnChanges, AfterViewInit { constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, private renderer: Renderer2) {} - public ngOnChanges({ value, size, severity, disabled }: SimpleChanges): void { + public ngOnChanges({ value, size, severity, disabled, badgeStyle, badgeStyleClass }: SimpleChanges): void { if (disabled) { this.toggleDisableState(); } @@ -80,6 +92,10 @@ export class BadgeDirective implements OnChanges, AfterViewInit { if (value) { this.setValue(); } + + if (badgeStyle || badgeStyleClass) { + this.applyStyles(); + } } public ngAfterViewInit(): void { @@ -165,6 +181,19 @@ export class BadgeDirective implements OnChanges, AfterViewInit { this.setValue(badge); DomHandler.addClass(el, 'p-overlay-badge'); this.renderer.appendChild(el, badge); + this.badgeEl = badge; + this.applyStyles(); + } + + private applyStyles(): void { + if (this.badgeEl && this.badgeStyle && typeof this.badgeStyle === 'object') { + for (const [key, value] of Object.entries(this.badgeStyle)) { + this.renderer.setStyle(this.badgeEl, key, value); + } + } + if (this.badgeEl && this.badgeStyleClass) { + this.badgeEl.classList.add(...this.badgeStyleClass.split(' ')); + } } private setSeverity(oldSeverity?: 'success' | 'info' | 'warning' | 'danger' | null, element?: HTMLElement): void {