CODEWITHSUNDEEP
javascriptangularangular6
Gautama
Gautama

Reputation: 65

Angular 6 component reacts to setTimeout from other component

I am writing a site in angular 6. I have two components, slideshow and product-list.

In my slideshow component I have a setTimeout.

public carousel() {
  var i;
  var y = document.getElementsByClassName("mySlides");
  for (i = 0; i < y.length; i++) {
     y[i].setAttribute("style", "none"); 
  }
  this.curIndex++;
  if (this.curIndex > y.length) {this.curIndex = 1}   
  y[this.curIndex-1].setAttribute("style", "display:block;");
  this.timer = setTimeout(() => {
    this.carousel();
  }, 4000);
}

It changes the images from my slideshow. As you can see, it happens every 4 seconds.

Now so far, this is intended behavior.

In my product-list component, I have a random color generator.

getBackground (bg) {
    const color = this.color(0.5);
    return this._sanitizer.bypassSecurityTrustStyle(`
    background: -moz-linear-gradient(top, ${color} 0%, ${color} 100%), url(${bg}) repeat 0 0;

background: -moz-linear-gradient(top, ${color} 0%, ${color} 100%), url(${bg}) repeat 0 0;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,${color}), color-stop(100%,${color})), url(${bg}) repeat 0 0;

background: -webkit-linear-gradient(top, ${color} 0%,${color} 100%), url(${bg}) repeat 0 0;

background: -o-linear-gradient(top, ${color} 0%,${color} 100%), url(${bg}) repeat 0 0;

background: -ms-linear-gradient(top, ${color} 0%,${color} 100%), url(${bg}) repeat 0 0;

background: linear-gradient(to bottom, ${color} 0%,${color} 100%), url(${bg}) repeat 0 0;
    `);

  }

This returns the style with a random color gradient.

Here it gets called, in my product-list component

 <div class="rows"  style="text-align: center">
<div *ngFor="let product of products; let i = index">


    <div  class="col-md-4 col-xs-6 clear product-list-item" title="{{product.product_name}}"  routerLink="/product/{{product.product_id}}" [style]="getBackground('https://financialtribune.com/sites/default/files/field/image/17january/04-zs-ice-cream_66-ab.jpg')">
    <div class="product-list-item-title">
      <h1>{{product.product_name}}</h1>

    </div>
    <br>
    <img class="product-list-item-image" src={{product.product_image_url}}> &nbsp;
    <div class="product-list-item-description">
      <h3>{{product.product_description}}</h3>

    </div>

    <div class="clear visible-lg" *ngIf="(i + 1) % 6 == 0"></div>
    <div class="clear visible-md" *ngIf="(i + 1) % 4 == 0"></div>
    <div class="clear visible-sm" *ngIf="(i + 1) % 3 == 0"></div>
    <div class="clear visible-xs" *ngIf="(i + 1) % 2 == 0"></div>

  </div>




</div>
</div>

But the problem is, that every time the slideshow changes, my colors change as well.

How can I make it so it doesn't change anything? The colors change exactly when the slideshow changes to a new picture, so I assume it is because of the settimeout.

Upvotes: 2

Views: 598

Answers (1)

Vega
Vega

Reputation: 28708

As it is written, getBackground() should be called each time there is a change on the element. But if you put style to a property value and initiate it in ngOnInit() it would not change. Create an array that would hold products colors:

<div *ngFor="let product of products; let i = index">
...

   <div  class="col-md-4 ...[style]="bg[i]">
    ...

Typescript:

bg = [];
ngOnInit(){
    this.products.map(item => this.bg.push(this.getBackground('https://financialtribune.com/sites/default/files/field/image/17january/04-zs-ice-cream_66-ab.jpg'))
    }
}

Upvotes: 2

Related Questions