Develop Reference

Add a class to the Immediate Parent Element in Angular

I have an element where it has a class creates dynamically. I want to add a new class to it's parent element if the child element has a specific class.
<a [ngclass]="addClassHere"> //need to add class here if child has a specific class
<div [ngclass]="getScheduleDateColour(date.day)">{{date.day}}</div> //child class
</a>
the a element is created by the package and cannot access directly.

Assuming your getScheduleDateColour() returns different names of classes, say 'childClass1','childClass2' and so on, and the required is 'childClass1'.
Now you can set a new class to your parent according to your child's class by :
<a [ngclass]="childDiv.className == 'childClass1'? 'ReqParentClass' : '' ">
<div #childDiv [ngclass]="getScheduleDateColour(date.day)">{{date.day}}</div>
</a>
PS: If you want to add different parentClasses if child is not the required one, you can add it also in the ternary operator, like: 'childClass1'? 'ReqParentClass' : 'ElseThisWillBeTheParentClass'

One of the options you have is to use Template reference variables
for both your parent and child elements and change them pragmatically from your TS file
like so in html
<div #parentElem class="aquaDay">
<div #childElem class="aqua">day</div>
</div>
and use #ViewChild to bind them and change them as you want
#ViewChild("parentElem") parent: ElementRef;
#ViewChild("childElem") child: ElementRef;
changeColour() {
const childClass = this.child.nativeElement.className;
this.parent.nativeElement.className =
childClass === "aqua" ? "greenDay" : "aquaDay";
}
I created a simple demo here: https://stackblitz.com/edit/angular-ivy-422p1t?file=src/app/app.component.ts

Toggle class on buttons in Svelte

Consider this Svelte code
{#each filters as filters, i}
<div class='filter-container'>
<div class='button filter' on:click={ () => setFilter(filters.name, filterContext)}>{filters.name}</div>
</div>
{/each}
The above filter buttons are made depending on how many filters there are in some js object. How can I create a class that is toggled for all filter buttons when the one button is clicked.
eg. when one is active all the others are not?

Class are just strings - in svelte you can bind them to an expression as any other attribute.
For example:
<div class={'button filter ' + (activefilter === filters.name ? 'isactive' : '')}/>
when activefilter === filters.name is true, then the button class will became 'button filter isactive'
A special short syntax to toggle classes is provided too. Find more here

We can easily bind class names to expressions, so that the class will be added if the expression becomes truthy:
<script>
let isActive = false
</script>
<style>
.active {
color: red;
}
</style>
<h1 class:active={isActive}>Hello!</h1>
<button on:click={() => isActive = !isActive}>Click me</button>
Here, clicking the button toggles the isActive boolean. The class active is bound to that variable on the h1 element and you can see that the color now changes on every button click.
That is the standard way on how to set single classes dynamically.
REPL: https://svelte.dev/repl/988df145876a42c49bb8de51d2cae0f2?version=3.23.0

Angular 2 change ngFor items class knowing only it's index

I have a lot of buttons in my *ngFor, and I want that when someone click's on a button - it becomes active(it gets active class).
What I've done :
HTML :
<button
[ngClass]="{'activeBtn': buttActive }"
(click)="addDistrict(item);changeActive(i)"
*ngFor="let item of items; let i = index"
ion-button
#disable>
{{item.name}}
</button>
TS : (changing all buttons class to active (i want to change only that one i clicked)
buttActive = false;
changeActive(i) {
console.log(i);
this.buttActive = !this.buttActive;
}

have a buttActive property in the object and change it
button [ngClass]="{'activeBtn': item.buttActive }" (click)="addDistrict(item);changeActive(item,i)"
*ngFor="let item of items; let i = index" ion-button #disable>{{item.name}}</button>
changeActive(item, i){
console.log(i);
item.buttActive = !item.buttActive;
}

If you don't want to create a property on each item, then create a lastClickedIndex property in your Component class and set it with the index of the button that was clicked:
lastClickedIndex;
changeActive(i) {
this.lastClickedIndex = i;
}
And in your template, check for the lastClickedIndex button based on index to apply the activeBtn class.
<button
*ngFor="let item of items; let i = index"
[ngClass]="(lastClickedIndex == i) ? 'activeBtn': ''"
(click)="addDistrict(item);changeActive(i)"
ion-button
#disable>
{{item.name}}
</button>
That way you won't have to create a property on each item object. This will also take care of removing the class from the previously selected button when some other button is clicked.
Here's a StackBlitz for your ref.

Ionic 2: Add Class to Item While Removing Class From Other Items

I have a div full of buttons that, when clicked, should add a class (selected-date-item) that changes the color of the button. Immediately before that, I want to remove that class (selected-date-item) from any button that previously held that class.
CSS
.selected-date-item {
background:#272829;
color:white;
}
HTML
<button class="date-time-select" *ngFor="let chooseDate of possibleDates" (tap)="selectPickupDate(chooseDate)">{{chooseDate}}</button>
JS
selectPickupDate(selectedDate) {
this.selectedDate = selectedDate;
}
=>

Use [ngClass]-directive to set a CSS-class dynamically .
<button [ngClass]="{'selected-date-item': chooseDate == selectedDate, 'not-selected-item': chooseDate != selectedDate}" *ngFor="let chooseDate of possibleDates" (tap)="selectPickupDate(chooseDate)">{{chooseDate}}</button>
[ngClass] broken out:
[ngClass]="{'selected-date-item': chooseDate == selectedDate, 'not-selected-item': chooseDate != selectedDate}"

Getting HTML element by Id and switch its CSS through React

I have some files that load into my react components, which have HTML code.
As it is now, the pure HTML code renders just fine, however there is some 'hidden' code that appears whenever you click certain buttons in other parts of the application or on the text above (think of it like panels that expand when you click on it).
The HTML is hidden just using the good old <div id="someId" style="display:none">.
Anyway I am trying to get the correct panel to expand upon clicking their respective buttons.
So in theory, what I need to do is find the element by id, and switch it's display to block whenever needed, and then switch it back when the parent is clicked again.
Unfortunately I have no idea how to do this and so far have gotten nowhere. As it is now, I have access to the component's ids. What I want to know is how in the world can I access that and get to change whatever is rendering?

Create your function:
function element_do(my_element, what_to_do) {
document.getElementById(my_element).style.display = what_to_do;
}
and latter in code you can append wherever you want through javascript onclick or not depends what do you need:
element_do("someId", "none"); // to hide
element_do("someId", "block"); // to show
or create yourself toggle:
function toggle_element(element_id) {
var element = document.getElementById(element_id);
element.style.display = (element.style.display != 'none' ? 'none' : 'block' );
}
// and you can just call it
<button onClick="toggle_element('some_id')">toggle some element</button>

The react way to do it would be with states. Assuming that you know how to use states I'd do something like this:
class ShowHide extends React.Component {
constructor() {
super();
this.state = {myState: true};
this.onClick = this.onClick.bind(this)
}
onClick() {
this.setState({myState: !this.state.myState}) //set the opposite of true/false
}
render() {
const style = {myState ? "display: none" : "display:block"} //if myState is true/false it will set the style
return (<div>
<button onClick={this.onClick}>Click me to hide/show me </button>
<div id="myDiv" style={style}> Here you will hide/show div on click </div>
</div>)
}
}