Cycle through text

cycle through text css
javascript text animation
html toggle button with text
rotating text css
jquery scroll through list items
text change animation css
text flip animation css
text loop

I'm trying to create an HTML tag that will cycle through an array of words, displaying one word at a time, but changing every n seconds.

For example, let's say I have an array of ["one", "two", "three"] and a span tag. The span tag's text would be one for n seconds, then change to two, then change to three, then change to one, etc...

Here's my attempt so far:

My app.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html',
})

export class AppComponent implements OnInit {
  ngOnInit() {
    this.changeName();
  } 

  words: string[] = [
    "one",
    "two",
    "three"
  ];

  Wording: string = this.words[0];

  changeName():void {
    this.words.unshift(this.words[this.words.length - 1]);
    this.words.pop();
    this.Wording = this.words[0]
    var x = 5;  

    setTimeout(this.changeName, x*1000);
  }
}

app.component.html:

<span id="text-change">{{ Wording }}</span>

The above implementation does not change the text in the span tag, and has an error that words variable is undefined:

ERROR TypeError: Cannot read property 'unshift' of undefined
    at push../src/app/header/header.component.ts.HeaderComponent.changeName (header.component.ts:24)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3645)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2054)

So my questions are: 1) First and foremost; is there a better way to do this? 2) Why is the words variable "disappearing"?

Using Observables would be an easier option for you. The following would work and is much cleaner in the end.

private words: string[] = ['foo', 'bar', 'baz'];

rotateWords() {
  const source = Rx.Observable.interval(1000).take(this.words.length);
  const sub = source.finally(this.rotateWords).subscribe(i => console.log(this.words[i]));  
}

How to loop changing text in HTML/Javascript?, How would I use HTML/Javascript to make text change, looping through a predetermined sequence? Kind of like this, but in text form, instead of  Cycle through each line in a text file with variables, batch. I am trying to loop through each line in text file and use the contents of the line as a variable. So far I have: However they contain: Echo1.txt: "". Echo2.txt: ECHO is on. It is however looping through the files, it is just not setting the variable.

2) The words array is disappearing because you are using the pop method, which removes elements from the array. Documentation here.

1) I believe that a better way of achieving this is by using and maintaining an index yourself, as such:

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'my-app',
    styleUrls: ['./app.component.scss'],
    templateUrl: './app.component.html',
})

export class AppComponent implements OnInit {
    ngOnInit() {
        this.changeName(0);
    } 

    words: string[] = [
        "one",
        "two",
        "three"
    ];

    var x = 5;

    Wording: string = this.words[0];

    changeName(index):void {
        this.Wording = this.words[index++];

        if (index == this.words.length) {
            index = 0;
        }

        return setTimeout(function () {
            this.changeName(index)
        }, x*1000);
    }
}

Infinite Text Rotator with Vanilla JS and CSS3, Word Cycle is a vanilla JavaScript library to cycle through an array of words with a CSS3 powered fadeIn animation. Typically, a client quote will have three pieces of text: the client’s name, where they’re from and what they said. With this in mind, we can create a quote container that has three different pieces.

In your ts file:

    words:any[]=["one", "two", "three"];

    word:string="";
    currentIdx:number =0;
    x=5;

    ngOnInit(){
      setInterval(()=>{
        this.rotateWords()
      },this.x*1000)
      }

  rotateWords(){

    if(this.currentIdx>=this.words.length){
      this.currentIdx=0;
    }

          this.word=this.words[this.currentIdx];
          this.currentIdx++
  }

In your html:

<p>{{word}}</p>

Cycle Through a List, This code will cycle through an unordered list with an ID of 'cyclelist'. Can be used on any element with children. Replace "ul#cyclelist li" with the. This code will cycle through an unordered list with an ID of ‘cyclelist’. Can be used on any element with children. Replace “ul#cyclelist li” with the elements you want to cycle through.

can use setInterval and logic like this

changeName():void { 

  if(count === this.words.length){
    count = 0
  }
  this.Wording = this.words[count++] 
}

var x = 5; 
var count = 0;
setInterval(this.changeName, x*1000);

Demo

function changeName() { 
    
      if(count === words.length){
        count = 0
      }
      console.log(words[count++]) 
 }
  var words = [
    "one",
    "two",
    "three"
  ];
    var x = 5; 
    var count = 0;
    setInterval(changeName, x*1000);

How to quickly cycle through text? : Adobe After Effects, Using After Effects 7.0, I want to create a comp that cycles through about 60 different text words in about 3 seconds. I suppose I could achieve  Have a text file that has the computer names. Have a batch file that will copy file A to each of the computers. Sometimes in different directories, so I can modify the batch file to suit. From what I read, you would have a line like for /f %%i (computer.txt) do xcopy %%i.

Cycle Through Client Quotes With CSS Keyframes, To showcase the versatility of this project, I decided to fill my text with the last words of a few famous people. A little morbid, but as a placeholder  Cycle Through Multiple Clipboard Items With Ease Using RClipStep. The Windows Clipboard, one of the most extensively used features of Windows, makes use of your PC’s RAM to store copied items on a temporary basis.

.each(), console.log( index + ": " + $( this ).text() ); Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection  Cycle through overlapping objects to select them. When you have objects overlapping on a slide, it may be difficult to select the object you want. For example, you may find yourself selecting the text placeholder when you want to select an image.

Cycle Through Fonts, Double-click on any text layer's thumbnail in the layer's panel to select the text, then press Ctrl H (Mac: Command H) to hide the selection and in  will loop through each letter in the string. Loop Through Each Character in a String – Alternative. Read Every Character in a String: This example reads every character in a string from left to right and returns the result in a message box. It makes use of the Mid function.