Doing this(below) will select only navbar.css.
What if I want to use multiple css files?
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
you can link multiple CSS classes to a component. As StyleUrls is an array we can write multiple entries as a comma-separated
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css','./navbar2.component.css']
})
Code:
styleUrls: ['./navbar.component.css', 'every css url you want']
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 got 2 Angular components with 2 different StyleUrls for 2 different css files.
ex.
First Component:
#Component({
selector: 'my-app',
encapsulation: ViewEncapsulation.None,
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
Second Component:
#Component({
selector: 'my-main',
encapsulation: ViewEncapsulation.None,
templateUrl: './main.component.html',
styleUrls: [ './main.component.css' ]
})
If i run my app, the component which I select for second use the ccs of the component which i selected for first.
I need to import ignite-ui styles only for one component.
Component:
#Component({
selector: 'app-detailed-report',
templateUrl: './detailed-report.component.html',
styleUrls: ['./detailed-report.component.css'],
encapsulation: ViewEncapsulation.ShadowDom
})
Css:
#import "../../../../../../../../node_modules/igniteui-angular/styles/igniteui-angular.css";
or
#import "~igniteui-angular/styles/igniteui-angular.css";
This does not work. However, if I change encapsulation: ViewEncapsulation.ShadowDom to encapsulation: ViewEncapsulation.None the styles are applied. However, if I go to other components, these styles are applied to them also. I need to apply styles only for one component
#Component({
selector: 'app-detailed-report',
templateUrl: './detailed-report.component.html',
styleUrls: [
'./detailed-report.component.css',
'../../../../../../../../node_modules/igniteui-angular/styles/igniteui-angular.css' // make sure it's the right path
],
encapsulation: ViewEncapsulation.ShadowDom
})
or switch to scss and import it in the styles file
#import "~igniteui-angular/styles/igniteui-angular.css";
css don't have import statements
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 ?
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