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.
Related
I selected the scss option on a new Ionic Angular app. It's html container holds three tab pages. The scss stylesheet in the container component controls the styles for all pages. The global.sccs only contains imports, no styling and doesn't import the container's scss.. The container component implements OnInit.The stylesheets in the 3 tab page components are created empty.
I cannot change the style of any of the 3 tab pages by adding styles to their stylesheets. It continues to use the container's stylesheet. The selector for the style is in the container's html:
explore-container.component.html
<div id="container">
<strong>{{ name }}</strong>
...
</div>
The explore-container.component.ts file:
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-explore-container',
templateUrl: './explore-container.component.html',
styleUrls: ['./explore-container.component.scss'],
})
export class ExploreContainerComponent implements OnInit {
#Input() name: string;
constructor() { }
ngOnInit() {}
}
The tab page html uses the selector for the container component:
tab1.page.html
...
<app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>
The tab1.page.ts file:
import { Component } from '#angular/core';
#Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
constructor() {}
}
I have reviewed the docs about external stylesheets and encapsulation but I'm still lost. Why can't I just add a style to the scss in the tab page's own presently empty scss file? Eg., why doesn't inserting styles into the page component's scss:
tab1.page.scss
#container strong {
font-size: 40px;
}
override this in the explore-container.component.scss?
#container strong {
font-size: 20px;
}
Am I missing an import somewhere? If so, where?
I need advice.
I need to be able to select two elements.
The second element can be selected by pressing "shift".
How do I take to change the background-colour when I click on an element and remodify when I click on another element?
With an image it might be more meaningful:
You can use a condition like this in your html
[style.background-color]="a.xx? 'purple': 'turquoise'"
or in your component like:
#Component({
selector: 'hello',
template: `
<a-item *ngFor="let a of catalogue"
[a]="a"
[style.background-color]="a.xx ? 'green': 'red'">
</a-item> ` })
You can define a class and change the class when somebody click on other box. It is to say, class ".previous_selected" and "now_selected" and onclick on a new element change the class the new element will have now_selected and the previous element the other class
Other option:
Example:
import { Component } from '#angular/core'
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
colorA = 'red'
colorB = 'blue'
}
In the HTML
<div [style.color]="isSelected ? colorA : colorB">Some example text</div>
isSelected can be a function that say true o false.
You can find more information here
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