fix(host-binding): allow to bind the style property with an object to set multiple CSS properties (including variables) at once (#617)

* test(host-binding): add new test to verify that the hostBinding function accepts an object for style binding

* fix(host-binding): allow to pass an object for style binding

* refactor(host-binding): do not throw an error if the "property" and/or the value is undefined or null

Author: FabienDehopre

libs/ngxtension/host-binding/src/host-binding.spec.ts

@@ -52,6 +52,14 @@ class TestHost {
 	// style binding with a style unit extension
 	width = hostBinding('style.width.px', signal(500));
 
+	style = hostBinding(
+		'style',
+		signal({
+			position: 'fixed',
+			top: '10px',
+		} satisfies Partial<CSSStyleDeclaration>),
+	);
+
 	// attribute binding
 	required = hostBinding(
 		'attr.aria-required',
@@ -152,6 +160,13 @@ describe(hostBinding.name, () => {
 
 			expect(fixture.nativeElement.style.width).toEqual('500px');
 		});
+
+		it('should bind both position to "fixed" and top to "10px"', () => {
+			const { fixture } = setup();
+
+			expect(fixture.nativeElement.style.position).toEqual('fixed');
+			expect(fixture.nativeElement.style.top).toEqual('10px');
+		});
 	});
 
 	describe('attribute binding', () => {

libs/ngxtension/host-binding/src/host-binding.ts

@@ -51,14 +51,27 @@ export function hostBinding<T, S extends Signal<T> | WritableSignal<T>>(
 
 			switch (binding) {
 				case 'style':
-					renderer.setStyle(
-						element,
-						property,
-						`${value}${unit ?? ''}`,
-						property.startsWith('--')
-							? RendererStyleFlags2.DashCase
-							: undefined,
-					);
+					if (property) {
+						renderer.setStyle(
+							element,
+							property,
+							`${value}${unit ?? ''}`,
+							property.startsWith('--')
+								? RendererStyleFlags2.DashCase
+								: undefined,
+						);
+					} else if (typeof value === 'object' && value !== null) {
+						for (const [style, val] of Object.entries(value)) {
+							renderer.setStyle(
+								element,
+								style,
+								val,
+								style.startsWith('--')
+									? RendererStyleFlags2.DashCase
+									: undefined,
+							);
+						}
+					}
 					break;
 				case 'attr':
 					if (value == null) {