From d2f1f9e8fe60d3bc62cd9a4e1d43681935cc01d0 Mon Sep 17 00:00:00 2001 From: Evan Ollivier Date: Thu, 20 Aug 2026 23:46:34 +0200 Subject: [PATCH 1/2] feat: add innerStyle input without breaking style compatibility (#289) Adds innerStyle as the preferred input while retaining style as a deprecated compatibility alias. Updates documentation, demo usage, and tests.\n\nCloses #287. (cherry picked from commit f0d03d83f2004405b622dd11e1f9de434213aa2d) (cherry picked from commit 6a350f209bca7d683f1de0719b1ef4c26997b907) --- README.md | 7 ++++--- projects/plotly/src/lib/plotly.component.spec.ts | 15 ++++++++++++++- projects/plotly/src/lib/plotly.component.ts | 6 +++++- 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index e7786e5..5d09003 100644 --- a/README.md +++ b/README.md @@ -122,18 +122,19 @@ For a full description of Plotly chart types and attributes see the following re | `(error)` | `Function(err)` | `undefined` | Callback executed when a plotly.js API method rejects | | `[divId]` | `string` | `undefined` | id assigned to the `
` into which the plot is rendered. | | `[className]` | `string` | `undefined` | applied to the `
` into which the plot is rendered | -| `[style]` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `
` into which the plot is rendered | +| `[innerStyle]` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `
` into which the plot is rendered | +| `[style]` | `Object` | `undefined` | deprecated compatibility alias for `[innerStyle]` | | `[debug]` | `Boolean` | `false` | Assign the graph div to `window.gd` for debugging | | `[useResizeHandler]` | `Boolean` | `false` | When true, adds a call to `Plotly.Plot.resize()` as a `window.resize` event handler | -**Note**: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use `style` or `className` to set the dimensions of the element (i.e. using `width: 100%; height: 100%` or some similar values) and set `useResizeHandler` to `true` while setting `layout.autosize` to `true` and leaving `layout.height` and `layout.width` undefined. This will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/ +**Note**: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use `innerStyle` or `className` to set the dimensions of the element (i.e. using `width: 100%; height: 100%` or some similar values) and set `useResizeHandler` to `true` while setting `layout.autosize` to `true` and leaving `layout.height` and `layout.width` undefined. This will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/ ```typescript @Component({ selector: 'plotly-example', template: ` + [useResizeHandler]="true" [innerStyle]="{position: 'relative', width: '100%', height: '100%'}"> `, }) export class PlotlyExampleComponent { diff --git a/projects/plotly/src/lib/plotly.component.spec.ts b/projects/plotly/src/lib/plotly.component.spec.ts index 483b1f6..52568ef 100644 --- a/projects/plotly/src/lib/plotly.component.spec.ts +++ b/projects/plotly/src/lib/plotly.component.spec.ts @@ -41,12 +41,25 @@ describe('PlotlyComponent', () => { expect(component.plotEl.nativeElement).toBeDefined(); }); - it('should receive the style from the property', () => { + it('should receive the inner style from the property', () => { + componentRef.setInput('innerStyle', { 'background-color': 'red' }); + fixture.detectChanges(); + expect(component.plotEl.nativeElement.style.backgroundColor).toBe('red'); + }); + + it('should retain style as a deprecated compatibility alias', () => { componentRef.setInput('style', { 'background-color': 'red' }); fixture.detectChanges(); expect(component.plotEl.nativeElement.style.backgroundColor).toBe('red'); }); + it('should prefer innerStyle when both style inputs are provided', () => { + componentRef.setInput('style', { 'background-color': 'red' }); + componentRef.setInput('innerStyle', { 'background-color': 'blue' }); + fixture.detectChanges(); + expect(component.plotEl.nativeElement.style.backgroundColor).toBe('blue'); + }); + it('should add the id in the #plotEl', () => { expect(component.plotEl.nativeElement.id).toBe(''); componentRef.setInput('divId', 'some-id'); diff --git a/projects/plotly/src/lib/plotly.component.ts b/projects/plotly/src/lib/plotly.component.ts index 5deb195..232b23d 100644 --- a/projects/plotly/src/lib/plotly.component.ts +++ b/projects/plotly/src/lib/plotly.component.ts @@ -29,7 +29,7 @@ import { Plotly } from './plotly.interface'; selector: 'plotly-plot', standalone: true, imports: [CommonModule], - template: `
+ template: `
`, providers: [PlotlyService], @@ -49,6 +49,10 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck { layout = input>(); config = input>(); frames = input[]>(); + innerStyle = input<{ [key: string]: string }>(); + /** + * @deprecated Use `innerStyle` to avoid conflicting with Angular's global style binding. + */ style = input<{ [key: string]: string }>(); divId = input(); From 76ecfdb68db01c2a19127d816291251d5cddae8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Farzat?= Date: Thu, 20 Aug 2026 18:50:29 -0300 Subject: [PATCH 2/2] chore: prepare 21.0.1 release --- CHANGELOG.md | 6 ++++++ package-lock.json | 4 ++-- package.json | 2 +- projects/plotly/package.json | 2 +- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4092f34..fc1a224 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## [21.0.1] - 2026-08-20 +### Fixed +- Added `[innerStyle]` as the preferred plot container styling input while + retaining `[style]` as a deprecated compatibility alias. + + ## [21.0.0] - 2026-08-20 ### Changed - Added Angular 21 support using the official Angular 20→21 migrations. diff --git a/package-lock.json b/package-lock.json index 4b7fa3a..69a964c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "angular-plotly.js", - "version": "21.0.0", + "version": "21.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "angular-plotly.js", - "version": "21.0.0", + "version": "21.0.1", "license": "MIT", "dependencies": { "@angular/common": "21.2.21", diff --git a/package.json b/package.json index 9228f83..c80f8a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-plotly.js", - "version": "21.0.0", + "version": "21.0.1", "license": "MIT", "scripts": { "ng": "ng", diff --git a/projects/plotly/package.json b/projects/plotly/package.json index 0f09c4a..7d099fe 100644 --- a/projects/plotly/package.json +++ b/projects/plotly/package.json @@ -1,6 +1,6 @@ { "name": "angular-plotly.js", - "version": "21.0.0", + "version": "21.0.1", "license": "MIT", "peerDependencies": { "@angular/common": ">=21.0.0 <22.0.0",