Can anyone help me understand why I am encountering this issue with a reusable Module (or what mistake I have made)?
ERROR Error: Uncaught (in promise): Error: Template parse errors: 'fa-icon' is not a known element
Just to clarify: fa-icon is a Font Awesome element
toolbar-fab.component.html:
<button
mat-mini-fab
class="mat-mini-fab mat-accent"
routerLink="{{ fabLink }}">
<fa-icon icon="{{ fabIcon }}"></fa-icon>
</button>
toolbar-fab.component.ts:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-toolbar-fab',
templateUrl: './toolbar-fab.component.html',
styleUrls: ['./toolbar-fab.component.scss']
})
export class ToolbarFabComponent {
@Input() fabIcon: string;
@Input() fabLink: string;
}
toolbar-fab.module.ts:
import { Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ToolbarFabComponent } from '@app/shared/components/fabs/toolbar-fab/toolbar-fab.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
library.add(faPlus);
@NgModule({
imports: [
CommonModule,
FontAwesomeModule,
RouterModule
],
declarations: [
ToolbarFabComponent
],
exports: [
ToolbarFabComponent
]
})
export class ToolbarFabModule {
@Input() fabIcon: string;
@Input() fabLink: string;
}
airframe-list.component.html
. . .
<app-toolbar-fab
[fabIcon]="fabIcon"
[fabLink]="fabLink">
</app-toolbar-fab>
. . .
airframe-list.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-airframe-list',
templateUrl: './airframe-list.component.html',
styleUrls: ['./airframe-list.component.scss']
})
export class AirframeListComponent implements OnInit {
fabIcon = 'plus';
fabLink = '/inventory/add-airframe';
ngOnInit() {
}
}
airframe-list.module.ts
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { MaterialModule } from '@app/shared/material.module';
import { AirframeListRoutingModule } from '@app/modules/inventory/airframes/airframe-list-routing.module';
import { AirframeListComponent } from '@app/modules/inventory/airframes/pages/airframe-list/airframe-list.component';
import { ToolbarFabModule } from '@app/shared/components/fabs/toolbar-fab/toolbar-fab.module';
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MaterialModule,
ToolbarFabModule,
TranslateModule,
AirframeListRoutingModule
],
declarations: [AirframeListComponent],
})
export class AirframeListModule {
}
Thank you for your assistance!