bootstrap Nav with *ngFor is not functioning when using plyr audio.

[d052057]

          // my navigator (html file)
          <ng-container *ngFor="let p of photoMenu">
            <a class="dropdown-item" [routerLink]="['/photo', p.param]">{{ p.title }}</a>
          </ng-container>

         // my component html file
   <audio autoplay playsinline preload="auto" id="player">
    <source id="audio" />
    The browser does not support {{ musicType }} file type
  </audio>

Issue: as soon as I play a song, the dropdown-item is not working any more (when I click the link). I have to click home link and then click the link again and it is working. It works on any menu item, however, as soon as play a music from 'plyr' then the dropdown-item stop working (the rest menu are still working). If I hard code the menu item (removed *ngFor) then it is working.
Would you please advise?

Thank you.

[smnbbrv]

Literally no idea how it could be connected... Do you have a reproducible example?

[d052057]

I am going to put my sample code in my repos so that you can see it.On Jun 13, 2020 1:09 AM, Semen Bobrov notifications@github.com wrote: Literally no idea how it could be connected... Do you have a reproducible example?

—You are receiving this because you authored the thread.Reply to this email directly, view it on GitHub, or unsubscribe.

[d052057]

Just release my example code to github (https://github.com/d052057/Angular9)It is the smallest app (I cut off a lot of stuff from my main app) so that you can see and it easy to debug.Here is how find out it is working or not:1. click any links on bootstrap Nav bar except 'music'.  Click on any menu items in Family Photo.  You will see that every thing is working as it is supposed to be functioning.

2. Click on 'music' link and then play a song (it doesn't matter you play or not) and then you click on family photo and the menu items in the dropdown list are not working any more (looks like the event handler are gone).  However, if you click on other links, they are all working.

I hope this will help you to detect the issue with this case. Thank you. On Saturday, June 13, 2020, 01:09:58 AM PDT, Semen Bobrov notifications@github.com wrote:

Literally no idea how it could be connected... Do you have a reproducible example?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[smnbbrv]

You don't use plyr actually. In your component https://github.com/d052057/Angular9/blob/a634926af679388b1868c7b6c10d289a6810620c/ClientApp/src/app/music/music.component.html there is no use of plyr component... You use native audio player instead

[d052057]

I am sorry about confusion on my end.  This is the code I was picking up to do it, https://github.com/sampotts/plyr. It is talking about html5 mixed up with plyr.  I did research, and I have picked up another example.  Please let me knows if this is right version.  This version, the this.player.play() doesn't work.  I have click on the |> to play audio.   This version is working fine with the family photo that I have problem last time. If the this.player.play() is working as designed, what is the way around to play a music by clicking a button? I have a button 'playMusic()'.  It loads song then it plays the music. It loads the song but the this.player.play() doesn't play music.  Please see my repos from my previous email. Thank you for your advise.

On Saturday, June 13, 2020, 11:14:00 PM PDT, Semen Bobrov <notifications@github.com> wrote:  

You don't use plyr actually. In your component https://github.com/d052057/Angular9/blob/a634926af679388b1868c7b6c10d289a6810620c/ClientApp/src/app/music/music.component.html there is no use of plyr component... You use native audio player instead

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.