I am trying to integrate some various external libraries into my own component to use as part of a dashboard I am building. For simplicity, I am trying to make a Angular Element that has a Line Chart, Graphic Gauge and then some more information as an overview-item.
I am using ngx-charts for this simple example. I have taken the ngx-charts sample number card and placed the html for from the sample into my main overview-item.component.html. With the sample typescript code added to overview-item.component.ts, everything is working, including 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 works and draws the samples on my page. I am now trying to move some of this code out of the main files, into components which could be re-used, and the components themselves do not currently have module files.
The overview-item.component.html does not have any more, but will have the component that was generated which is . If I remove the from the HTML, and insert a newly generated without the chart, it still works.
<p>overview-item works!</p>
<my-number-card></my-number-card>
my-number-card.component.html
<p>my-number-card works!</p>
Note that I have not changed the imports or anything else in the module or test files, I am simply moving 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() { }
}
Now the problem occurs when I add the html for the into my my-number-card HTML and Typescript file.
When I do this, the overview-item.component.spec.ts file now complains with 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"
"): ng:///DynamicTestModule/SLSAverageGaugeComponent.html@5:2
Can't bind to 'scheme' 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 'scheme' 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. ("
The test file has remained unchanged except for the importing of the MyNumberCardComponent now that it is moved to a sub directory and component of the main component.
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
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';
describe('OverviewItemComponent', () => {
let component:OverviewItemComponent;
let fixture:ComponentFixture<OverviewItemComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
MyNumberCardComponent,
OverviewItemComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
NumberCardModule,
NgxChartsModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(OverviewItemComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create component', () => {
expect(component).toBeTruthy();
});
});
I added the schemas in reference to the errors, but they do not help. The other problem is the error is related to all the values that can be passed, as referenced in the square brackets.
I am sure I am doing something silly, but I cannot seem to get past this. My code works when it is in the parent component, but adding a child component with ng generate component does not seem to work.
