I'm trying to append an active state in a React JS component when it is clicked.
Lets say I have a function
onMenuClick(e)
And my css class is called
.hamburger
I want to check the condition:
onMenuClick(e) {
if (this.state.menuOpen){
//append 'is-active' to the hamburger class
}
}
What is the most React-friendly/correct way to do this?
Use classnames as the official docs suggest.
Related
I want to change CSS of element <div class="myClass1">"I am content"</div> in react. Basically, I just want to add "display: none;" Problem is that that element is created by one library on click so I cant really set style or class to state or variable or something. In jQuery there is a lot of ways but how to do this in react?
Here is my handler
// Handling change
const handleChange = () => {
// Here should be code to change css of myClass1
};
You can use conditional class name for that. In your handleChange set a boolean state and in your className use this state to change className. Then in this new className you can apply display: none .
<div class={`${clicked ? "myClass1" : "myClass2"}`}>"I am content"</div>
In this case clicked would be your state that you can change with handleChange function
I have a button, when clicked I would like the body to get the class "open-menu". With jQuery it was very easy, all I had to do what was add this line of code
$('.burger').click(function() { $('body').toggleClass('menu-open'); }); };
But I don't understand how I can achieve that in Angular with typescript! All the info I can find online pertains to toggling a class on the same element!
Just add a boolean property to your Component Class:
menuOpened: boolean = false;
Once the button is clicked, you need to do two things:
Toggle the menuOpened:
<button (click)="menuOpened = !menuOpened">Click to Toggle Menu</button>
Add the class conditionally:
<div [class.menu-open]="menuOpened"></div>
Here's a Working Sample StackBlitz for your ref.
goes without angular simply: document.body.classList.add('menu-open');
to remove: document.body.classList.remove('menu-open')
I am trying to apply styling to a child of a custom component.
Selector:
<custom-component-example></custom-component-example>
Inside custom-component-example.html:
<button>
<ng-content></ng-content>
</button>
If I were to use style like this:
<custom-component-example style="color: green">some text</custom-component-example>
Or like this:
<custom-component-example [ngStyle]="{'color': green}">some text</custom-component-example>
The button text will not get green. The styling could be anything (for example font-weight or size or anything really).
I have also tried the solution to this topic:
Best way to pass styling to a component
But that also does not apply to the child element (button in the example above).
How do I pass any given styling and apply it to the child element, in the case of the example, how would I pass styling (through the custom-component-example selector) and apply it to the button and the button's text?
Thanks in advance.
You should never alter the child style from the parent, instead here is what you should do :
Apply a class to the parent (let's say green-button).
In the child's css you need to check that does my parent has a class green-button, if yes then it should change it's color.
In the child's css file ->
:host-context(.green-button) button{
color : green
}
You should not transfer styles from parent to child essentialy because it spoils the ViewEncapsulation goodness that Angular is proud of.
Here is some refrence . : Link
Also, the child component should be responsible for how does it button looks. The parent should be concerned about itself. In the future, if you will have two children to your parent, it will be difficult to manage what style to pass to what child.
Using this method, altering style is not only easy but also manageable.
Upvote and mark as solved if I was able to help.Cheers.
You need to pass the style property to the child component using the #Input() like
Your child component HTML code should look like
<div [className]="tableCss">
</div>
Your child component ts file code shoule look like
#Input() tableCss: string;
Your Parent component should look like
<app-list [tableCss]="'table-responsive table-borderless table-grid mt-4 border-top border-primary'"></app-list>
Try to change styles into [styles]
custom-component-example.html
<button [ngStyle]="styles">
<ng-content></ng-content>
</button>
custom-component-example.ts
#Input() styles: any = {};
Use,
<custom-component-example [styles]="{color: green}">some text</custom-component-example>
If you would like to use input and styles without deep selectecting of css like that:
a > b > c {
color: green;
}
Change this class to this:
class CustomComponentExample {
#Input() styles;
}
Set styles for this input:
<custom-component-example [styles]="{'color': green}">some text</custom-component-example>
Use this property in your component:
<button [ngStyle]="styles">
<ng-content></ng-content>
</button>
Try this:
Add a class on that component into your template file like this example bellow. (class='toggle-button').
<custom-component-example class="toggle-button"> Button name </custom-component-example>
Use ::ng-deep to your scss file for styling this class and add !important to that parameter.
::ng-deep .toggle-button { .switch-btn {
width: 80px !important;
height: 40px !important;}}
*"switch-btn" class is a class into the parent component.
React-css-modules makes up class names on the fly to limit name clashes while using standalone components. Thats awesome. But once the DOM is loaded and you need to target a class for an animation, for instance, the class names that css-modules comes up with are, in parts, randomized.
How to go about with this?
According from react-css-modules official doc, you can target class like bellow
render() {
const animated = this.props.styles['animated']
return <div className={animated}>something</div>
}
Query selector shouldn't be necessary with react just attach a ref to the element you want and you have access to it within any function of the react component.
https://facebook.github.io/react/docs/more-about-refs.html
So I ended up using the classNames npm module
to add and remove classes to an element when I need more than one. Works like this:
let myClasses = classNames({
'button': true,
'special': this.state.special
})
<button className={myClasses} />
I'm using the Ratchet framework to prototype iPhone apps.
In Ratchet, they have toggles that uses the class toggle and onclick (or tap), it uses toggle and active.
Using jQuery, how can I toggle a class to the parent parent element, so when the toggle has the class active, it adds a class (say toggle-active) to the parent parent element and when it doesn't have the class active, it removes have add that class. I've been looking at several different ways such as an if statement, onclick but I haven't found anything that works.
For example, this is what I tried:
jQuery
$(".toggle.active").click(function() {
$(this).parent().parent().toggleClass("toggle-active");
});
Markup
<div class="toggle"><div class="toggle-handle"></div></div>
Is toggleClass the problem or is it the function?
on click.. check it has class active with hasClass if yes add required class to parent.parent.. if no remove it...
try this
$(".toggle").click(function() {
if($(this).hasClass('active'){
$(this).parent().parent().addClass("toggle-active");
//or $(this).parents().eq(2).addClass("toggle-active"); //for find() or closest()
}else{
$(this).parent().parent().removeClass("toggle-active");
}
});