Develop Reference

How to access dynamically created buttons in angular?

So, I am creating a quiz application where I have a scrollbar for questions and in that scrollbar I have buttons depending on the length of a question set. So I've created those buttons using *ngFor directive. Now what I want to do is whenever a user selects any option (mcq), the question buttons in the scrollbar should get highlighted in following way:
If user selects any option, then change the question button color to Green
If user skips the question, then change the question button color to Yellow
HTML Code for Question Scrollbar:
<div id="answer-buttons" class="ques-grid ">
<button #navBarButton *ngFor="let item of items">{{item}}</button>
</div>
I'm have tried doing it by first accessing the buttons using ViewChild in ts file and then apply some logic, but it's not working, it is only changing the color of first button
#ViewChild('navBarButton',{ static: false }) navBarButton:ElementRef
//and in some function I've tried this logic
if(this.attemptedQuestionCount[this.currentQuestionIndex]==1){
this.navBarButton.nativeElement.style.backgroundColor = "#228B22"
}
else{
this.navBarButton.nativeElement.style.backgroundColor = "#FCF55F"
}
How can I achieve my objective?

You can check for attemptedQuestionCount and change background color like this
<div id="answer-buttons" class="ques-grid ">
<button *ngFor="let question of questions; let i=index"
[style.background-color]="attemptedQuestionCount[i] === 1 ? '#228B22' : '#FCF55F'">{{question}}</button>
</div>

Add button tag as follows:
<button *ngFor="let question of questions; let i=index"
[style.background-color]="attemptedQuestionCount[i] === 1 ? '#228B22' : '#FCF55F'">{{question}}</button>

You can add the click handler directly to the button using
<button *ngFor="let item of items; let indexOfelement=index"
(click)="heyYouClicked(indexOfelement)">{{item}}</button>
And then in the component you place the handler
export class AppComponent {
items = ["hello", "world"]
heyYouClicked(index){
console.log("you clicked " + index)
}
}

You can try ngClass for simplicity.
<button #navBarButton *ngFor="let item of items" class="defualt_state" [ngClass]="{'new_state': (condition_here)}">{{item}}</button>
And in the stylesheet you can have the above class configured
.new_state { background-color: #228B22 !important }
And set the default color of the button this way
.default_state { background-color : #FCF55F}
So when the condition matches it will take the color specified in the new_state class or else will take the default color from default_state class.

Mui V5 - Remove TreeView collapse/extand icons and TreeItem indentation

I'm using Mui V5 and want to change TreeView so it doesnt include collapse/extand icons since I need them to be a part of the TreeItem label component and appear on the left, not right. Also, I want to cancel the indentation of the TreeItems. how can I do that?

I think that what you are trying to do with indentation cannot be directly done through TreeView or TreeItem props. You can remove icons just avoiding defaultCollapseIcon and defaultExpandIcon props.
You can always add some custom styling to achieve what you want. Here's an example to just get a TreeView without icons nor indentation.
const StyledTreeView = styled(TreeView)`
.MuiTreeItem-group {
margin-left: 0;
}
`;
const StyledTreeItem = styled(TreeItem)`
.MuiTreeItem-iconContainer {
display: none;
}
`;
export default function App() {
return (
<StyledTreeView aria-label="tree">
<StyledTreeItem nodeId="1" label="Item 1">
<StyledTreeItem nodeId="2" label="Subitem 1-1" />
</StyledTreeItem>
<StyledTreeItem nodeId="5" label="Item 2">
<StyledTreeItem nodeId="10" label="Subitem 2-1" />
<StyledTreeItem nodeId="6" label="Subitem 2-2">
<StyledTreeItem nodeId="8" label="Subitem 2-2-1" />
</StyledTreeItem>
</StyledTreeItem>
</StyledTreeView>
);
}
The custom style applied to TreeView removes the indentation, and the one applied to StyledTreeItem removes the space assigned to an icon.
Here's a sandbox with an unintended TreeView

How to change vue/vuetify text field color conditionally

I'd like to conditionally apply a text color class in a text field. The class I want is red--text, like this:
:class="{ red--text: myModel.someBool }"
...but that results in a parse error. The problem is related to the class name, I think, because this works:
<v-text-field
v-model="myModel" label="My Text"
:class="{ red: myModel.someBool }"
></v-text-field>
...but I want to color the text, not the whole field.
Enclosing the desired class name in quotes 'red--text' prevents the parse error, but has no effect on the color.
Is there a way to get what I want?

Create a custom scoped style that applies itself to the input (since the class of v-text-field is applied to a containing div).
<style scoped>
.my-text-style >>> .v-text-field__slot input {
color: red
}
</style>
This style name can contain hyphens, as long as it is quoted in the class expression. Bind the class with v-bind...
<v-text-field
v-model="myModel" label="My Text"
:class="{ 'my-text-style': myModel.someBool }"
></v-text-field>

you can conditionally bind classes like this:
:class="myModel.someBool ? 'red--text' : ''"

You can use v-bind with ternary condition to apply style
<v-text-field
v-bind:style="{'border': documentData[name] ? 'solid green 1px !important':'solid red 1px!important'}"
v-model="documentData[name]"
:label="name"
:placeholder="value"
regular/>
Note - You cannot user color for changing text by using.
& highlight box color as well as if you use background-color in place of
border you can change whole field color.

You might as well set the actual class from data()
data: function () {
return {
testClass: 'red--text'
}
}
And bind your text fields class to that value :class="testClass"
Then in methods alter the whole class
methods: {
uploader() {
this.testClass = 'primary--text'
}
}

You can also do this using methods
<template>
<div>
<v-btn text :color="tabColor(1)" #click="selectTab(1)">Tab 1</v-btn>
<v-btn text :color="tabColor(2)" #click="selectTab(2)">Tab 2</v-btn>
</div>
</template>
<script>
export default {
data() {
return {
currentTab: 1
};
},
methods: {
selectTab(tab) {
this.currentTab = tab;
},
tabColor(tab) {
return tab == this.currentTab ? "primary" : "normal";
},
},
};
</script>

How to inactivate all items in the botnav component of Vuetify?

I have a Vuetify botnav; each item is activated under a certain router path, I want to inactivate the item when it's under another path.
I tried to set active.sync to -1 when I want to inactivate the tab, this will work if I never activate any item in the botnav, but if I activate an item, then set active.sync=-1 again, it will automatically activate the first item:
<v-bottom-nav
:active.sync="bottomNav"
:value="true"
shift
absolute
>
<v-btn
color="teal"
flat
value="recent"
>
<span>Recent</span>
<v-icon>history</v-icon>
</v-btn>
<v-btn
color="teal"
flat
value="favorites"
>
<span>Favorites</span>
<v-icon>favorite</v-icon>
</v-btn>
<v-btn
color="teal"
flat
value="nearby"
>
<span>Nearby</span>
<v-icon>place</v-icon>
</v-btn>
</v-bottom-nav>
In the script:
watch:{
$route:function(to, from){
switch(to.path){
case "/0":
this.bottomNav=0;
break
case "/1":
this.bottomNav=1;
break
case "/2":
this.bottomNav=2;
break
default: this.bottomNav=-1
}
}
}
I did find a solution that works, by setting a dummy hidden item in the botnav and set the v-show of this item to false, when I want to inactivate all items, I activate this unshown one, and it result in what I want:
A dummy item:
<v-bottom-nav
:active.sync="bottomNav"
//more stuff
>
//other items
<v-btn v-show="0" value="inactivate"></v-btn>
</v-bottom-nav>
And do this whenever I want to inactivate all items in the script:
this.bottomNav = "inactivate"
This WORKS, but that's kind of hacky, is there a more formal/elegant way to do this?

The default value for active.sync is undefined, so try using void to reset:
this.bottomNav = void(0)
[ https://jsfiddle.net/e8a67qtp/ ]

NativeScript: change background color and text of a Button belonging to a ListView

I need a 2-state toggle Button: at each tap, that changes its background color and its text label (color and text). Its implementation is simple and it works correctly when the button belongs to a simple page.
Instead, when the button is put in each element of a simple list (20 elements) it does not change its background color, and only its label text changes, not its color.
Here some code details to check the problem:
<StackLayout orientation="vertical" >
<ListView items="{{ items }}" itemTap="onItemTap">
<ListView.itemTemplate>
<StackLayout orientation="vertical" class="follow-button">
<Button text="Undefined" tap="onTap"/>
</StackLayout>
</ListView.itemTemplate>
</ListView>
</StackLayout>
and in js side ('value' not binded to a button, is used here only to demonstrate tap problem on a single button of the list):
var value = 1;
exports.onTap = function (args) {
view = args.object;
value = value === 1 ? 0 : 1;
view.text = value === 1 ? "button on" : "button off";
view.backgroundColor = value === 1 ? "red" : "white";
view.color = value === 1 ? "white" : "red";
}
I see that removing or fixing the text then background changes correctly at each tap.
Any suggestion?

I found that the fix described here seems works like a charm!
It is the only solution I found that leaves intact the app code without introduce tricks that break the philosophy behind using components.
Just put this:
Object.defineProperty(View.prototype, "isLayoutValid", {
get: function () {
return (this._privateFlags & PFLAG_LAYOUT_REQUIRED) !== PFLAG_LAYOUT_REQUIRED;
},
enumerable: true,
configurable: true
});
in
node_modules/tns-core-modules/ui/core/view/view.ios.js
And everything is magically fixed!