title: Nativescript modal dialog css selector
body: <p>I'm using Nativescript Angular for my project.</p>
  
  <p>I have added the class to differentiate tablet/phone on my root view in <code>app.component</code> which is <code>.page-tablet</code> for tablets and <code>.page-phone</code> for phones, so that I can specify styles for tablets/phones by using different selectors.</p>
  
  <p>This works fine generally, but when it comes to modal view, the selector doesn't work.
  For example I have a class <code>.modal-container</code> in my modal, and I set in the <code>app.css</code> file :</p>
  
  <pre><code> .page-phone .modal-container { font-size: 15; }
   .page-tablet .modal-container { font-size: 30; }
  </code></pre>
  
  <p>Neither my phone nor the tablet would take the <code>font-size</code> here.</p>
  
  <p>This issue only happens in <strong>Modal dialog</strong> though, other components work as expected.</p>
  
  <p>Any ideas?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>These are my app.component codes</p>
  
  <p>app.component.tns.html</p>
  
  <pre><code> &lt;page-router-outlet #RootElem&gt;&lt;/page-router-outlet&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>@ViewChild('RootElem', { static: false }) rootElem: ElementRef;
  
  ngAfterViewInit() {
      if (device.deviceType === 'Tablet') {
          this.rootElem.nativeElement.className = 'page-tablet';
      } else if (device.deviceType === 'Phone') {
          this.rootElem.nativeElement.className = 'page-phone';
      }
  }
  </code></pre>