How to pulse text color dynamically from an array of colors?
I have a <span [innerHTML]="myHTML" [className]="myColor"></span> I need to the innerHTML text to infinitely change from one color to another. The number of colors can vary by quite a bit so if possible I don't want to write out a bunch of CSS animations.
I tried using an async function with a while loop like this:async colorChangeFunc(colors: string) {
while(this.flagCalcComplete) {
for (let i = 0; i < colors.length; i++) {
this.myColor = colors[i];
setTimeout(null, 1000);
}
}
}
Where colors is an array of strings that correspond to a CSS class. However, I misunderstood how async works in TS and it of course crashed the browser.
css typescript angular7 ionic4
asked Jan 1 at 7:44
alex87alex87
687
add a comment |
I have a <span [innerHTML]="myHTML" [className]="myColor"></span> I need to the innerHTML text to infinitely change from one color to another. The number of colors can vary by quite a bit so if possible I don't want to write out a bunch of CSS animations.
I tried using an async function with a while loop like this:async colorChangeFunc(colors: string) {
while(this.flagCalcComplete) {
for (let i = 0; i < colors.length; i++) {
this.myColor = colors[i];
setTimeout(null, 1000);
}
}
}
Where colors is an array of strings that correspond to a CSS class. However, I misunderstood how async works in TS and it of course crashed the browser.
css typescript angular7 ionic4
asked Jan 1 at 7:44
alex87alex87
687
do you want to change color each 1s?
– לבני מלכה
Jan 1 at 7:48
asyncfor something that never finishes? That doesn't seem to make any sense. async is so your code waits for asynchronous code before proceeding to the next line. You seem to understand that, so you should try it without async and post a different question if it doesn't work
– Juan Mendes
Jan 1 at 7:51
@לבנימלכה something like that
– alex87
Jan 1 at 7:54
@JuanMendes right, I was thinking that async would start a new thread. I'm not very familiar with TS yet.
– alex87
Jan 1 at 7:55
add a comment |
I have a <span [innerHTML]="myHTML" [className]="myColor"></span> I need to the innerHTML text to infinitely change from one color to another. The number of colors can vary by quite a bit so if possible I don't want to write out a bunch of CSS animations.
I tried using an async function with a while loop like this:async colorChangeFunc(colors: string) {
while(this.flagCalcComplete) {
for (let i = 0; i < colors.length; i++) {
this.myColor = colors[i];
setTimeout(null, 1000);
}
}
}
Where colors is an array of strings that correspond to a CSS class. However, I misunderstood how async works in TS and it of course crashed the browser.
css typescript angular7 ionic4
asked Jan 1 at 7:44
alex87alex87
687
I have a <span [innerHTML]="myHTML" [className]="myColor"></span> I need to the innerHTML text to infinitely change from one color to another. The number of colors can vary by quite a bit so if possible I don't want to write out a bunch of CSS animations.
I tried using an async function with a while loop like this:async colorChangeFunc(colors: string) {
while(this.flagCalcComplete) {
for (let i = 0; i < colors.length; i++) {
this.myColor = colors[i];
setTimeout(null, 1000);
}
}
}
Where colors is an array of strings that correspond to a CSS class. However, I misunderstood how async works in TS and it of course crashed the browser.
css typescript angular7 ionic4
css typescript angular7 ionic4
asked Jan 1 at 7:44
alex87alex87
687
asked Jan 1 at 7:44
alex87alex87
687
asked Jan 1 at 7:44
alex87alex87
687
asked Jan 1 at 7:44
alex87alex87
687
asked Jan 1 at 7:44
alex87alex87
687
687
do you want to change color each 1s?
– לבני מלכה
Jan 1 at 7:48
asyncfor something that never finishes? That doesn't seem to make any sense. async is so your code waits for asynchronous code before proceeding to the next line. You seem to understand that, so you should try it without async and post a different question if it doesn't work
– Juan Mendes
Jan 1 at 7:51
@לבנימלכה something like that
– alex87
Jan 1 at 7:54
@JuanMendes right, I was thinking that async would start a new thread. I'm not very familiar with TS yet.
– alex87
Jan 1 at 7:55
add a comment |
do you want to change color each 1s?
– לבני מלכה
Jan 1 at 7:48
asyncfor something that never finishes? That doesn't seem to make any sense. async is so your code waits for asynchronous code before proceeding to the next line. You seem to understand that, so you should try it without async and post a different question if it doesn't work
– Juan Mendes
Jan 1 at 7:51
@לבנימלכה something like that
– alex87
Jan 1 at 7:54
@JuanMendes right, I was thinking that async would start a new thread. I'm not very familiar with TS yet.
– alex87
Jan 1 at 7:55
do you want to change color each 1s?
– לבני מלכה
Jan 1 at 7:48
do you want to change color each 1s?
– לבני מלכה
Jan 1 at 7:48
async for something that never finishes? That doesn't seem to make any sense. async is so your code waits for asynchronous code before proceeding to the next line. You seem to understand that, so you should try it without async and post a different question if it doesn't work– Juan Mendes
Jan 1 at 7:51
async for something that never finishes? That doesn't seem to make any sense. async is so your code waits for asynchronous code before proceeding to the next line. You seem to understand that, so you should try it without async and post a different question if it doesn't work– Juan Mendes
Jan 1 at 7:51
@לבנימלכה something like that
– alex87
Jan 1 at 7:54
@לבנימלכה something like that
– alex87
Jan 1 at 7:54
@JuanMendes right, I was thinking that async would start a new thread. I'm not very familiar with TS yet.
– alex87
Jan 1 at 7:55
@JuanMendes right, I was thinking that async would start a new thread. I'm not very familiar with TS yet.
– alex87
Jan 1 at 7:55
add a comment |
1 Answer
1
active
oldest
votes
Use i * 1000 in loop and set style.color
See working code
HTML
<span [style.color]="myColor">Hello angular</span>
TS
for (let i = 0; i < this.colors.length; i++) {
setTimeout(()=>{
this.myColor = this.colors[i];
}, i * 1000);
}
}
answered Jan 1 at 8:08
לבני מלכהלבני מלכה
10.5k1826
tell me for more help
– לבני מלכה
Jan 1 at 8:08
This works, but it only changes the color once. I need to it to keep cycling through the colors. – alex87 33 mins ago
– alex87
Jan 1 at 9:11
I will edit answer
– לבני מלכה
Jan 1 at 9:16
Thanks, but I think you misunderstood. After it reaches the last color I need it to go back to the first color and cycle through all the colors again.
– alex87
Jan 1 at 9:55
I have solved it. It's not very elegant but I wrote a custom class and animation for each(10) possible color combinations.
– alex87
Jan 1 at 10:58
|
show 1 more 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%2f53993844%2fhow-to-pulse-text-color-dynamically-from-an-array-of-colors%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
Use i * 1000 in loop and set style.color
See working code
HTML
<span [style.color]="myColor">Hello angular</span>
TS
for (let i = 0; i < this.colors.length; i++) {
setTimeout(()=>{
this.myColor = this.colors[i];
}, i * 1000);
}
}
answered Jan 1 at 8:08
לבני מלכהלבני מלכה
10.5k1826
tell me for more help
– לבני מלכה
Jan 1 at 8:08
This works, but it only changes the color once. I need to it to keep cycling through the colors. – alex87 33 mins ago
– alex87
Jan 1 at 9:11
I will edit answer
– לבני מלכה
Jan 1 at 9:16
Thanks, but I think you misunderstood. After it reaches the last color I need it to go back to the first color and cycle through all the colors again.
– alex87
Jan 1 at 9:55
I have solved it. It's not very elegant but I wrote a custom class and animation for each(10) possible color combinations.
– alex87
Jan 1 at 10:58
|
show 1 more comment
Use i * 1000 in loop and set style.color
See working code
HTML
<span [style.color]="myColor">Hello angular</span>
TS
for (let i = 0; i < this.colors.length; i++) {
setTimeout(()=>{
this.myColor = this.colors[i];
}, i * 1000);
}
}
answered Jan 1 at 8:08
לבני מלכהלבני מלכה
10.5k1826
tell me for more help
– לבני מלכה
Jan 1 at 8:08
This works, but it only changes the color once. I need to it to keep cycling through the colors. – alex87 33 mins ago
– alex87
Jan 1 at 9:11
I will edit answer
– לבני מלכה
Jan 1 at 9:16
Thanks, but I think you misunderstood. After it reaches the last color I need it to go back to the first color and cycle through all the colors again.
– alex87
Jan 1 at 9:55
I have solved it. It's not very elegant but I wrote a custom class and animation for each(10) possible color combinations.
– alex87
Jan 1 at 10:58
|
show 1 more comment
Use i * 1000 in loop and set style.color
See working code
HTML
<span [style.color]="myColor">Hello angular</span>
TS
for (let i = 0; i < this.colors.length; i++) {
setTimeout(()=>{
this.myColor = this.colors[i];
}, i * 1000);
}
}
answered Jan 1 at 8:08
לבני מלכהלבני מלכה
10.5k1826
Use i * 1000 in loop and set style.color
See working code
HTML
<span [style.color]="myColor">Hello angular</span>
TS
for (let i = 0; i < this.colors.length; i++) {
setTimeout(()=>{
this.myColor = this.colors[i];
}, i * 1000);
}
}
answered Jan 1 at 8:08
לבני מלכהלבני מלכה
10.5k1826
answered Jan 1 at 8:08
לבני מלכהלבני מלכה
10.5k1826
answered Jan 1 at 8:08
לבני מלכהלבני מלכה
10.5k1826
answered Jan 1 at 8:08
לבני מלכהלבני מלכה
10.5k1826
10.5k1826
tell me for more help
– לבני מלכה
Jan 1 at 8:08
This works, but it only changes the color once. I need to it to keep cycling through the colors. – alex87 33 mins ago
– alex87
Jan 1 at 9:11
I will edit answer
– לבני מלכה
Jan 1 at 9:16
Thanks, but I think you misunderstood. After it reaches the last color I need it to go back to the first color and cycle through all the colors again.
– alex87
Jan 1 at 9:55
I have solved it. It's not very elegant but I wrote a custom class and animation for each(10) possible color combinations.
– alex87
Jan 1 at 10:58
|
show 1 more comment
tell me for more help
– לבני מלכה
Jan 1 at 8:08
This works, but it only changes the color once. I need to it to keep cycling through the colors. – alex87 33 mins ago
– alex87
Jan 1 at 9:11
I will edit answer
– לבני מלכה
Jan 1 at 9:16
Thanks, but I think you misunderstood. After it reaches the last color I need it to go back to the first color and cycle through all the colors again.
– alex87
Jan 1 at 9:55
I have solved it. It's not very elegant but I wrote a custom class and animation for each(10) possible color combinations.
– alex87
Jan 1 at 10:58
tell me for more help
– לבני מלכה
Jan 1 at 8:08
tell me for more help
– לבני מלכה
Jan 1 at 8:08
This works, but it only changes the color once. I need to it to keep cycling through the colors. – alex87 33 mins ago
– alex87
Jan 1 at 9:11
This works, but it only changes the color once. I need to it to keep cycling through the colors. – alex87 33 mins ago
– alex87
Jan 1 at 9:11
I will edit answer
– לבני מלכה
Jan 1 at 9:16
I will edit answer
– לבני מלכה
Jan 1 at 9:16
Thanks, but I think you misunderstood. After it reaches the last color I need it to go back to the first color and cycle through all the colors again.
– alex87
Jan 1 at 9:55
Thanks, but I think you misunderstood. After it reaches the last color I need it to go back to the first color and cycle through all the colors again.
– alex87
Jan 1 at 9:55
I have solved it. It's not very elegant but I wrote a custom class and animation for each(10) possible color combinations.
– alex87
Jan 1 at 10:58
I have solved it. It's not very elegant but I wrote a custom class and animation for each(10) possible color combinations.
– alex87
Jan 1 at 10:58
|
show 1 more 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%2f53993844%2fhow-to-pulse-text-color-dynamically-from-an-array-of-colors%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
do you want to change color each 1s?
– לבני מלכה
Jan 1 at 7:48
asyncfor something that never finishes? That doesn't seem to make any sense. async is so your code waits for asynchronous code before proceeding to the next line. You seem to understand that, so you should try it without async and post a different question if it doesn't work– Juan Mendes
Jan 1 at 7:51
@לבנימלכה something like that
– alex87
Jan 1 at 7:54
@JuanMendes right, I was thinking that async would start a new thread. I'm not very familiar with TS yet.
– alex87
Jan 1 at 7:55