<div id="demoApp" class="container">
  <div class="demo-container">
    <a class="github-logo" href="https://github.com/ahsanayaz/ngx-device-detector">
      <img src="assets/images/github-logo.png" />
    </a>
    <div class="demo-heading">
      <div style="text-align: center; width: 100%">
        <img src="https://raw.githubusercontent.com/AhsanAyaz/ngx-device-detector/master/assets/logo.svg" width="200">
      </div>
      <a href="https://github.com/ahsanayaz/ngx-device-detector">
        <h1 align="center" class="demo-heading-text">ngx-device-detector</h1>
      </a>

      <p align="center">
        An Angular 5+ powered AOT compatible device detector that helps to identify browser, os and other useful
        information regarding the device using the app. The processing is based on user-agent.
      </p>

      <p align="center" class="badges">
        <a href="https://github.com/ahsanayaz/ngx-device-detector/actions/workflows/main.yml"
          ><img
          src="https://github.com/ahsanayaz/ngx-device-detector/actions/workflows/main.yml/badge.svg"
          alt="build status"
        /></a>
        <a href="https://www.npmjs.com/package/ngx-device-detector"
          ><img src="https://img.shields.io/npm/v/ngx-device-detector.svg" alt="npm version"
        /></a>
        <a href="https://www.npmjs.com/package/ngx-device-detector"
          ><img
          src="https://img.shields.io/github/stars/AhsanAyaz/ngx-device-detector.svg?style=social&label=Star&style=flat-square"
          alt="github stars"
        /></a>
        <a href="https://www.npmjs.com/package/ngx-device-detector"
          ><img src="https://img.shields.io/npm/l/ngx-device-detector.svg?style=flat-square" alt="license"
        /></a>
      </p>
      <hr />
    </div>
    <div class="demo-message text-center">Demo is at Angular version = {{ version }}</div>
    <div class="demo-message">
      <p class="text-center">Open this page from different devices to see the appropriate details</p>
      <h4 class="text-center">Device Information</h4>
    </div>
    <div class="user-agent">
      <div class="user-agent__input">
        <div class="form-group">
          <label for="userAgentInput">Test User Agent</label>
          <input class="form-control" id="userAgentInput" #userAgentInput type="text" placeholder="" />
          <small id="uaHelp" class="form-text text-muted">Paste the user agent (window.navigator.userAgent) here</small>
        </div>
      </div>
      <div class="user-agent__buttons">
        <button class="btn btn-primary btn-sm" (click)="applyDevice(userAgentInput.value)">
          Apply test user agent
        </button>
        <button class="btn btn-warning btn-sm" (click)="resetDeviceInfo()">Reset device info</button>
      </div>
    </div>
    <div class="information-table">
      <div class="device-icon">
        <div class="fa" [ngClass]="{ 'fa-desktop': isDesktop, 'fa-mobile': isMobile, 'fa-tablet': isTablet }"></div>
        @if (isMobile) {
          <div class="device-text">Mobile</div>
        }
        @if (isTablet) {
          <div class="device-text">Tablet</div>
        }
        @if (isDesktop) {
          <div class="device-text">Desktop</div>
        }
      </div>
      <table class="table table-hover">
        <tr>
          <th>Property</th>
          <th>Value</th>
        </tr>
        @for (info of deviceInfo | keys : propsToShow; track info) {
          <tr class="info-item w3-hover-blue">
            <td>{{ info.key }}</td>
            <td>{{ info.value }}</td>
          </tr>
        }
        <tr class="info-item w3-hover-blue">
          <td>isDesktop()</td>
          <td>{{ isDesktop }}</td>
        </tr>
        <tr class="info-item w3-hover-blue">
          <td>isMobile()</td>
          <td>{{ isMobile }}</td>
        </tr>
        <tr class="info-item w3-hover-blue">
          <td>isTablet()</td>
          <td>{{ isTablet }}</td>
        </tr>
      </table>
    </div>
  </div>
</div>

./app.component.scss

:host {
  position: relative;
  display: block;
}
#demoApp {
  max-width: 600px;
  padding-top: 40px;
  .demo-container {
    .github-logo {
      cursor: pointer;
      position: absolute;
      top: 10px;
      right: 10px;
      img {
        width: 40px;
        transform: rotate(45deg);
      }
      &:hover {
        img {
          opacity: 0.6;
        }
      }
    }
    .badges {
      a {
        margin-left: 4px;
        margin-right: 4px;
      }
    }
  }

  .device-icon {
    text-align: center;
    padding: 20px;

    .fa {
      font-size: 100px;
    }
  }

  .user-agent {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    &__input {
      flex: 1;
      input {
        width: 100%;
      }
    }
    &__buttons {
      display: flex;
      justify-content: flex-end;
      > button {
        &:first-child {
          margin-right: 10px;
        }
      }
    }
  }
}