TypeError: Cannot read properties of undefined (reading 'nativeElement') Angular in waveform lib

this is my code and that is show error

that is create waveform but waveform not create function.

 startRecording() {
    this.mediaSectionVisible = false;
    if (!this.isRecording) {
      this.isRecording = true;
      navigator.mediaDevices
      .getUserMedia({ audio: true })
      .then((stream) => {
        this.isRecording = true;
        this.mediaRecorder = new MediaRecorder(stream);
        this.mediaRecorder.ondataavailable = (event) => {
          if (event.data.size > 0) {
            this.audioChunks.push(event.data);
          }
        };
        this.mediaRecorder.onstop = () => {
          this.isRecording = false;
          this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
          this.audioChunks = [];
          clearInterval(this.recordingTimer);
          this.convertBlobToBase64(this.audioBlob);
          this.displayWaveform(this.audioBlob);
          };
          this.mediaRecorder.start();
          this.recognition.start();
          this.recordingTime = 0;
          this.recordingTimer = setInterval(() => {
            this.ngZone.run(() => {
              this.recordingTime++;
              this.cdr.detectChanges();
            });
          }, 1000);
          
          this.cdr.detectChanges();

          if (this.wavesurfer) {
            this.wavesurfer.destroy();
            this.cdr.detectChanges();

          }
          this.cdr.detectChanges();

          this.wavesurfer = WaveSurfer.create({
            container: this.waveformElement.nativeElement as HTMLElement,
            waveColor: '#E7E7E7',
            progressColor: '#222021',
            cursorColor: '#ffffff',
            height: 55,
            barWidth: 8,
            barGap: 3,
            barRadius: 30,
            autoScroll: true,
            autoCenter: true,
            autoplay: false,
          });

          this.wavesurfer.once('interaction', () => {
            this.wavesurfer?.play();
            this.cdr.detectChanges()
          });
          // console.log('audioBlob....', this.audioBlob);
          if (this.audioBlob !== null) {
            this.displayWaveform(this.audioBlob);
          }
        })
        .catch((error) => {
          this.notifyService.showError('internal error abc:', '');
          console.log(error);
        });
    }
  }

that is html code

<div class="section-container" *ngIf="audioSectionVisible">
    <div class="width-container">
        <div class="d-flex justify-content-between">
            <p class="upload-text">RECORDING ADDED</p>
            <button class="bg-transparent" *ngIf="isRecording && !blobUrl" (click)="hideSection(); clearRecordedData()">
                <img src="./assets/images/cross-icon.svg" alt="Delete Selected Image" width="20px" height="20px">
            </button>
        </div>
        <div>
            <div class="waveform" #waveform></div>
        </div>
        <div class="d-flex align-items-center">
            <button class="media-btn me-3" (click)="playAudio()">
                <img src="./assets/images/pause-audio.svg" *ngIf="isPlaying" width="20px" height="20px">
                <img src="./assets/images/play-audio.svg" *ngIf="!isPlaying">
            </button>
            <div class="upload-text d-flex w-100 justify-content-between" *ngIf="isRecording && !blobUrl">
                <p>RECORDING</p>
                <p>{{recordedTime}}</p>
            </div>
        </div>
    </div>
</div>

i am store recording voice that voice store in waveform and that waveform not show and code direct throw error and catch under. waveform show but first click show error after second time click and new voice record after showing waveform so how fix error.

Error show because I'm using *ngIf="audioSectionVisible" in html.

I use [ngClass]="audioSectionVisible ? 'show-div' : 'hide-div'" after code working.

*ngIf is block DOM so most of use [ngclass] = abc ? true : false and use ternary op....

most use ternery opraters in angular html file because *ngIf is block DOM and many time face issues.