Nativescript-angular: Screen Size Qualifiers not work in tns Angular project, only work in js project.

[tsonevn]

_From @Arthurisme on August 19, 2016 5:13_

I use following names as Screen Size Qualifiers, but none of any one is working in tns angular project:

page.minWH600.html
page.minWH600.css
page.minWH600.ts
page.land.css
page.land.html
page.port.css
page.port.html

So is it because Screen Size Qualifiers not support angular project yet?

_Copied from original issue: NativeScript/NativeScript#2604_

[tsonevn]

Hi @Arthurisme,

Screen Size Qualifiers are still not supported in NativeScript Angular projects. Such a feature would be available for some of the next nativescript-angular versions. As a temporary solution you could use nativescript-orientaion to set different style for the different orientations. Example could be found here.

[andy-tai]

+1 for this issue

[andy-tai]

so may I guess... the file name resolver works at run time but with Angular 2, the css file name has to be specified at compile time...
example:
@Component({
selector: "front",
templateUrl: "pages/front/front.html",
styleUrls: ["pages/front/front-common.css"],
})

the styleUrls cannot be computed at run time...

[echap]

Any update regarding this ?

This is quite of a key feature :+1:

[vakrilov]

Currently we are evaluating how to support that.

The main problem is that this feature cannot work with angular Ahead-Of-Time Compilation as in this case the template should be known at build time, but the screens size and orientation is something only available at runtime.

[valentinstoychev]

We should evaluate implementing bootstrap-like responsive layout grid as available on the web.

[jlooper]

@vakrilov - community is asking where we are on this topic? ping ping?

[EddyVerbruggen]

Just in case someone would only need tablet-specific CSS (like myself) and can't wait for an official solution (like myself), you can do:

const isTablet: boolean = device.deviceType == DeviceType.Tablet;

@Component({
  styleUrls: ['default.css', (isTablet ? 'tablet.css' : 'phone.css')]
})

[anuragd7]

Any update on when this feature is likely to be available?

[vakrilov]

Just an update:
We are still in the process of figuring this out.
The main problem with Angular is supporting Ahead-Of-Time compilation (AOT). AOT happens build-time wile the information about the device (dimensions, orientation, etc) is available runtime. I don't think currently it is possible to tell the angular compiler to compile multiple templates(XML files) for a single component and choose which one to use based on some runtime logic.

[jarrodchesney]

Maybe the solution involves qualifying the selector as well

@component({
selector: "front-port-minWH600",
...

You could then dynamically create a selector: "front" component that has ng-ifs for <front-port-minWH600> in it and passes through the @Input and @Output

But then you'd need to declare the different versions in the module.

Anyway, This is a solution you could use with out needing native script support built in, it would be a pain though.

[bhavincb]

any new updates to issue?

[fthuin]

As this feature is not yet implemented and it took me a while to figure out how to do it (creating new component for each size didn't look maintainable to me), here is a little explanation. The ternary condition on scss import doesn't work well with webpack for me (because it would mean lazy loaded scss...)

What you can do is:

Create a .scss file for any of the size you want to handle (name them as you want, but let's keep the 'Screen Size Qualifiers' names for this example), which can result for a home component e.g.

home.component.minW640.scss
home.component.minW1080.scss
home.component.minW1440.scss

In each of those files, you wrap all your classes in a specific class, e.g. page-640, page-1080, page-1440

You import all your files inside inside a single scss file, for this example I name it home.component.scss, its content will look like

@import '../../app-common.scss';
@import './home.component.minW640.scss';
@import './home.component.minW1080.scss';
@import './home.component.minW1440.scss';

Inside your component, you can reference home.component.scss as your styleUrls. And you can add programmatically a className on the component you want to change the behavior for each screen size (usually a Page, but in my case a ScrollView)

... html content
    <ScrollView #scrollView>
           ... html content
    </ScrollView>
... html content

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import * as platformModule from 'tns-core-modules/platform';

@Component({
    selector: 'Home',
    moduleId: module.id,
    templateUrl: './home.component.html',
    styleUrls: ['home.component.scss'],
})
export class HomeComponent implements OnInit {
    @ViewChild('scrollView') scrollView: ElementRef;

    constructor() {
        /************************************************************
         * Use the constructor to inject services.
         *************************************************************/
    }

    ngOnInit(): void {
        const className =
            platformModule.screen.mainScreen.widthPixels >= 1440
                ? 'page-1440'
                : platformModule.screen.mainScreen.widthPixels >= 1080
                  ? 'page-1080'
                  : 'page-640';
        const svElement = <ScrollView>this.scrollView.nativeElement;
        svElement.className = className;
    }
}

[vakrilov]

Hey @fthuin
Thanks for sharing that! It seems like a nice approach. I think the whole thing can even be extracted in a separate directive (similar to ngClass) that will perform the conditional class selection for you. This way you can easily reuse it in many components.

[trojanc]

This is a bit of a problem for me too... I really don't want to change to not using angular :-( and the other suggested "hacky" tricks aren't nice. I need a whole new template for screen sizes, not just minor style changes

[manojdcoder]

@trojanc You may try writing a directive that will inject / render right HTML template based on device width.

[lumayara]

Any updates on this issue? Thank you

[manojdcoder]

You may achieve this by creating a directive or simple ngIf.

[vakrilov]

Update: It looks like supporting screen size qualifiers nearly impossible especially now that we have Angular AOT and webpack.

There are a couple of solutions in this tread that you can use now.

Also the same results would be possible when support for CSS media queries is implemented, so you might follow this issue instead.

[krishna949]

How to support multiple screen sizes in my NativeScript(with angular) app?

[kokosky93]

any changes in the topic?

[acacha]

It seems qualifiers also don't work i Vue Flavour