Styling Angular Components

[JWiseCoder]

There is no documentation for how to implement css properties with angular components. Custom components cannot (it seems) be styled with external css.

If I have a component MyComponent that exists in page mypage.html, I would expect to be able to type something like this in mypage.scss:

MyComponent {
background-color: green;
}

and expect to be able to hook up some property of MyComponent to receive that styling information and do something with it. But as far as I can tell, there is none. If there is a way to hook up CssProperty objects, there is no documentation (that I have found) for this in Angular.

[tsonevn]

Hi @JWiseCoder,
In your case, I would suggest creating a separate CSS file for your custom component, where you can define the needed styling for the inner components. For example:

@Component({
    selector: "ns-component",
    moduleId: module.id,
    templateUrl: "./mycustom.component.html",
    styleUrls:["./mycustom.component.css"]
})

Setting up the styling to your component in the way shown above, will not apply the specified css properties to the elements defined inside.

[JWiseCoder]

That's exactly what I'm trying to avoid. I know that works, but it isn't what I want to do with my components. That method works very well for components that have a static style, but they can only be used in one place. To use the same component with a different style would require subclassing that component or building a new one entirely.

My goal is to create components that act like the ones provided in the NativeScript framework—that can be styled by css like I described above. I know I can do this by building them from the native APIs and using things like CSSProperty to get the desired result (and though I can get that to work fairly well, I should like to see more documentation/examples about that also). The drawback of that is having to create two implementations of the same thing. I would rather build them as composites, using existing NativeScript components to make new ones—especially if they are simple, like a textfield with an image.

[crowmagnumb]

Can this please be revisited? This is really hurting me too as I transition my angular web codebase to a shared web/nativescript codebase. I really need to be able to style the custom components from outside the component just as one can do with angular web. Not sure what the resistance here is? The weird thing is that you get a ProxyViewContainer that has all the styling properties you could want but they don't do anything!

[JWiseCoder]

It's not ideal, but one way I've found is to use registerElement to assign a Layout to wrap your component. I try to do this as little as possible, but when I do, I just put it at the top of my component file.

registerElement('MyComponent', () => require('./path/to/my-component').MyComponent);

You may also have to set encapsulation: ViewEncapsulation.None on your components (in the params of the @Component decorator). Altogether, this may allow you to set the css from outside the component.

That said, it would be really great to be able for it to just work. I suspect there are some underlying mechanics that prevent it.

[crowmagnumb]

Well I tried to implemented your work-around but I can't seem to get it to work. If you have any time, care to fork my playground and show me how you would apply your fix to that problem. It's very simple, there is a flex-layout that tries to mimic the fxLayoutGap that angular's flex-layout does and I have a custom-component that shows that the margin setting works for native elements but not for custom components. :)

[crowmagnumb]

@JWiseCoder I finally figured out how to make your work-around work for me and have updated the playground with it. Obviously would like this to work in a more official manner, but for now I'll see if I can update my source-code using this where necessary and see if it works. Cheers.

[darkyelox]

For someone searching about you can use the decorator @CSSType(componentName) in your Angular, also you need to extend to ContentView and use registerElement, so it looks like:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ContentView, CSSType } from 'tns-core-modules/ui/content-view';
import { registerElement } from 'nativescript-angular/element-registry';

const componentName = 'RadioOption'

@CSSType(componentName)
@Component({
  moduleId: module.id,
  selector: componentName,
  templateUrl: './radio-option.component.html',
  styleUrls: ['./radio-option.component.scss']
})
export class RadioOptionComponent extends ContentView implements OnInit {
  
  @Input() public template: any
  @Input() public templateContext: any
  @Input() public data: any

  private _checked: boolean = false
  get checked(): boolean {
    return this._checked
  }

  @Input()
  set checked(checked: boolean) {
    this._checked = checked
    this.checkedChange.emit(this._checked)
  }

  @Output() public checkedChange: EventEmitter<boolean> = new EventEmitter()

  constructor() { 
    super()
  }

  ngOnInit() {
  }

  onChecked(event) {
    this.checked = true
  }
}

registerElement(componentName, () => require('./radio-option.component').RadioOptionComponent)

With this you now can style your reusable component using plain css classes, ids, and tag name (RadioOption), even you can use any NS property (width, height, row, flexGrow, etc) i think this must be on documentation, i discover this by casualty.

For use CSSProperty you need register it as usual and use a elementRef bind to get the style of the element and apply it, so you can:

declare module "tns-core-modules/ui/styling/style" {
  interface Style {
      onColor: string;
      offColor: string;
  }
}

const onColorProperty = new CssProperty<Style, string>({
  name: 'onColor',
  cssName: 'on-color'
});

const offColorProperty = new CssProperty<Style, string>({
  name: 'offColor',
  cssName: 'off-color'
});

onColorProperty.register(Style)
offColorProperty.register(Style)

then in the RadioOption component use as:

constructor(
  private readonly elementRef: ElementRef<ContentView>,
) {
  super()
}

ngAfterViewInit() {
  setTimeout(() => {
    this.onColor = this.elementRef.nativeElement.style.onColor
    this.offColor = this.elementRef.nativeElement.style.offColor
  })
}

Finally you can style your custom component as you wish using any CSS styling technique:

RadioOption {
  width: 100;
  height: 50;
 on-color: blue;
 off-color: gray;
}