Hi I am new to angular,
If I want to change stylesheet for document in pure js I just simply do that by setting new href attribute:
document.getElementById("linkmarkerId").setAttribute("href", "./newstylesheeturl.css");
and I was wondering how can I do same thing in angular, so I can change the stylesheet url after e.g button click, so I tried:
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [this.stylesheetUrl]
})
export class AppComponent {
stylesheetUrl: String = './app.component.css';
...
}
but I noticed I can't access AppComponent class from #Component settings, so is whats the properway to set variable value for styleUrls ?
Related
For some reason the CSS file for one of my component is not being encapsulated property. The component is using the default ViewEncapsulation.Emulated and is in fact parsed with Angular encapsulation.
But for some reason the non-parsed rules also seem to apply, and from the moment the file is loaded for the component its rules now apply to the entire page.
Here you can see the encapsulated selectors and the base ones, both coming from the same file and line.
None of my other components seems to be having this issue, and I have no idea what could produce this.
Excerpts for more context:
#Component({
selector: 'app-shot-group',
templateUrl: './shot-group.component.html',
styleUrls: ['./shot-group.component.css']
})
export class ShotGroupComponent implements OnInit {
shots: Shot[];
setup: Setup;
name: string;
Here the component the shot-group.component.css bleeds into (that I can see, but I believe it bleeds everywhere):
#Component({
selector: 'app-property-table',
templateUrl: './property-table.component.html',
styleUrls: ['./property-table.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PropertyTableComponent implements OnInit {
#Input() element?: LabElement;
These two don't ever appear at the same time on the page. The CSS fails once the shot-group component is created for the first time.
Is there any way to get compiled CSS (As a string) of angular2+ component?
#Component({
selector: 'test-graph',
templateUrl: './test-graph.component.html',
styleUrls: ['./test-graph.component.scss']
})
export class TestGraphComponent implements OnInit {
}
Is am looking for some method/Utility to get css defined in "test-graph.component.scss".
command line: sass source/stylesheets/index.scss build/stylesheets/index.css
More about sass here
I'm using clr-dg-placeholder to set a placeholder in a Clarity Datagrid, but I want to change the background image or icon.
Is it possible without css?
You will have to turn off view encapsulation for the component that has a datagrid in it and also needs the override.
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {}
Then you can target the .datagrid-placeholder-image element directly and override the background-image property
.datagrid-host .datagrid .datagrid-table .datagrid-placeholder-container .datagrid-placeholder-image{
background-image: url('data:image/svg+xml;utf8,<svg height="100px" width="100px">YOUR SVG CODE HERE</svg>');
}
Here is a running stackblitz with an override.
I have an angular 4 application where I have the global styles and scripts in angular-cli.json. Then I worked separately on the Landing page. After I turn the landing page into an angular component, I add all its styles in angular-cli.json as well. And now my landing page's bootstrap conflicts with global bootstrap in node_modules and my application breaks.
Currently angular-cli.json looks like this:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"./dist/css/landing/bootstrap.min.css",
"./dist/css/landing/font-awesome.min.css",
"styles.css",
"./dist/css/AdminLTE.min.css",
"./dist/css/skins/_all-skins.min.css",
"../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
"../node_modules/froala-editor/css/froala_style.min.css"
],
This is in landing.component.ts:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-landing',
templateUrl: './landing.component.html',
styleUrls: ['./landing.component.css']
})
export class LandingComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
I am almost missing my deadline, I can not resolve the conflicts between two huge css files. I was wondering if I could keep my Landing Page styles separated from application styles. Any help will be largely appreciated. Thank you.
You could try encapsulate your landing page as follows.
ViewEncapsulation.Native will wrap your component and its styles within a shadow root. Change your component style file to scss and import those styles in component style file and delete them from .angular-cli.json.
#Component({
selector: 'app-landing',
templateUrl: './landing.component.html',
styleUrls: ['./landing.component.scss'],
encapsulation: ViewEncapsulation.Native
})
export class LandingComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
landing.component.scss
#import '<path-to-dist>/dist/css/landing/bootstrap.min.css';
#import '<path-to-dist>/dist/css/landing/font-awesome.min.css';
When you inspect DOM, you'll see app-landing as encapsulated.
Edit
Alternatively, you can use ViewEncapsulation.Emulated which is default (you do not have to set it within metadata). What this will do is to create custom attributes with all the styles and add those attributes to your markup as well. Shadow DOM may not be supported in some browsers. Try both and if Emulated works for you, use that.
I'm wondering if is possible to pass a variable to a css class into an external css file in angular 2, like from:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
bgc: string = 'orange'
}
then on the "app.component.css" I would like to pass like
.mydiv{ background: {{bgc}}; }
Is this possible?
I don't think this would be possible.
If you need a style to change programmatically, I would suggest looking into ngStyle at the link below:
https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html