Styles not accessible

[eight-molecules]

I'm working with your date picker, and while it's a great component I noticed a major problem with attempting to style it: You can't. The provided classes are our only option, and that feels like an incomplete solution.

Perhaps we could attach a custom class which allows the parent component to assign styles? Another option would be allowing style settings to get passed in, but that seems clunky and inflexible for the complexity it would involve.

[shamgang]

Does the [class] attribute address your issue? See API section of readme.

[ghetolay]

We're working on a more customizable DatePickerComponent.

In the meantime, I posted a temporary solution here.

[eight-molecules]

@shamgang, I specifically mention how the [class] attribute doesn't meet my needs.

@ghetolay Thanks for the current solution. Any plans for #76 to end up containing these customization changes?

[shamgang]

@gelliott181 Missed that, sorry. Can you explain the issue a little more? Trying to clean up my own CSS as well. Right now I'm including CSS in index.html and styling the generated classes, which feels wrong.

[eight-molecules]

That is definitely wrong and is the exact same reason why I brought this up. Angular2 encapsulation makes it difficult to do this sort of styling easily, and since I'm using the Angular-CLI I can't seem to extend the class in a way that Angular likes, nor do relative paths look good at all (../../../../../node_modules/ng2-datepicker is the first bit of my template include). Calling my custom component causes a ViewContainerRef error right now so there's some work I need to clean up. The DatePickerCore proposal in #76 looks very promising in alleviating all of this excess though.

If I get my solution working I'll come back with my code and a quick guide.

[ghetolay]

@gelliott181 I'm working on a custom annotation @DatePicker so you would just have to do that on the new implementation :

@DatePicker({
   selector: 'my-datepicker',
   styles: ''
})
export class MyDatePickerComponent extends DatePickerComponent { }

But I'm having difficulties with aot compilation. If I fail the temporary solution will becomes the only available solution, except we will export template and component on the module for clean imports.

[eight-molecules]

AoT compilation is causing headaches in every single project I come across. I took a quick look but didn't see the annotation code pushed yet. If you put it up I'm happy to throw some time at figuring it out too.

[ghetolay]

@gelliott181 don't bother I just wasted half a day trying which I fell dumb about because I've read a lot about it and how we shouldn't because it cause trouble for aot. I just thought doing something really simple like just overriding styles property would do. But it's not possible without modifying @angular/compiler-cli.

What I learned is that your can't use decorators at all on aot, even those not related to angular 2. Only angular 2 decorators are permit. What is happening is that decorators seems to be handled exclusively by ngc and not tsc. ngc is built statically and if it encounter any decorators not previously registered here it will throw (you may notice static on the class name StaticReflector). So using custom decorators is not possible but what is we generated somehow the argument passed to @Component like :

@Component( dpConfig(...) )

This seems to work and I'm working this way. What's funny here is that dpConfig() must be imported if it's defined on the same file it won't work.

Anyway I'll finish that along with a build system to generate files for all bundlers then it would be really nice if you could test it, see if it's working as you expect it. I'll make a post at #76 once it's ready for test.

I won't commit my customs decorators because it only work with JIT but if you're interested I can create a gist.

[eight-molecules]

Ouch, that ngc hangup really kills the usefulness of decorators. I went through the PRs and issues over on the Angular git and saw no work towards AoT decorators from the core team so my first thought is "Let's bundle a module!", and that's pretty much the exact same spot you're at. I did find Issue 6643 though, so they're aware it's going to be a problem as the platform ages, but it's still a long way off.

I'll keep an eye on #76, and I'm also working on stripping down the current style sheet and template to separate the box model properties from the decorative styles by class. This should allow custom styling without risking breaking the box model or other non-decorative properties on accident. It also provides the opportunity to allow an @Input to accept an array of styles (CSS file processing would be nice, but that's a whole other ballgame) that can map to the color tags when the component is instantiated rather than selecting a specific style sheet. I consider this a half-step towards your configurable component.

[simonpeters]

has this issue been resolved yet?

[jyotidhiman0610]

I am unable to add custom style to the component, can anyone help me with it?