I have an array of items. a = ['apple', 'mango', 'grape', 'papaya', 'banana', 'cucumber']. There is an input element with a placeholder as select from fruits (after fruits it should show array elements randomly or in loop infinite no of times and placeholder fruit should change every two seconds.)

eg. select from fruits apple again after 2 sec it should show select from fruits mango again after 2 sec select from fruits grape. so I want to implement a placeholder that changes every two seconds infinite no of times. This input element is in the header component of the home page. Note: This should be in angular 8+.

I tried using setInterval in ngafterviewinit I called like this

TIME_INTERVAL = 2000;

ngAFterViewInIt(){ this.timerId = window.setInterval(() => this.changePlaceholder, this.TIME_INTERVAL);}

      RANDOM_NUMBER: number = 8;
  changePlaceholder(count: number = 0) {
    let randomNumber = Math.floor(Math.random() * this.RANDOM_NUMBER);
    count = (count + randomNumber) % this.globalSearchItems.length;
    this.globalSearch.nativeElement.placeholder = this.searchType + ' ' + this.globalSearchItems[count];
  }



 ngOnDestroy(){
if(!!this.timedId){
    clearInterval(this.timerId);
    }}

searchType = 'select from fruits'

Now I want to append my item in front of fruits and change it every 2 sec randomly or in a loop doesn't matter.

html tag

 <input placeholder = {{searchType}}/>

The pb with this code is when I first login to the application the placeholder is not changing but if I click on any other component and then again come back to home component then this is working. so in short when I login first time/newly the setInterval is not calling callback function changePLaceholder

functionality should be like this https://dribbble.com/shots/9530283-Daily-UI-022-Search