I'm quite new to NGX-Template and Angular. I'm making my way forwards, but got stuck on a issue.
I've created a new page: customer. In this page I want to render a nb-card element
<div *ngFor="let customer of values" class="col-md-12 col-lg-6 col-xxxl-6">
<nb-card>
<nb-card-header>{{customer.name}}</nb-card-header>
<nb-card-body>
<p>Beautifull body</p>
</nb-card-body>
<nb-card-footer>Good customer</nb-card-footer>
</nb-card>
</div>
</div>
In my customer module I've imported the theme and nbcardmodule
import { ThemeModule } from '../../@theme/theme.module';
import {
NbButtonModule,
NbCardModule,
NbProgressBarModule,
NbTabsetModule,
NbUserModule,
NbIconModule,
NbSelectModule,
NbListModule,
} from '@nebular/theme';
import { CustomerRoutingModule } from './customer-routing.module';
import { CustomerCardComponent } from './customer-card/customer-card.component';
import {CustomerComponent } from './customer.component';
@NgModule({
imports: [
NbButtonModule,
NbCardModule,
NbProgressBarModule,
NbTabsetModule,
NbUserModule,
NbIconModule,
NbSelectModule,
NbListModule,
ThemeModule,
CustomerRoutingModule,
],
declarations: [
CustomerCardComponent, CustomerComponent ],
})
export class CustomerModule {}
Than finaly my customer.component.ts file
import { Component, OnInit } from '@angular/core';
import { Customer } from '../../@core/models/customer.model';
import { CustomerService } from '../../@core/services/customer.service'
@Component({
selector: 'ngx-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.scss']
})
export class CustomerComponent implements OnInit {
public message: string;
public values: any[];
constructor(private customerService: CustomerService){}
ngOnInit() {
this.customerService.getAll<Customer[]>().subscribe((data: Customer[]) => this.values = data, error => () => {
this.message = 'Error: Could not get the data from the service';
},
() => {
this.message = 'succes';
});
}
}
This is the error supplied by the console
ERROR Error: Uncaught (in promise): Error: Template parse errors:
'nb-card-header' is not a known element:
1. If 'nb-card-header' is an Angular component, then verify that it is part of this module.
2. If 'nb-card-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div *ngFor="let customer of values" class="col-md-12 col-lg-6 col-xxxl-6">
<nb-card>
[ERROR ->]<nb-card-header>{{customer.name}}</nb-card-header>
<nb-card-body>
<p>Beautifull"): ng:///PagesModule/CustomerComponent.html@3:8
So I hope someone can push me in the right direction. I'm sure it's a little thing what I'm overlooking.
Thanks in advance! :-)
