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.
Related
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 have a component page and corresponding style sheet, however the classes in the component.scss dosen't apply to the page. There are no errors, I am still wondering why?
This is my product-detailpage.component.html
<div>
<h1>Product Detail Page</h1>
</div>
This is the .ts file
import { Component, OnInit } from '#angular/core';
import {ActivatedRoute} from '#angular/router';
import {ProductdetailService} from '../productdetail.service';
#Component({
selector: 'app-product-detailpage',
templateUrl: './product-detailpage.component.html',
styleUrls: ['./product-detailpage.component.scss']
})
export class ProductDetailpageComponent implements OnInit {
constructor(private route: ActivatedRoute, private productData: ProductdetailService) {
this.route.params.subscribe(params => console.log(params));
}
ngOnInit() {
}
}
This is the .scss file
body{color:Red !important}
app-product-detailpage{
h1{color:red !important}
}
However one thing I noticed was if I make changes to the global styles.css it works fine. just to check I changed the body color to green and it works.
My angular app is configured to work with scss. what could be the reason? can some one suggest?
Your SCSS won't work for your HTML file product-detailpage.component.html.
The reason is Angular uses shadow DOM for components. That means the tags <body> and <app-product-detailpage> are nowhere to be found in your component.
As per the documentation, The style specified in the component can only be applied to its template, which excludes the component.
This is the reason why your styles are not working on the component from component's style.scss but are working fine from global style sheet.
One way of doing it is to use :host pseudo selector as per this documentation which allows to add styles on the container in which component is placed.
The documentation says -
The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template.
Because default css encapsulation in Angular is Emulated(ViewEncapsulation.Emulated) so Angular will render out like below:
input[_ngcontent-c0] {
border-radius: 5px;
}
So if you want set style to the currently component, you can use Native option.
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation : ViewEncapsulation.Native
})
It will render like as:
input {
border-radius: 5px;
}
But finally I suggest you use global scss file to define style of <web component>.
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 am trying to load css styles in a component based on the URL parameters. Basically the user will load the page like SOME_URL/{screenSize}/{type}. This shall always load the same component, but with different CSS styling. I am already using a router and have the parameters set - how can I dynamically load the CSS files? Is that possible at all?
Here is some code - basically the goal is not to load the static CSS file defined in the example, but to load something like screen.component.21-5.a.css
#Component({
selector: 'app-screen',
templateUrl: './screen.component.html',
styleUrls: ['./screen.component.css']
})
export class ScreenComponent implements OnInit {
public screenType = 'a';
public screenSize = '21-5';
ngOnInit() {}
constructor(private mediaService: MediaService, private route: ActivatedRoute) {
this.parameterSubscription = route.params.subscribe((params) => {
if (params.size) {
this.screenSize = params.size;
}
if (params.type) {
this.screenType = params.type;
}
});
}
...
}
You cannot do that, as Angular requires the style declarations to be statically analyzable. This is done for the AOT compilation. All of your templates and styles are getting compiled to JavaScript when you run ng build --prod, and the styles are imported ahead of time. So, if you could reload styles using some conditionals, that code would no longer be statically analyzable (the screenSize variable can be known only during runtime, so which style should we import when building ahead of time?), thus resulting in the impossibility of AOT compilation.
(no, there is no way of compiling both styles and then importing them in runtime - that would mean we could understand what output will the function produce, which is virtually impossible - see halting problem)
But you can (and should) use ngClass to toggle between css classes depending on the screen size.
You can use ngClass
in your html
<div class="gradient " [ngClass]="{'class-21-5': screenSize ==='21-5', 'class-a': screenType==='a'}">
...
</div>
You can put the different classes in different files and import it on the component if you want.
#Component({
selector: 'app-screen',
templateUrl: './screen.component.html',
styleUrls: ['./screen.component.css', './my-other-style.css']
})
I have an angular2 component:
#Component({
providers: [
FlowsheetService,
SubscriptionService
],
moduleId: module.id,
selector: 'flowsheet',
templateUrl: './flowsheet.component.html',
styleUrls: ['./lastRow.css']
})
lastRow.css in the same directory as the component file contains:
.yellow {
background-color: yellow;
}
in my third party control there is an API that needs a css class name as return value.
that function is as follows:
function className() {
return 'yellow';
}
I don't see anywhere showing up in yellow in my 3rd party control.
Am I coding this correctly in general?
This syntax:
styleUrls: ['./lastRow.css']
Defines a style only for the template associated with this component. Is the function you defined within the component? If not, the style cannot be defined in this manner. You need to define the style for the app instead.
The Angular documentation here: https://angular.io/docs/ts/latest/guide/component-styles.html goes through how to define styles for the application instead.