Mixing
(Angular) Using jQuery (or pure JS) to check specific mat-slide-toggles
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm using Angular Material, in this specific case, the <mat-slide-toggle'> tag, inside a *ngFor. As the page loads, its accessing my db to see which should be checked and which shouldn't. A very small ammount of them should (something around 20%), so they are, by default, unchecked.
When my API gives the db's response, angular must get the ID's of the toggles that must be checked, and check them. I'm using this logic to check some checkboxes, and it works, but with <mat-slide-toggle>, Jquery does not seem to interact.
This is how i'm doing,
The sliders:
<div id="table" *ngFor="let data of User; let i = index">
<mat-slide-toggle
disabled
[id]='data.code15'
(change)=toggle(data.code15)
color=primary
class="status">Active
</mat-slide-toggle>
</div>
The logic that should check them (this i guarantee 100% that its working, it just can't check them, but it can console.log their ID's accordingly):
for(var i = 0 ; i < this.IntArray.length ; i++){
if(this.IntArray[i].status == 0){
console.log("Toggle's ID: " + $("#"+this.IntArray[i].user.toString()).attr('id'));
//this is the correct console log
$("#"+this.IntArray[i].code15.toString()).prop('checked', true);
//this should check them (code15 is the ID of each toggle)
}
}
The problem here is that somehow to toggle does not respond to the jQuery command (while my checkboxes do, with a very similar logic). I can't get the toggles to check. Is there any other way?
By the way, the problem of using <mat-slide-toggle [checked]=foo> is that the global variable 'foo' will not receive any value, as the page takes at least half a second to get a reponse from the db (which is quite full).
I'm out of options here, I really need the toggle, as it is way more 'user-friendly' and stylish than radio buttons, as well as easier to deal with in CSS.
Any tips? jQuery or JS accepted...
javascript jquery angular-material
asked Jan 3 at 13:23
CH4BCH4B
98111
|
show 2 more comments
I'm using Angular Material, in this specific case, the <mat-slide-toggle'> tag, inside a *ngFor. As the page loads, its accessing my db to see which should be checked and which shouldn't. A very small ammount of them should (something around 20%), so they are, by default, unchecked.
When my API gives the db's response, angular must get the ID's of the toggles that must be checked, and check them. I'm using this logic to check some checkboxes, and it works, but with <mat-slide-toggle>, Jquery does not seem to interact.
This is how i'm doing,
The sliders:
<div id="table" *ngFor="let data of User; let i = index">
<mat-slide-toggle
disabled
[id]='data.code15'
(change)=toggle(data.code15)
color=primary
class="status">Active
</mat-slide-toggle>
</div>
The logic that should check them (this i guarantee 100% that its working, it just can't check them, but it can console.log their ID's accordingly):
for(var i = 0 ; i < this.IntArray.length ; i++){
if(this.IntArray[i].status == 0){
console.log("Toggle's ID: " + $("#"+this.IntArray[i].user.toString()).attr('id'));
//this is the correct console log
$("#"+this.IntArray[i].code15.toString()).prop('checked', true);
//this should check them (code15 is the ID of each toggle)
}
}
The problem here is that somehow to toggle does not respond to the jQuery command (while my checkboxes do, with a very similar logic). I can't get the toggles to check. Is there any other way?
By the way, the problem of using <mat-slide-toggle [checked]=foo> is that the global variable 'foo' will not receive any value, as the page takes at least half a second to get a reponse from the db (which is quite full).
I'm out of options here, I really need the toggle, as it is way more 'user-friendly' and stylish than radio buttons, as well as easier to deal with in CSS.
Any tips? jQuery or JS accepted...
javascript jquery angular-material
asked Jan 3 at 13:23
CH4BCH4B
98111
I would take a bet that ngFor is in wrong element
– itdoesntwork
Jan 3 at 13:27
nope, the ngFor is where it should
– CH4B
Jan 3 at 13:28
So if User has length 10 you have 10 divs with id="table" ??
– itdoesntwork
Jan 3 at 13:30
Yes, that is for CSS, because i want all divs with id 'table' to follow a pattern, and not all the divs 'table' are inside this ngFor. But this does not affect my slide-toggle
– CH4B
Jan 3 at 13:33
1
Id's should be unique. Use name or a class. As for the issue. have you tried setting [checked] to a property of User object? this would automatically change the slide when the object changes. DO NOT USE JQUERY.
– itdoesntwork
Jan 3 at 13:36
|
show 2 more comments
I'm using Angular Material, in this specific case, the <mat-slide-toggle'> tag, inside a *ngFor. As the page loads, its accessing my db to see which should be checked and which shouldn't. A very small ammount of them should (something around 20%), so they are, by default, unchecked.
When my API gives the db's response, angular must get the ID's of the toggles that must be checked, and check them. I'm using this logic to check some checkboxes, and it works, but with <mat-slide-toggle>, Jquery does not seem to interact.
This is how i'm doing,
The sliders:
<div id="table" *ngFor="let data of User; let i = index">
<mat-slide-toggle
disabled
[id]='data.code15'
(change)=toggle(data.code15)
color=primary
class="status">Active
</mat-slide-toggle>
</div>
The logic that should check them (this i guarantee 100% that its working, it just can't check them, but it can console.log their ID's accordingly):
for(var i = 0 ; i < this.IntArray.length ; i++){
if(this.IntArray[i].status == 0){
console.log("Toggle's ID: " + $("#"+this.IntArray[i].user.toString()).attr('id'));
//this is the correct console log
$("#"+this.IntArray[i].code15.toString()).prop('checked', true);
//this should check them (code15 is the ID of each toggle)
}
}
The problem here is that somehow to toggle does not respond to the jQuery command (while my checkboxes do, with a very similar logic). I can't get the toggles to check. Is there any other way?
By the way, the problem of using <mat-slide-toggle [checked]=foo> is that the global variable 'foo' will not receive any value, as the page takes at least half a second to get a reponse from the db (which is quite full).
I'm out of options here, I really need the toggle, as it is way more 'user-friendly' and stylish than radio buttons, as well as easier to deal with in CSS.
Any tips? jQuery or JS accepted...
javascript jquery angular-material
asked Jan 3 at 13:23
CH4BCH4B
98111
I'm using Angular Material, in this specific case, the <mat-slide-toggle'> tag, inside a *ngFor. As the page loads, its accessing my db to see which should be checked and which shouldn't. A very small ammount of them should (something around 20%), so they are, by default, unchecked.
When my API gives the db's response, angular must get the ID's of the toggles that must be checked, and check them. I'm using this logic to check some checkboxes, and it works, but with <mat-slide-toggle>, Jquery does not seem to interact.
This is how i'm doing,
The sliders:
<div id="table" *ngFor="let data of User; let i = index">
<mat-slide-toggle
disabled
[id]='data.code15'
(change)=toggle(data.code15)
color=primary
class="status">Active
</mat-slide-toggle>
</div>
The logic that should check them (this i guarantee 100% that its working, it just can't check them, but it can console.log their ID's accordingly):
for(var i = 0 ; i < this.IntArray.length ; i++){
if(this.IntArray[i].status == 0){
console.log("Toggle's ID: " + $("#"+this.IntArray[i].user.toString()).attr('id'));
//this is the correct console log
$("#"+this.IntArray[i].code15.toString()).prop('checked', true);
//this should check them (code15 is the ID of each toggle)
}
}
The problem here is that somehow to toggle does not respond to the jQuery command (while my checkboxes do, with a very similar logic). I can't get the toggles to check. Is there any other way?
By the way, the problem of using <mat-slide-toggle [checked]=foo> is that the global variable 'foo' will not receive any value, as the page takes at least half a second to get a reponse from the db (which is quite full).
I'm out of options here, I really need the toggle, as it is way more 'user-friendly' and stylish than radio buttons, as well as easier to deal with in CSS.
Any tips? jQuery or JS accepted...
javascript jquery angular-material
javascript jquery angular-material
asked Jan 3 at 13:23
CH4BCH4B
98111
asked Jan 3 at 13:23
CH4BCH4B
98111
asked Jan 3 at 13:23
CH4BCH4B
98111
asked Jan 3 at 13:23
CH4BCH4B
98111
asked Jan 3 at 13:23
CH4BCH4B
98111
98111
I would take a bet that ngFor is in wrong element
– itdoesntwork
Jan 3 at 13:27
nope, the ngFor is where it should
– CH4B
Jan 3 at 13:28
So if User has length 10 you have 10 divs with id="table" ??
– itdoesntwork
Jan 3 at 13:30
Yes, that is for CSS, because i want all divs with id 'table' to follow a pattern, and not all the divs 'table' are inside this ngFor. But this does not affect my slide-toggle
– CH4B
Jan 3 at 13:33
1
Id's should be unique. Use name or a class. As for the issue. have you tried setting [checked] to a property of User object? this would automatically change the slide when the object changes. DO NOT USE JQUERY.
– itdoesntwork
Jan 3 at 13:36
|
show 2 more comments
I would take a bet that ngFor is in wrong element
– itdoesntwork
Jan 3 at 13:27
nope, the ngFor is where it should
– CH4B
Jan 3 at 13:28
So if User has length 10 you have 10 divs with id="table" ??
– itdoesntwork
Jan 3 at 13:30
Yes, that is for CSS, because i want all divs with id 'table' to follow a pattern, and not all the divs 'table' are inside this ngFor. But this does not affect my slide-toggle
– CH4B
Jan 3 at 13:33
1
Id's should be unique. Use name or a class. As for the issue. have you tried setting [checked] to a property of User object? this would automatically change the slide when the object changes. DO NOT USE JQUERY.
– itdoesntwork
Jan 3 at 13:36
I would take a bet that ngFor is in wrong element
– itdoesntwork
Jan 3 at 13:27
I would take a bet that ngFor is in wrong element
– itdoesntwork
Jan 3 at 13:27
nope, the ngFor is where it should
– CH4B
Jan 3 at 13:28
nope, the ngFor is where it should
– CH4B
Jan 3 at 13:28
So if User has length 10 you have 10 divs with id="table" ??
– itdoesntwork
Jan 3 at 13:30
So if User has length 10 you have 10 divs with id="table" ??
– itdoesntwork
Jan 3 at 13:30
Yes, that is for CSS, because i want all divs with id 'table' to follow a pattern, and not all the divs 'table' are inside this ngFor. But this does not affect my slide-toggle
– CH4B
Jan 3 at 13:33
Yes, that is for CSS, because i want all divs with id 'table' to follow a pattern, and not all the divs 'table' are inside this ngFor. But this does not affect my slide-toggle
– CH4B
Jan 3 at 13:33
1
1
Id's should be unique. Use name or a class. As for the issue. have you tried setting [checked] to a property of User object? this would automatically change the slide when the object changes. DO NOT USE JQUERY.
– itdoesntwork
Jan 3 at 13:36
Id's should be unique. Use name or a class. As for the issue. have you tried setting [checked] to a property of User object? this would automatically change the slide when the object changes. DO NOT USE JQUERY.
– itdoesntwork
Jan 3 at 13:36
|
show 2 more comments
1 Answer
1
active
oldest
votes
You can do the following to accomplish this... this would be Angular/JS and not jQuery
I do not know the format of your data coming back from db so I did a simple mock array for demonstration purposes.
I assume there is some value in your array from db that determines if slider should be checked... here I just use a boolean with key of checked
User = [
{ id: 1, checked: true },
{ id: 2, checked: false },
{ id: 3, checked: false },
{ id: 4, checked: true },
{ id: 5, checked: false },
{ id: 6, checked: false },
]
I then use @ViewChildren to get all the sliders on the DOM
import { MatSlideToggle } from '@angular/material'
@ViewChildren(MatSlideToggle) toggleArray
After ViewInit loop through the array of sliders on the DOM and compare them to the User array and set the ones that need to be checked.
I am setting sliders to
checkedafterViewInithere, you could execute this logic when the response comes back from DB and it will work the same.
ngAfterViewInit() {
this.toggleArray.toArray().forEach((el) => {
let i = this.User.findIndex(u => el.id == u.id)
if (this.User[i].checked) {
el.checked = true;
}
})
}
Stackblitz
https://stackblitz.com/edit/angular-idbj9c?embed=1&file=app/slide-toggle-overview-example.ts
answered Jan 3 at 15:08
MarshalMarshal
3,8872623
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54023170%2fangular-using-jquery-or-pure-js-to-check-specific-mat-slide-toggles%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can do the following to accomplish this... this would be Angular/JS and not jQuery
I do not know the format of your data coming back from db so I did a simple mock array for demonstration purposes.
I assume there is some value in your array from db that determines if slider should be checked... here I just use a boolean with key of checked
User = [
{ id: 1, checked: true },
{ id: 2, checked: false },
{ id: 3, checked: false },
{ id: 4, checked: true },
{ id: 5, checked: false },
{ id: 6, checked: false },
]
I then use @ViewChildren to get all the sliders on the DOM
import { MatSlideToggle } from '@angular/material'
@ViewChildren(MatSlideToggle) toggleArray
After ViewInit loop through the array of sliders on the DOM and compare them to the User array and set the ones that need to be checked.
I am setting sliders to
checkedafterViewInithere, you could execute this logic when the response comes back from DB and it will work the same.
ngAfterViewInit() {
this.toggleArray.toArray().forEach((el) => {
let i = this.User.findIndex(u => el.id == u.id)
if (this.User[i].checked) {
el.checked = true;
}
})
}
Stackblitz
https://stackblitz.com/edit/angular-idbj9c?embed=1&file=app/slide-toggle-overview-example.ts
answered Jan 3 at 15:08
MarshalMarshal
3,8872623
add a comment |
You can do the following to accomplish this... this would be Angular/JS and not jQuery
I do not know the format of your data coming back from db so I did a simple mock array for demonstration purposes.
I assume there is some value in your array from db that determines if slider should be checked... here I just use a boolean with key of checked
User = [
{ id: 1, checked: true },
{ id: 2, checked: false },
{ id: 3, checked: false },
{ id: 4, checked: true },
{ id: 5, checked: false },
{ id: 6, checked: false },
]
I then use @ViewChildren to get all the sliders on the DOM
import { MatSlideToggle } from '@angular/material'
@ViewChildren(MatSlideToggle) toggleArray
After ViewInit loop through the array of sliders on the DOM and compare them to the User array and set the ones that need to be checked.
I am setting sliders to
checkedafterViewInithere, you could execute this logic when the response comes back from DB and it will work the same.
ngAfterViewInit() {
this.toggleArray.toArray().forEach((el) => {
let i = this.User.findIndex(u => el.id == u.id)
if (this.User[i].checked) {
el.checked = true;
}
})
}
Stackblitz
https://stackblitz.com/edit/angular-idbj9c?embed=1&file=app/slide-toggle-overview-example.ts
answered Jan 3 at 15:08
MarshalMarshal
3,8872623
add a comment |
You can do the following to accomplish this... this would be Angular/JS and not jQuery
I do not know the format of your data coming back from db so I did a simple mock array for demonstration purposes.
I assume there is some value in your array from db that determines if slider should be checked... here I just use a boolean with key of checked
User = [
{ id: 1, checked: true },
{ id: 2, checked: false },
{ id: 3, checked: false },
{ id: 4, checked: true },
{ id: 5, checked: false },
{ id: 6, checked: false },
]
I then use @ViewChildren to get all the sliders on the DOM
import { MatSlideToggle } from '@angular/material'
@ViewChildren(MatSlideToggle) toggleArray
After ViewInit loop through the array of sliders on the DOM and compare them to the User array and set the ones that need to be checked.
I am setting sliders to
checkedafterViewInithere, you could execute this logic when the response comes back from DB and it will work the same.
ngAfterViewInit() {
this.toggleArray.toArray().forEach((el) => {
let i = this.User.findIndex(u => el.id == u.id)
if (this.User[i].checked) {
el.checked = true;
}
})
}
Stackblitz
https://stackblitz.com/edit/angular-idbj9c?embed=1&file=app/slide-toggle-overview-example.ts
answered Jan 3 at 15:08
MarshalMarshal
3,8872623
You can do the following to accomplish this... this would be Angular/JS and not jQuery
I do not know the format of your data coming back from db so I did a simple mock array for demonstration purposes.
I assume there is some value in your array from db that determines if slider should be checked... here I just use a boolean with key of checked
User = [
{ id: 1, checked: true },
{ id: 2, checked: false },
{ id: 3, checked: false },
{ id: 4, checked: true },
{ id: 5, checked: false },
{ id: 6, checked: false },
]
I then use @ViewChildren to get all the sliders on the DOM
import { MatSlideToggle } from '@angular/material'
@ViewChildren(MatSlideToggle) toggleArray
After ViewInit loop through the array of sliders on the DOM and compare them to the User array and set the ones that need to be checked.
I am setting sliders to
checkedafterViewInithere, you could execute this logic when the response comes back from DB and it will work the same.
ngAfterViewInit() {
this.toggleArray.toArray().forEach((el) => {
let i = this.User.findIndex(u => el.id == u.id)
if (this.User[i].checked) {
el.checked = true;
}
})
}
Stackblitz
https://stackblitz.com/edit/angular-idbj9c?embed=1&file=app/slide-toggle-overview-example.ts
answered Jan 3 at 15:08
MarshalMarshal
3,8872623
edited Jan 3 at 15:24
answered Jan 3 at 15:08
MarshalMarshal
3,8872623
answered Jan 3 at 15:08
MarshalMarshal
3,8872623
answered Jan 3 at 15:08
MarshalMarshal
3,8872623
3,8872623
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54023170%2fangular-using-jquery-or-pure-js-to-check-specific-mat-slide-toggles%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I would take a bet that ngFor is in wrong element
– itdoesntwork
Jan 3 at 13:27
nope, the ngFor is where it should
– CH4B
Jan 3 at 13:28
So if User has length 10 you have 10 divs with id="table" ??
– itdoesntwork
Jan 3 at 13:30
Yes, that is for CSS, because i want all divs with id 'table' to follow a pattern, and not all the divs 'table' are inside this ngFor. But this does not affect my slide-toggle
– CH4B
Jan 3 at 13:33
1
Id's should be unique. Use name or a class. As for the issue. have you tried setting [checked] to a property of User object? this would automatically change the slide when the object changes. DO NOT USE JQUERY.
– itdoesntwork
Jan 3 at 13:36