I am trying to send a list of styles to the child components be passed through the Attribute Directives.
For Example:
<div [mystyles]>
<p>.....</p>
<div>...</div>
</div>
Through attribute directives I am able to modify the parent div 's css I am using.But want the [mystyles] to modify its child elements p and div .
You can use ngStyle directive in child component.
In your parent component you cam pass (via #input directive) the style you want to your child component, then the child component can use it inside your html.
Here a sample implementation.
Parent.ts
myStyles = {
'background-color': 'blue',
}
Parent.html
<child-component-selector [parentStyle] = myStyles>
Child.ts
#Input() parentStyle: any;
Child.html
<p [ngStyle]="parentStyle">
...
</p>
Here a little guide on how to use ngStyle
Edit:
You can compose in parent the myClasses variable that replace myStyles in this way:
myClasses = {
"class-name-1": {
"background-color": "blue"
},
"class-name-2": {
"background-color": "yellow"
},
"class-name-3": {
"background-color": "lime"
}
}
And then use the classes in child element in this way:
<p [ngStyle]="parentStyle.class-name-1">
...
</p>
<div [ngStyle]="parentStyle.class-name-2">
...
</div>
(parentStyle var have the name you specify after #Input() directive, as in the previous example)
As you can see only one input is needed for pass several classes, it only depends to the input variable you pass to the child.
Related
I have a component which is reusable. This component is called from parent component multiply times and sometimes the background page of the parent component is white and sometimes is black.
My child component generates form tags dynamycally - inputs,selects, textarea.
That means i can't have fixed styles in my css in my component for my content.
So when when the background page is white - i have one style for my inputs - for example black background. When the background page is black i have another style for my inputs - for example white bacgrkound.
To solve this is issue:
i tried
Adding input property in my child component ts file
#Input()
public cssTemplate;
in html
<div [ngClass]="{'form-group-white-bg': cssTemplate == 'white', 'form-group-dark-bg': cssTemplate == 'black'}">
<label for=""></label>
....
In the CHILD component i am sending value for input property depending on where the child component is called
if it is called on page with white background
<app-form-group cssTemplate="black" formControlName="address">
</app-form-group>
if it is called on black bacgrkound
<app-form-group cssTemplate="white" formControlName="address" [data]="{ field: 'address', label: 'Address' }">
</app-form-group>
but the problem here is that sometimes on my parent component this component is called multiply times
on one page can be called 12 times where i need 10 inputs and 2 selects
on other page can be called 15 times etc.
That means that i need to repat my self 15 times
<app-form-group cssTemplate="white" formControlName="address">
</app-form-group>
<app-form-group cssTemplate="white" formControlName="someItherControlName">
</app-form-group>
and everywhere to put cssTemplate="white".
ngFor is not an optin because this child component is called multiply times but not on same place in the HTML structure in the parent.
How can i solve this DRY?
you can add styles in your styles.css (the styles general for all the application). If e.g. you has
.white h1{
color:red;
}
.black h1{
color:green;
}
You can use [ngClass] in the "parent"
<div [ngClass]="toogle?'white':'black'">
<hello name="{{ name }}"></hello>
</div>
<button (click)="toogle=!toogle">toogle</button>
See [stackblitz][1]
NOTE: I used the way [ngClass]="expresion" (where expresion use conditional operator) better that [ngClass]="{'classname1':condition;'classname2':!condition}"
Update about your comment "how can i prevent repeating my self on child call", really I don't understand so much. I don't know if you want to make a directive like, e.g.
#Directive({
selector: 'hello', //<--the selector is the selector of the component
exportAs: 'helloDiv'
})
export class HelloDirective implements OnInit{
constructor(#Self() private component:HelloComponent,private dataService:DataService){
}
ngOnInit(){
console.log(this.component.name)
this.dataService.theme.subscribe(res=>{
this.component.theme=res;
})
}
}
This allow to "extends" the component -in the stackblitz the variable "theme" change-
[1]: https://stackblitz.com/edit/angular-ivy-sjwxyq?file=src%2Fapp%2Fapp.component.html
You can use an input property to create a css class map to pass on to ngClass. This object should be an object of string arrays.
It can be pretty much as complex and contain as many classes and rules as you need it too
#Input() color: 'white' | 'red' | 'hotpink' = 'white';
classMap: any;
ngOnInit() {
this.updateClassMap();
}
updateClassMap() {
this.classMap = {
[this.color]: !!this.color, // Add this class if not null
};
}
Then in the Html simply pass it to ngClass
<div [ngClass]="classMap">
Styling Child Components depending on Parent Component
There are two approaches I commonly take in this scenario
:ng-deep - create a style rule based on a class which is set in your parent component
utilize #ContentChildren() to set a property directly on your child components and call detectChanges() manually after the change.
To adopt the first solution you need to exercise greater care in your css naming rules, as using ng-deep obviously breaks the isolation of those style rules.
To adopt the second approach needs some considering due to it technically circumventing the standard input/output flow in Angular and thus can be a bit of a surprise "undocumented behavior" for any other maintainers of the application.
I'm a bit on the fence whether I prefer one approach over the other. The first approach seems more trivial to me, but it can also cause unintended style rule overwrites, while the second approach involves a lot more scripting and seems a bit of a hack.
Approach 1: ng-deep
Give your parent component an input and update a class on a block-element wrapping your <ng-content>.
create your desired style rules in your child component.
// parent component
#Component(...)
export class FooParent {
#Input() bgStyle: 'light' | 'dark' = 'light';
}
<!-- parent component template -->
<div class="parent" [ngClass]="{light: bgStyle == 'light', dark: bgStyle == 'dark'}">
<ng-content></ng-content>
</div>
// child.css
::ng-deep .light .child-container {
background-color: lightblue;
}
::ng-deep .dark .child-container {
background-color: royalblue;
}
My targeted element in the example is .child-container, you would write a similar style rule for each element you want to affect.
Approach 2: Using ContentChildren to pass along a value
Add a #ContentChildren() decorator to your parent component which selects for your child components.
inject a ChangeDetectorRef
implement ngAfterViewInit to loop through each child and set the value
call detectChanges() once done.
add the ngClass directive as normally in your child component.
Parent
#Component({
selector: 'parent',
templateUrl: 'parent.component.html',
styleUrls: ['parent.component.scss']
})
export class ParentComponent implements AfterViewInit, OnChanges {
#Input() bgStyle: 'light' | 'dark' = 'light';
#ContentChildren(ChildComponent) childComponents!: QueryList<ChildComponent>;
constructor(private change: ChangeDetectorRef) {
}
ngOnChanges(changes: SimpleChanges) {
if ('bgStyle' in changes) {
this.updateChildComponents();
}
}
updateChildComponents() {
this.childComponents.forEach(child => {
child.bgStyle = this.bgStyle;
});
this.change.detectChanges();
}
ngAfterViewInit() {
this.updateChildComponents();
}
}
<!-- parent.component.html -->
<ng-content></ng-content>
Child
#Component({
selector: 'child',
templateUrl: 'child.component.html',
styleUrls: ['child.component.scss']
})
export class ChildComponent implements OnInit {
bgStyle: 'light' | 'dark' = 'light';
constructor() {
}
ngOnInit(): void {
}
}
<!-- child.component.html -->
<div [ngClass]="{light: bgStyle == 'light', dark: bgStyle == 'dark'}" class="child-container"></div>
// child.component.css - you would apply styles as you needed obviously.
.child-container {
width: 40px;
height: 40px;
margin: .5rem;
}
.light.child-container {
background-color: lightblue;
}
.dark.child-container {
background-color: royalblue;
}
Usage
<!-- any other template -->
<parent>
<child></child>
<child></child>
<child></child>
</parent>
Note: If you are creating the ChildComponent directly in the ParentComponent's own template you need to use #ViewChildren instead of #ContentChildren
I have a component, that has different parts. However, I want to be able to style the individual components with different colors.
For instance:
<div class="OuterBox">
<div class="InnerBox1"></div>
<div class="Seperator"></div>
<div class="SecondBox">
<div class="TextInfo"></div>
</div>
</div>
I add this to a page, via a standard Angular component:
<app-my-component></app-my-component>
I have seen the ngStyle option for Angular which I could use to specify , but my problem is I cannot simply do a <app-my-component [styles]="{backgroundColor: 'blue', 'font-size': '16px'}">. I need to color the different div sections differently, for instance the InnerBox1 has a background of green, and the SecondBox background should be red.
I can do these styles on the individual CSS, but when I want to make this a common component, I want to be able to change the colors on each instance, so they can be different from green and red, and could be blue and orange or something else.
You can simply declare a variable for each color in your component and bind them from outside
In your component :
import { Component, Input } from '#angular/core';
#Component({
selector: 'app-my-component',
template: `<div class="OuterBox" [ngStyle]="{backgroundColor: outerBoxColor}">
<div class="InnerBox1"></div>
<div class="Seperator"></div>
<div class="SecondBox">
<div class="TextInfo"></div>
</div>
</div>`
})
export class MyComponent {
#Input() outerBoxColor;
}
and then pass the color from outside like this:
<app-my-component [outerBoxColor]="'blue'"></app-my-component>
<app-my-component [outerBoxColor]="'red'"></app-my-component>
Or if you want style more than just one css selector you can use DomSantizer and pass all css style to your Child component
In parent:
<child-component
div1Style='width: 400px;background-color:red;'
div2Style='width: 400px;background-color:red;'>
</child-component>
child component input variable:
#Input() div1Style: string;
#Input() div2Style: string;
in child in html div
<div [style]='GetStyle(div1Style)' >
<div [style]='GetStyle(div2Style)' >
and in code of child component
constructor(private sanitizer: DomSanitizer) { } //to inject instance of this DomSantizer
GetStyle(c) {
if (isNullOrUndefined(c)) { return c; }
return this.sanitizer.bypassSecurityTrustStyle(c);
}
and you can declare as many these variables as you need - one per each div for example
I've run into an awkward scenario while working on a lit-element component library.
The component I'm currently working on is an "alert". Within it's render template it has two named slots: "title" and "text".
<div class="alert-item-content">
<i class="alert-item-icon"></i>
<slot name="title"></slot>
<slot name="text"></slot>
</div>
The elements assigned to those slots will potentially be any valid text tag (h1, h2, h3, etc.). I need to target the slots' assigned element to A) remove/reset global styles that affect them and B) add specific styles that are fundamental to UI requirements.
So, in other words, a person might provide an 'h5' because it is semantically correct but, as an alert title, it should always appear the same.
Example:
<mult-alert>
<mult-alert-item>
<h5 slot="title">Notice Me</h5>
<p slot="text">
This is something you should probably
pay attention to
</p>
</mult-alert-item>
</mult-alert>
The only solution I could come up with so far is to query the assigned elements in shadowRoot and add a class to them. It does work but feels gross. This is the relevant code from the component for that:
addClassesToSlottedNodes() {
[{
slotName: 'title',
className: 'alert-item-title'
}, {
slotName: 'text',
className: 'alert-item-text'
}].forEach(n => {
const slotNodes = this.shadowRoot
.querySelector(`slot[name="${n.slotName}"]`)
.assignedNodes();
if (slotNodes && slotNodes.length) {
slotNodes[0].classList.add(n.className);
}
})
}
Is there a better way to target these slotted elements without adding classes this way? Or, is there a cleaner way to add the class in the component template?
Inside the Custom Element template for the Shadow DOM, you could use the ::slotted() CSS function to set the CSS style of the slotted elements:
<style>
slot[name=title]::slotted(*) {
font-size: 20pt ;
font-weight: bold ;
color: red ;
}
slot[name=text]::slotted(*) {
font-family: Arial ;
}
</style>
<div class="alert-item-content">
<i class="alert-item-icon"></i>
<slot name="title"></slot>
<slot name="text"></slot>
</div>
In VueJS, I have elements that have hover property in my object.
So, I want to put a foreach in style, but it is not possible.
I want to do that kind of thing :
<style>
#foreach (element in elements) {
if (element.has_backgroundhover) {
'#'+element.id:hover {
background : element.background_hover;
}
}
}
</style>
Notice that each element has a background color different (it is stored in his oibject property)
Thank you
The #mouseenter and #mouseleave event listeners would allow for css classes to be applied to each element.
For example, toggle a .hovered class that has the background color defined.
Something like this?
The HTML:
<div id="app">
<div
v-for="element of elements"
#mouseenter="element.hover=true"
#mouseleave="element.hover=false"
:style="{
background: element.hover? element.background_hover : element.background
}"
>{{element.name}}</div>
</div>
And the JS:
new Vue({
el: "#app",
data: {
elements:[
{
name:"element1",
background:"#f8f",
background_hover:"#a4a",
hover:false
},
{
name:"element2",
background:"#ff8",
background_hover:"#aa4",
hover:false
},
]
},
})
This is not using the CSS, rather using events as suggested by #DigitalDrifter. I think the point is that reactive css is not a good idea, and not supported in vue. Instead you need to have the HTML element properties dependent on your vue data object. A fiddle for this is: https://jsfiddle.net/edzaokum/
I am using the react-select component on my app. I am also only styling my app with JSS. My issue is that since react-select is an npm package, I don't have the capability to modify class names in the component. So there is an input in there that I need to target with my styles.
<div class="Select-input"><input type="text" name="style-me" /></div>
And my JSS is a little something like this:
jss.setup(preset());
const stylus = {
'Select-input': {
background: 'red'
}
}
const { classes } = jss.createStyleSheet(stylus).attach();
What do I need to do in JSS to style that child input tag?
According to this answer, you can pass in a class name for react-select. The rest of my answer shows how to target child elements.
I checked the github page for JSS here:
https://github.com/cssinjs/jss
They have a live example for nested CSS rules here:
https://github.com/cssinjs/examples/blob/gh-pages/plugins/jss-nested/simple/app.js
In the code to target a nested <button> element, it uses a property named & button. Notice the space between the ampersand and button. So for your specific code, you can target the <input> like this:
jss.setup(preset());
const stylus = {
'Select-input': {
background: 'red',
'& input': {
/* your input styles here */
}
}
}
const { classes } = jss.createStyleSheet(stylus).attach();
Assuming you're referring to this package:
https://github.com/JedWatson/react-select
You can in fact pass in className as a prop
You have always at least 2 ways:
Pass the generated class name
Use JSS as you should by default, avoid unscoped class names. Use generated class name and pass it to the component you want to use
const {classes} = jss.createStyleSheet({
input: {background: 'red'}
}).attach()
<Input className={classes.input} />
Use scoped global selector
If its impossible to pass a class name, you can still have a locally scoped global selector
const {classes} = jss.createStyleSheet({
container: {
'#global': {
input: {background: 'red'}
}
}
}).attach()
<div className={classes.container}>
<Input />
</div>