mirror
/
tabler-icons
mirror of https://github.com/tabler/tabler-icons.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Enhance ngOnChanges method in TablerIconComponent to optimize updates based on relevant input changes, improve class handling by filtering empty strings, and ensure proper node checks for child elements.

This commit is contained in:
codecalm 2025-12-24 01:03:36 +01:00
parent ca8dad15c7
commit 643e2f0ed9
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/icons-angular/src/lib/tabler-icon.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ElementRef, HostBinding, inject, Input, OnChanges, Renderer2 } from '@angular/core';
import { Component, ElementRef, HostBinding, inject, Input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
import defaultAttributes from '../defaultAttributes';
import { TablerIcon, TablerIconNode } from '../types';
import { TablerIconConfig } from './tabler-icon.config';
@ -61,7 +61,15 @@ export class TablerIconComponent implements OnChanges {
};
}
ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
// Only update if icon, color, stroke, size, or class changed
const shouldUpdate = changes['icon'] || changes['color'] || changes['stroke'] ||
changes['size'] || changes['class'];
if (!shouldUpdate && this.elementRef.nativeElement.firstChild) {
return; // Skip update if nothing relevant changed
}
this.size ??= this.config.size;
if (typeof this.icon === 'string') {
if (!this.icon || this.icon.trim() === '') {
@ -104,12 +112,11 @@ export class TablerIconComponent implements OnChanges {
const iconElement = this.createElement(['svg', attributes, icon.nodes]);
iconElement.classList.add('tabler-icon', `tabler-icon-${icon.name}`);
if (this.class) {
this.class.split(/ /).forEach(cls => {
const trimmed = cls.trim();
if (trimmed) {
iconElement.classList.add(trimmed);
}
});
// Split by whitespace and filter empty strings
const classes = this.class.trim().split(/\s+/).filter(cls => cls.length > 0);
if (classes.length > 0) {
iconElement.classList.add(...classes);
}
}
while (this.elementRef.nativeElement.firstChild) {
@ -130,7 +137,7 @@ export class TablerIconComponent implements OnChanges {
}
});
if (nodes?.length > 0) {
if (nodes && nodes.length > 0) {
nodes.forEach((node: TablerIconNode) => {
const childElement = this.createElement(node);
this.renderer.appendChild(element, childElement);