Custom component - cannot read @Input value

1

I know, there is a great article how to integrate Highcharts, but unfortunately this library isn’t for free.
I try to do the same for Plotly, recently they issued angular version of their amazing js library, but got stuck with a strange problem: I cannot send data from HTML parent component to the graph component. This is component.ts:

import {Input, ElementRef, Component} from ‘@angular/core’;

@Component({
selector: ‘plotly-line’,
template: ‘<plotly-plot [data]=“Graph.Data” [layout]=“Graph.Layout” [useResizeHandler]=“true”>’,
})
export class PlotlyExampleComponent {
///constructor(private element: ElementRef) {}
public Graph ={
Data : [
{ x: [1, 2, 3], y: [2, 6, 3], type: ‘scatter’, },
{ x: [1, 2, 3], y: [2, 5, 3], type: ‘bar’ },
],
Layout : { autosize: true , title: ‘Title’}
};

@Input() name: string;

ngOnInit() {
this.Graph.Layout.title = this.name
}
ngOnChanges() {
this.Graph.Layout.title = this.name
}
}
I follow the same structure as it’s proposed here and try to change at least the name of the graph.
This is HTML content (it is not rendered by the forum: there is a div component and plotly-line component):

[name]="PlotName"
I see the graph, it behaves as expected, but I cannot change it from HTML.It does not show me the title whatever I do: define a variable to store the string, write a string directly in HTML, use {{name}} in the component template (this leads to the fail btw). I tried to play with data - they don't work either.

Browser debugger returns me a warning:
platform-browser.js:2854 Error: attribute x: Expected length, “NaN”.

Value of PlotName variable is ‘Fancy Plot’
What is wrong?

app.module.ts:

import { NgModule } from ‘@angular/core’;
import { ServiceWorkerModule } from ‘@angular/service-worker’;
import { environment } from ‘…/environments/environment’;
import { AppImports, AppComponent, AppDeclarations, AppProviders } from ‘./app.module-generated’;
import { PlotlyModule } from ‘angular-plotly.js’;
import { CommonModule } from ‘@angular/common’;

// Import the custom component
import { PlotlyExampleComponent } from ‘./custom.component’;

@NgModule({
declarations: [
// Register the custom component

PlotlyExampleComponent,
...AppDeclarations

],
imports: [
PlotlyModule, CommonModule,
environment.production ? ServiceWorkerModule.register(‘ngsw-worker.js’) : [],
…AppImports
],
providers: [
…AppProviders
],
bootstrap: [AppComponent]
})
export class AppModule {
}

2

You can try testing whether the component is updated after changing the name property. Just modify the template of your custom component to output what the current value of name is:

@Component({
selector: 'plotly-line',
template: `
   <div>
     Name: {{name}} 
     <plotly-plot [data]="Graph.Data" 
                  [layout]="Graph.Layout" 
                  [useResizeHandler]="true">
     </plotly-plot>
   </div>
`
})
``
3

Tryed. Doesn't work :frowning:

4

I have a similar issue. I created a custom component, and I want to change component properties from the html page where the component is hosted. But it seems not to work, as Nikolay expressed.

Do you have a working sample?

Regards

5

I have updated our CustomComponent demo to show setting properties. It is based on the CustomComponent help article.

6

Thanks for the updated demo Atanas, I have been able to pass an object from the parent page to the child component.

Regards