2

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

Alok Agase
  • 29
  • 4

1 Answers1

0

You are not Binding to the placeholder of the input tag. Try doing something like this:

Example

I didn't have much time to get everything to work, this is a very basic version of what you're trying to achieve. :D

Aizaz
  • 33
  • 7
  • didn't work. Working only when I refresh the website after login. On login not working. and also the same component is available in approx 50 components so looking for something which is limited to components. – Alok Agase Jan 14 '22 at 08:27
  • https://stackblitz.com/edit/angular-rgjn4s?file=src%2Fapp%2Fapp.component.ts try this. it's working on stackblitz. I don't see why it won't work with you. – Aizaz Jan 14 '22 at 10:25