Dynamic Styleurls in Angular 2

dynamic styleUrls in angular 7

I'll leave this here for others:

@Component({
    selector: 'app-some-thing',
    templateUrl: './some-thing.component.html',
    styleUrls: [
        require('./some-thing.component.scss').default,
        require(`./some-thing.component.${dynamic}.scss).default`
    ]

Notice, the '.default' added to the require. I had issues until I added default... lack of sleep i guess.

Angular2 Dynamically add styles to styleUrls array

My problem was ViewEncapsulation.

Once I set encapsulation: ViewEncapsulation.None on the parent component, then its CSS file was visible to all other components, including my child component. So I had no need to manually include the CSS file in my child component's styleUrls array, the browser found it amyway.

Of course, the best solution would be to put all "global" styles in the style.css file in the app root.

Create component with dynamic styleUrls in angular 9

If you are solely looking to dynamically change colors, font sizes etc.. you should reconsider making use of global theming.

Whereas if there are major layout differences you have several options:

1. Create a base component class
   
   
   • contains all the logic
   • Derive your other components from this component with different
     styling files.

Benifit of the solution above is that you can also use appropriate naming for the
child components which would make the code/directive more readable.
Instead of using numbers 1,2,3 you would have darkListComponent, lightListComponent etc..

2. Make use of ngClass:

   • <div [ngClass]="'my-component-style-' + number"></div>
   • You can still seperate your styling sheets by passing them to your styleUrls in your
     component.ts file. (styleUrls: ['theme1.scss','theme2.scss'])
   • Or you can declare all classes in one file for max styling reusability.

   my-component-style-1,my-component-style-2 {
...same styling
},
my-component-style-2 {
color: orange;
}

Option 2 is closer to yours and you'd only have to update your template and styling sheet
for it to work.

Angular set component styleUrls dynamically

I'm not an expert but I don't think that what you're asking to do is possible given the way Angular works.

I believe the CSS pointed to by styleUrls, or the literal CSS provided in styles, is passed to the template compiler (called Ivy, in modern Angular) along with the component HTML. This makes a "component factory" which is used to make component instances at runtime. The factory can be compiled at build time (Ahead of Time / AOT) or dynamically on the client, but even in the latter case I think it is compiled when the owning module is initially loaded -- if it's possible to compile a new factory on the fly, I haven't seen any way to do it.

What I would suggest is making a separate module for each (type of) client, then looking up which module to use for that client and lazy-loading it with the Router. Alternately, maybe you can factor out the common parts of the various stylesheets into one static sheet, and make the rest of the style dynamic using ngClass conditionals.

Dynamic app style depending on URL parameter with Angular

I went back to work on this and figured out how to do what I needed. It was simpler than I imagined. All I had to do was create a function like this:

loadCSS() {
    let fileRef;
    fileRef = document.createElement('link');
    fileRef.setAttribute('rel', 'stylesheet');
    fileRef.setAttribute('type', 'text/css');
    fileRef.setAttribute('href', '../../assets/dynamicStyles/appointment2.component.css');
    if (typeof fileRef !== 'undefined') {
        document.getElementsByTagName('head')[0].appendChild(fileRef);
    }
}

This function injects a new CSS Style into the page, that way I can replace the entire style on the page.

NOTE 1 The file MUST be inside /assets.

NOTE 2 The file MUST be .css, cannot be .scss.

NOTE 3 No need to add the file path in "styles" inside angular.json, nor in @Component inside my app.component.ts.

Angular 2 dynamic style binding

Following is not the correct way to get reference to the child component

export class ParentComp{
  myComp = new GenericComponentComponent();
}

You need to use @ViewChild to get hold of the reference to the child component:
In your Parent template:

<generic-component #child>
</generic-component>

Further more you don't need to pass the class and the style as an input. Since you can get reference to the child's properties using @ViewChild

In you parent component:

@Component({
  template: `
    <generic-component #child>
    </generic-component>
   `
})
export class ParentComp{

    @ViewChild('child') myComp;

    onColorChange(){
      this.myComp.divClass = "mySecondClass";
      this.myComp.backCol = "#A22B11";
    }
}

EDIT : Updated plunkr with @ViewChildren example.
Example:
https://plnkr.co/edit/a0zddtEe0Q3No4mfaKQZ?p=preview

---

Related Topics