How to intercept app install prompt in Angular PWA?

You are probably doing it properly, but according to this article:
"The mini-infobar will appear when the site meets the add to home screen criteria, regardless of whether you preventDefault() on the beforeinstallprompt event or not."
So for me also, it shows immediately.

Pete LePage (@petele) is a good person to follow on twitter for updates to A2HS.

Here is the Add To Home Screen (A2HS) tester I built. There is a link to the source code on the bottom of the page. Feel free to use anything that may be helpful. I have not updated it recently to the most current version of angular. But it should all still work fine since it's basic code.
https://a2hs.glitch.me

The links provided in Mathias' answer helped me solve the problem. I am just adding a few points that are not explicitly mentioned in the answer but might help someone else.

• The app install banner can only be shown on some user activity. For example - a button click. It can't be prompted via setTimeout.
• Currently, intercepting the beforeinstallprompt and showing it later works in Chrome and Edge because Chrome and Edge fires the event automatically when the user visits the site. Firefox doesn't fire the beforeinstallprompt event and hence it doesn't work on Firefox.