Skip to content

Commit 0fecea1

Browse files
AndrewKushnirkara
authored andcommitted
fix(ivy): reset style property value defined using [style.prop.px] (angular#33780)
Prior to this change, setting style prop value to undefined or empty string would not result in resetting prop value in case the style prop is defined using [style.prop.px] syntax. The problem is that the check for empty value (and thus reseting the value) considered successful only in case of `null` value. This commit updates the check to use `isStylingValueDefined` function that also checks for undefined and empty string. PR Close angular#33780
1 parent f1b3284 commit 0fecea1

File tree

2 files changed

+29
-1
lines changed

2 files changed

+29
-1
lines changed

packages/core/src/render3/instructions/styling.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -585,7 +585,7 @@ function resolveStylePropValue(
585585
if (value === NO_CHANGE) return value;
586586

587587
let resolvedValue: string|null = null;
588-
if (value !== null) {
588+
if (isStylingValueDefined(value)) {
589589
if (suffix) {
590590
// when a suffix is applied then it will bypass
591591
// sanitization entirely (b/c a new string is created)

packages/core/test/acceptance/styling_spec.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2310,6 +2310,34 @@ describe('styling', () => {
23102310
expect(fixture.debugElement.nativeElement.innerHTML).toContain('three');
23112311
});
23122312

2313+
it('should allow to reset style property value defined using [style.prop.px] binding', () => {
2314+
@Component({
2315+
template: '<div [style.left.px]="left"></div>',
2316+
})
2317+
class MyComp {
2318+
left = '';
2319+
}
2320+
2321+
TestBed.configureTestingModule({declarations: [MyComp]});
2322+
const fixture = TestBed.createComponent(MyComp);
2323+
fixture.detectChanges();
2324+
2325+
const checks = [
2326+
['15', '15px'],
2327+
[undefined, ''],
2328+
[null, ''],
2329+
['', ''],
2330+
['0', '0px'],
2331+
];
2332+
const div = fixture.nativeElement.querySelector('div');
2333+
checks.forEach((check: any[]) => {
2334+
const [fieldValue, expectedValue] = check;
2335+
fixture.componentInstance.left = fieldValue;
2336+
fixture.detectChanges();
2337+
expect(div.style.left).toBe(expectedValue);
2338+
});
2339+
});
2340+
23132341
onlyInIvy('only ivy treats [class] in concert with other class bindings')
23142342
.it('should retain classes added externally', () => {
23152343
@Component({template: `<div [class]="exp"></div>`})

0 commit comments

Comments
 (0)