I have a component that uses the <ng-content> selector to pull in some content children.
<!-- label-expand component-->
<div>
<ng-content select="[appLabel]"></ng-content>
</div>
So when a component creates an instance of this label-expand component like this:
<label-expand>
<span appLabel>Some label</span>
</label-expand>
I would like to set up the label-expand component, when hovered on to play an animation of the content child with the appLabel directive where the text gets bigger.
#Component({
selector: 'label-expand',
//...,
animations: [trigger('expandLabelState', [
//This is the animation I would like to pass to the content child
])]
})
export class LabelExpandComponent {
#ContentChild(AppLabelDirective) appLabel: AppLabelDirective
}
How do I pass an animation defined with the angular animation metadata in the label-expand component to it's ng-content content child? Or is this a problem that should instead be solved with CSS?
Related
I want to use simple components in different way and different ui rendering
For example a dropdown rendering a list may have several ui according to the page or context (=> padding, margins, font size and other css properties might change)
should I:
implement it by overwriting in the parent component (target css properties of the child component and apply them my css needs - at cost that if change happens in the child component like change in classname or what might break the parent design)
Pass flags to the component to handle those design and at cost that each component handle the design of each parent
There are different approaches to this and everybody has his own preferences.
I usually solve this by supporting the className property. The class is accepted as a prop and applied to the root. So it is easy to change things like outer margins or the background-color. I usually discourage modifications of deeply nested elements.
Example:
import classnames from 'clsx';
import style from './button.module.scss';
export const Button = ({ content, onClick, className }) => {
return (
<div
className={classnames(style.buttonRoot, className)}
onClick={onClick}>
{content}
</div>
);
};
and if I want to modify it anywhere I can do it thus:
import { Button } from './Button';
import style from './productView.module.scss';
// ...
<Button content={'Show products'} className={style.showProdButton} onClick={showProd} />
and
.show-prod-button {
background-color: #562873;
margin-left: 32px;
}
See code here
I am importing a <button> component that has two span children. These span children are setting a gradient color that I want to override, but I only have access to the parent <button>. Is there a way for me to remove the styling on the children? I am using Tailwind.
Code:
<button className='from-orange-500 to-fuchsia-600'> // I want my button to be this gradient
<span className='from-violet-400 dark:from-violet-400 to-violet-600 dark:to-violet-600'></span> // I want to delete these styles
<span className='from-violet-600 dark:from-violet-600 to-violet-400 dark:to-violet-400'></span> // And these styles
</button>
And the component is being called as follows, which is why I can't target the spans:
<SubmitButton className="bg-gradient-to-l from-orange-500 to-fuchsia-600/>
I'm trying to make angular components for reusable bootstrap-cards as below
<app-card class="someClass" style="width: 20rem"=>
<p>some content here for the ng-content</p>
</app-card>
Is there anyway I can add CSS classes and styles directly on the component tag for further customization?
If you want one user to provide a custom css class to customise the component then you can expose one property to get the className provided by the user. For this you can use #Input() decorator.
Let's say a user has this class at his/her component:
.customClass{
/* some style props */
}
and applied to the component as :
<app-card class="customClass"></app-card>
In the component you can add a #Input property:
#Input() cssClass = class;
In your template do this:
<div [class]="cssClass">
<!-- children tags -->
</div>
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
Imagine that I have such html code:
<header>
<div class="header__logo logo">
<img class="logo__img" ...>
<span class="logo__status"...>
</div>
</header>
Here
.logo - is class that has styles, special for logo component.
.header-logo - has styles positioning logo inside the header.
So in react inside header component I would like to have something like:
<header>
<Logo className="header__logo" />
<header/>
But I can't since react is not automaticly handle className property.
Here I see this options:
Create a div wrapper to the Logo component and add this class to wrapper. As for me it is not an elegant way because it produce a lot of unnecessary divs.
Add logic to the Logo component, that will handle className property and append all outer classes to the root div inside the component. This is also ugly, because I have to add this boilerplate logic each time I want to layout a component inside some other component.
What is the react approach for solving such problems?
Yes, you cannot provide className attribute to a react Component. If you want to provide custom class to the same component, you can provide the className as a prop to the component which is added as a className in the child component.
I believe u need to do something like this.
var Header = React.createClass({
render: function() {
return (
<header>
<Logo customClass="header__logo logo"/>
</header>
);
}
});
var Logo = React.createClass({
render: function() {
return (
<div className={this.props.customClass}>
<img className="logo__img" />
<span className="logo__status" ></span>
</div>
);
}
});
Let me know if this is what you wanted to know or something else.