3

I want use of multi css in styleUrls

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [condition 'if' for Which load css]
})

i tired

Sai Manoj
  • 3,809
  • 1
  • 14
  • 35
Morteza Moradi
  • 47
  • 4
  • 1
    Try to look into https://stackoverflow.com/questions/42496999/angular-2-how-do-i-conditionally-add-styles-to-my-component this link – Aniket Avhad Sep 25 '18 at 05:25

2 Answers2

2

You can use a ternary operator inside:

const url1 = './foo.css';
const url2 = './bar.css';

let condition = true

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [condition ? url1 : url2]
})
mchl18
  • 2,119
  • 12
  • 20
0

You can write a ternary operator inline:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [condition ? 'someFile.css' : 'someOtherFile.css']
})
makmonty
  • 465
  • 3
  • 12
  • 1
    can the condition be a boolean @input field in the component? can I use a function of the component class instead of the array for styleUrls ? – beppe9000 Jan 19 '21 at 20:25
  • 1
    No, it can't, as that property is defined even before the class exists, and way before the component is instantiated. If you wan't to change the style based on the state of the component, I would apply differents classes based on the state. – makmonty Jan 20 '21 at 22:10
  • actually i'm going to play with component class inheritance & give the inheritor a simple decoration that only changes the selector (tough I wonder how the selector is matched if multiple components could satisfy it eg `x-button` vs`x-button.red`) and its own style url – beppe9000 Jan 30 '21 at 19:25