I was trying to use ng-waveform
In app.module
file added
import { NgWaveformModule } from 'ng-waveform';
in import section
imports: [
NgWaveformModule,
],
in my ts file
included
import { ITimeUpdateEvent, NgWaveformComponent, IRegionPositions } from 'ng-waveform';
export class WaveComponent implements OnInit {
@ViewChild('waveform', { static: false }) waveform: NgWaveformComponent;
html Component
added
<ng-waveform #waveform class="waveform"
[src]="src"
[height]="150"
[useRegion]="true"
backgroundColor="#d3d3d3"
regionBackgroundColor="rgba(255, 255, 255, 0.7)"
regionStartStickColor="#21f032"
regionEndStickColor="red"
regionTextColor="#09417e"
[withRegionLabels]="true"
waveColor="#ff11ff"
(trackLoaded)="onTrackLoaded($event)"
(rendered)="onTrackRendered($event)"
(durationChange)="onDurationChange($event)"
(timeUpdate)="onTimeUpdate($event)"
(paused)="onPaused()"
(regionChange)="onRegionChange($event)"
>
but still getting
'ng-waveform' is not a known element:
- If 'ng-waveform' is an Angular component, then verify that it is part of this module.
- If 'ng-waveform' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
Any solution to resolve this issue Thanks
You probably forgot to add your WaveComponent
in your module.
@NgModule({
imports: [BrowserModule, FormsModule, NgWaveformModule],
declarations: [
....
WaveComponent // don't forget to declare your components
],
bootstrap: [AppComponent],
})
export class AppModule {}