Switching between two styles for the same component

Question

I'm trying to include two style URLS in my angular app ,

I tried several other similar questions, but the answers are not working for me.I don't know how to fix.

What I want to achieve is to switch between two styles based on if condition

Why I want to do that : it's because the app should support two languages which requires RTL and LTR style files for the same component ,,

Is it possible to handle such an issue??

score 0 · Answer 1 · answered Jul 13 '18 at 08:38

0

specify some function for [class] in .html

<span [class]="getStyleClass()">ABCD</span>

and then add somelogic to your getStyleClass() in your .ts

getStyleClass() {
    return this.value > this.anotherValue?"classOne":"classTwo";
  }

answered Jul 13 '18 at 08:38

Woworks

1,410
16
21

thanks a lot ,, but this is for one element is it possible to change the whole style URL cause the whole style shall change based on a property value – Omar Abdelhady Jul 13 '18 at 08:45
Then you can try to add stylesheet dynamically like here: https://stackoverflow.com/questions/42496999/angular-2-how-do-i-conditionally-add-styles-to-my-component – Woworks Jul 13 '18 at 08:57
tried to add the style as it said this is what i got – Omar Abdelhady Jul 13 '18 at 09:07
Refused to apply style from 'http://localhost:4200/nav.component.scss' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. – Omar Abdelhady Jul 13 '18 at 09:07
this is what i added in the ts file addStyleSheet() { var headID = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.type = 'text/css'; link.rel = 'stylesheet'; link.id = 'widget_styles'; headID.appendChild(link); link.href = 'nav.component.scss'; } constructor() { } ngOnInit() { this.addStyleSheet() } – Omar Abdelhady Jul 13 '18 at 09:08

score 0 · Answer 2 · answered Jul 13 '18 at 10:10

There are 2 css files : src/assets/style1.css and src/assets/style2.css

Step - 1 : Add a link with an id inside head of index.html file

<html>
  <head>
    <link href="" id="mycss" rel="stylesheet">
  </head>
  <body>
    <my-app></my-app>
</body>
</html>

Step - 2 : Use following typescript and modify with your own desired logic

import { Component, Inject } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  files = ["assets/style1.css","assets/style2.css"]

  constructor(@Inject(DOCUMENT) private document) {}

  toggle() {

    var oldlink = this.document.getElementById("mycss");

    var newlink = this.document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", this.files[1]);

    this.document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
  }
}

Switching between two styles for the same component

2 Answers2