I have been working on integrating various external libraries into my custom component to use in a dashboard project I'm developing. To simplify the process, I decided to create an Angular Element that includes a Line Chart, Graphic Gauge, and additional information in an overview-item.
For this example, I am utilizing ngx-charts. I have taken the ngx-charts sample number card and inserted the HTML code from the sample into my main overview-item.component.html. By adding the sample TypeScript code to overview-item.component.ts, everything is functioning correctly in my testing application.
<p>overview-item works!</p>
<ngx-charts-number-card
[view]="view"
[scheme]="colorScheme"
[results]="results"
(select)="onSelect($event)">
</ngx-charts-number-card>
This setup displays the samples on my page perfectly. Now, I am attempting to refactor this code out of the main files into reusable components. However, the components currently do not have module files.
The overview-item.component.html no longer contains the ngx-charts code, but will display the newly generated component. Even without the chart, the application still works.
<p>overview-item works!</p>
<my-number-card></my-number-card>
my-number-card.component.html
<p>my-number-card works!</p>
It's important to note that the imports and other configurations in the module and test files remain unchanged as I move the code.
overview-item.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { NumberCardModule } from '@swimlane/ngx-charts';
import { MyNumberCardComponent } from './my-number-card/my-number-card.component';
@NgModule({
declarations: [
MyNumberCardComponent
OverviewItemComponent
],
exports: [OverviewItemComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
NumberCardModule,
NgxChartsModule
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
NO_ERRORS_SCHEMA
]
})
export class OverviewItemModule { }
EDIT Added my-number.component.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'overview-item',
template: `
<ngx-charts-number-card
[view]="view"
[scheme]="colorScheme"
[results]="results"
(select)="onSelect($event)">
</ngx-charts-number-card>
`
})
export class OverviewItemComponent implements OnInit {
view = [700, 200];
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C']
};
results = [
{ "name": 'Germany', 'value': 8940000 },
{ 'name': 'USA', 'value': 5000000 },
{ 'name': 'France', 'value': 7200000 }
];
constructor() { }
onSelect(event) {
console.log(event);
}
ngOnInit() { }
}
As I add the HTML for ngx-charts into my-number-card HTML and TypeScript files, I encounter an issue.
Upon doing this, the overview-item.component.spec.ts file starts throwing an error:
Failed: Template parse errors:
Can't bind to 'view' since it isn't a known property of 'ngx-charts-number-card'.
1. If 'ngx-charts-number-card' is an Angular component and it has 'view' input, then verify that it is part of this module.
2. If 'ngx-charts-number-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<ngx-charts-number-card
[ERROR ->][view]="view"
[scheme]="colorScheme"
[results]="results"
This problem seems to be related to all the values that can be passed, as indicated by the square brackets.</p>
<p>Although I have added the schemas in response to the errors, they do not seem to resolve the issue. Additionally, the error pertains to the bindings for all possible properties that can be passed.</p>
<p>While I am sure I might be missing something simple, I can't seem to move past this obstacle. The code functions as intended when it is in the parent component, but creating a child component using <code>ng generate component is not producing the desired outcome.