title: When viewing the website on a phone, ask if to continue using browser or download the app to view
body: <p><a href="https://i.stack.imgur.com/DopYI.png" rel="nofollow noreferrer">i want to add this feature into my project that, When a user is viewing the website on a phone, ask if to continue using browser or download the app to view. im, using angular 12 and device-detector-js </a></p>
  <p>export class AppdevdetectorDirective {</p>
  <pre><code>constructor(
      private $bottomSheet: MatBottomSheet
  ) { this.$bottomSheet.open(DeviceDetectorComponent) : ''
      
      const deviceDetector = new DeviceDetector();
      const device = deviceDetector.parse(window.navigator.userAgent);
      console.log(device);
      console.log(device.client.name);
      (device.device.type === 'smartphone' || device.device.type === 'tablet' &amp;&amp; device.client.name !== &quot;Chrome&quot;) ? this.$bottomSheet.open(DeviceDetectorComponent) : ''
  
      
  }
  </code></pre>
  <p>}</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;router-outlet appAppdevdetector&gt;&lt;/router-outlet&gt;
  
  &lt;div class="w-1/2 flex text-right content-end justify-end"&gt;
              &lt;button onclick="window.open(document.URL, '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');" class="rounded-full bg-slate-200 py-1 w-24 flex text-base text-center justify-center items-center text-gray-700 float-right"&gt;
                  Continue
              &lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>