I'm stuck with following problem:
I recieve an dynamic HTML-Content-Snippet from an API with certain classes and ids applied.
Additionally there a dynamic and individual CSS-Stylesheet I can access through this API, too.
What i got so far:
encapsulation: ViewEncapsulation.None, is important, otherwise the classnames etc. would be changed/extended by Angular.
What I can't get to work is to apply the styles received from the API to the component.
The first idea was to put the style-promise-result directly here:
#Component({
selector: 'page-dynamic',
templateUrl: 'dynamic.html',
encapsulation: ViewEncapsulation.None,
style: mycssapi
})
or somehow inject it afterwards. Didn't get it working.
The second idea was to add <style type="text/css" [innerHTML]="mycss?.styles"> or this:
<style type="text/css">
{{mycss?.styles}}
</style>
Someone an idea how to solve this?
A sketch of the process: Get dynamic HTML-Code-Snippet and the CSS-Styles -> Inject it in a Component
Thank you in advance!
Markus
Related
I am trying to get a dynamic style-sheet change for a singlepage-application to work in Angular. The idea is to create different themes and let the users choose from them in a dedicated menu. There may be many themes, so nevermind that the example below only has two variants. The functionality is ready. As of now, I have collected all styles in single large scss-files, one for each theme. (Note that I am well aware that in Angular you often split the styles in many sub-scss files, for each component. But for this idea to work, I wanted to have it all in single files for each theme). I have the menu working, and use localstorage for the app to remember which theme has been chosen, since the site has to be reloaded for the changes to take effect.
Now for the problem:
In app.component.ts, the style sheet is defined, in standard form (i.e. styleUrls: [filename]). When using a static file path/name there, and when using a variable, defined just outside the #component-code, the styles works perfectly. But for the dynamic theme change, I have a simple fetch of the variable from localstorage:
var settingsString = localStorage.getItem('usergraphicsdata');
if (isDefined(settingsString)) {
let myUserSettings = JSON.parse(settingsString);
const themename = myUserSettings.theme;
It all works there too. Different console.logs confirms it understands everything it should. But then comes the problem.
if(themename == "theme1"){
var stylePath = "./app.component_theme1.scss";
var graphicFolder = '/assets/theme1/';
} else if(themename == "theme2"){
var stylePath = "./app.component_theme2.scss";
var graphicFolder = '/assets/theme2/';
}
}
Then comes the #component with its styleUrls: [stylePath]
For some reason the if-conditions are not regarded, and the result is always that the theme declared first (in the above case "theme1") will be active. So if I just change the order in the condition, and put the code for theme 2 first, that will be chosen for the site, disregarding which theme variable is actually fetched from localstorage
I have tried several other variants as well, but this one seems to be closest to a solution. Could it be an issue with Angular limiting style changes in runtime contra build? Or have I forgotten something basic in the if-condition?
Best regards and sorry for my limited english.
Per
why don't you solve it with routing? Duplicate the component for each theme, just with a different css-file but use for all those components the same html-file and put in the menu a link to that component (with a specific theme). The added value would be that the theme name also appears in the url and you can easily apply different logic without things getting to be convoluted (different typescript-files).
Something like this:
#Component({
selector: 'sunflower',
templateUrl: './detail.component.html',
styleUrls: ['./sunflower.component.scss']
})
export class SunflowerComponent {
#Component({
selector: 'roses',
templateUrl: './detail.component.html',
styleUrls: ['./roses.component.scss']
})
export class RosesComponent {
If you tried it, please share the problems you've encountered.
update
I made an extremely basic demo (that I've tested), you can find it here:
repo
Take care & good luck.
I recently started to work with React and I want to use an admin template. I am looking for a way to import the styles from theme to React components. I am using Keen Admin Theme
Theme includes all necessary html, js and sass files. Various tutorials suggest copying and pasting the html code inside the component but I am looking for a more practical way rather than copying and pasting because JSX requires additional changes on html, furthermore I think it is not a good practice.
So what I am looking for is similar to Angular's approach, so I can pass the html file directly to the component.
Angular's approach:
#Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
styleUrls: ['./component-overview.component.css']
})
If there is no such option what is the recommended way of using out-of-box themes in React?
The best way is to write it yourself to avoid copying pasting. Or find the components that are of React or Angular (as per your requirements)
I think everything is in the title.
I started a new ASP.NET Core 2 with Angular and Typescript project and I got an easy component that require some scripts to be executed. The component is a responsive YouTube video background, I found at : https://codepen.io/ccrch/pen/GgPLVW
Where should I add the scripts code you see with the codepen url?
If I add it to the HTML file associate with the component below, the scripts are removed by Angular. I cannot add it either in the _layout.cshtml page without, I think, broke the Angular architecture.
import { Component } from '#angular/core';
#Component({
selector: 'html5video',
templateUrl: './html5video.component.html',
styleUrls: ['./html5video.component.css'],
})
export class Html5VideoComponent {
}
Thank you very any guidance
So from Load external css style into Angular 2 Component it seems that including css from an external url by putting it into the styleUrls[] worked for angular 2. It does not work for Angular though (it just searches for the css sheet under the directory). I can't find any documentation regarding this so I'm just hard-coding it into the entire index.html page for now. How can I get it to work for individual components?
Edit: To clarify, by external css I mean something like this: https://www.w3schools.com/w3css/4/w3.css, not something included in my project.
I know it is a bit late answer, but if somebody looks for solution:
You can use command line if you use nodeJS in your app folder write:
npm install --save w3-css
You should adjust then angular-cli.json in your src folder of your app and where you register styles type following:
"styles": [
"../node_modules/w3-css/w3.css",
"styles.css"
],
For including an external css (remote url)for an specific component. I've only found this way. For example for your app component.
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
in your app.component.scss you can import a remote url with the desired remote styles like this css file your were commenting.
#import url('https://www.w3schools.com/w3css/4/w3.css');
Even thought it is not a perfect solution, hope it helps.
I have the following in my component:
#Component({
selector: 'Leaders',
template: require('./Leaders.component.html'),
styleUrls: ['./bootstrap.component.css']
})
The component was loading fine before I added this style sheet to it. When I attmept to run my web application it says that it, "Can't read the URL" of where my css file is. This css file is in the same folder as my Leader html page is yet it cant find the file. What am I doing wrong and how can I fix it?
you are using an older version of Angular2. For the newer versions the syntax that is used is:
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
notice there is no require() that shouldn't be there.
I cannot comment I will write this as an answer.
is there a specific reason for using require(...) in template.
if not, try this and make sure your css file name is spelled correctly:
#Component({
selector: 'Leaders',
templateUrl: './Leaders.component.html',
styleUrls: ['./bootstrap.component.css']
})
hope this helps!