Applying styles in NS Angular

[abhayastudios]

Hi!

Not sure if the creator of #22 is experiencing the same thing (there are too little details), but I am having some issues with applying the styles in Angular as well.

For example, in such a scenario (regular non-modal component) as below, the styles are applied only when using /deep/, whereas when using :host the styles get applied only to the first element of the ListView whereas the other items don't get the styles defined with the phone or tablet class. Since the Angular docs say that using /deep/ has been depreciated, I would prefer to avoid that use.

<ListView [items]="people$ | async" (itemTap)="onItemTap($event)">
      <ng-template let-item="item">
        <StackLayout class="card">
          <PeopleCard [profile]="item.profile"></PeopleCard>
        </StackLayout>
      </ng-template>
</ListView>

This works:

/deep/ .phone .card { width:300;  height:300; }
/deep/ .tablet .card { width:600;  height:600; }

This does not work:

.phone :host .card { width:300;  height:300; }
.tablet :host .card { width:600;  height:600; }

What am I missing? Thanks!

[MaxiSonntag]

Hey, #22 creator here!

In my case both solutions work as expected. Styles in regular components are applied perfectly, however in app.component they don't work at all, regardless if using /deep/ or ::host.

In your case it might be helpful to give some information about NS & Angular versions you're using. Doesn't mean I can really help, but maybe someone else.