How do I include an Angular component that contains other non HTML elements like mat-icon via CDK Overlay

Question

I am attempting to implement a Speech To Text feature within my App by using a directive [appSpeechToText] which I can apply to any input/textarea field, the component basically displays a Record, Pause and Stop buttons for which I wish to use the <mat-icon> element.

My directive works in that if I create the HTML

<p>BANG!</p>

Everything compiles as you would expect and the label BANG! is displayed next to my textarea control as I would expect, however when I change the HTML to

<mat-icon>not_started</mat-icon>

I get the following message during compilation: -

src/app/shared/components/speech-to-text/speech-to-text.component.html:2:5 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2     <mat-icon>not_started</mat-icon>
      ~~~~~~~~~~

  src/app/shared/components/speech-to-text/speech-to-text.component.ts:5:18
    5     templateUrl: './speech-to-text.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SpeechToTextComponent.

I am at a loss as to how I inform Angular that I wish to use the MatIconModule?

To clarify

The component is launched via a directive using

this.overlayRef.attach(new ComponentPortal(SpeechToTextComponent))

I am not referencing the component in any module because it is dynamically attached to the overlay. I do however have the MatIconModule imported in my app.module.ts file but to no effect.

score 3 · Accepted Answer · answered Nov 10 '20 at 09:50

3

Either add the MatIconModule to the imports in your app.module.ts or (if existing) speech-to-text.module.ts.

answered Nov 10 '20 at 09:50

Marek W

699
4
14

thank you, I have included the MatIconModule in my app.module.ts file, I have added some clarification to my original question. – Andrew HB Nov 10 '20 at 10:09
My first guess would be, that the component is not attached to the the app.module, therefore requiring an own module like `speech-to-text.module.ts` and importing the Mat module there – Marek W Nov 10 '20 at 10:35

score 0 · Answer 2 · answered Nov 10 '20 at 09:52

0

import { MatIconModule } from '@angular/material/icon'

answered Nov 10 '20 at 09:52

Vinay

88
1
10

thank you, I have included the MatIconModule in my app.module.ts file, I have added some clarification to my original question. – Andrew HB Nov 10 '20 at 10:09
import MatIconModule in speech-to-text.component.ts file – Vinay Nov 10 '20 at 10:26

score 0 · Answer 3 · answered Nov 10 '20 at 09:56

0

You are most probably missing a module import in your app module .ts file.

If you are just getting started with Angular Material components, make sure to refer to the getting started guide: https://material.angular.io/guide/getting-started And the icon component reference: https://material.angular.io/components/icon/api

answered Nov 10 '20 at 09:56

nsndvd

800
8
21

thank you, I have included the MatIconModule in my app.module.ts file, I have added some clarification to my original question. – Andrew HB Nov 10 '20 at 10:09
then probably your component belongs to a different module, and that module should be importing the MatIconModule. – nsndvd Nov 10 '20 at 10:19
As Marek W suggested, a speech-to-text.module.ts or something like that – nsndvd Nov 10 '20 at 10:20
Maybe try this https://angular.io/guide/sharing-ngmodules @AndrewHB – nsndvd Nov 10 '20 at 10:28

Andrew HB · Answer 4 · 2020-11-10T11:12:08.117

Sorted it I needed to add the SpeechToTextComponent into the declarations array within my app.module.ts file, having said that because of the need to reference both the directive and the component it would probably make sense to put it into it's own module as mentioned above.

import { NgModule } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { SpeechToTextComponent } from '../components/speech-to-text/speech-to-text.component';
import { SpeechToTextDirective } from '../directives/speech-to-text.directive';

@NgModule({
    imports: [MatIconModule],
    declarations: [SpeechToTextComponent, SpeechToTextDirective],
    exports: [SpeechToTextDirective]
})
export class SpeechToTextModule {}

How do I include an Angular component that contains other non HTML elements like mat-icon via CDK Overlay

4 Answers4