Iterate endlessly over CSS styles in Angular 4

Question

Iterate endlessly over CSS styles in Angular 4

I'm looking to create a website background 'screensaver' by looping through an array of background URLs with a delay between switches.

Currently, I have the array stored in my .ts file and I am using the NgFor directive in my HTML. However, there are two main issues - there is no delay between image changes (resulting in the last one being displayed) and it does not continuously loop through the array.

In my .ts file:

  bgImgs = [
`url("/assets/img/friendship.jpeg")`,
`url("/assets/img/family.jpeg")`,
`url("/assets/img/health.jpeg")`,
`url("/assets/img/fatherson2.jpeg")`

In my .html file:

<div *ngFor="let bgImg of bgImgs">
  <div [style.backgroundImage]="bgImg" id="home" class="pt-5">

javascript html css angular

Answer 1

Answer №1

While there are potential alternative approaches using "rxjs," here is a basic solution:

export class App implements OnInit {
  private imageUrls: string[];
  private current: number = 0;
  currentImage: string;
  constructor() {
    this.imageUrls = [
      '//placehold.it/1280x720.jpg',
      '//placehold.it/1280x721.jpg',
      '//placehold.it/1280x722.jpg',
      '//placehold.it/1280x723.jpg'
    ];
    this.currentImage = this.imageUrls[0]
  }
  ngOnInit() {

    // Every second...
    Observable.interval(1000)
    .subscribe(x => {
      this.currentImage = `url(${this.imageUrls[this.current]})`;

      // Reset current to 0 if we're at the end of the array
      this.current == this.imageUrls.length - 1 ? (this.current = 0) : ++this.current;
    })
  }
}

If you wish to incorporate fading or other transitions, additional work may be necessary.

Plunk

Answer 2

While there are potential alternative approaches using "rxjs," here is a basic solution:

export class App implements OnInit {
  private imageUrls: string[];
  private current: number = 0;
  currentImage: string;
  constructor() {
    this.imageUrls = [
      '//placehold.it/1280x720.jpg',
      '//placehold.it/1280x721.jpg',
      '//placehold.it/1280x722.jpg',
      '//placehold.it/1280x723.jpg'
    ];
    this.currentImage = this.imageUrls[0]
  }
  ngOnInit() {

    // Every second...
    Observable.interval(1000)
    .subscribe(x => {
      this.currentImage = `url(${this.imageUrls[this.current]})`;

      // Reset current to 0 if we're at the end of the array
      this.current == this.imageUrls.length - 1 ? (this.current = 0) : ++this.current;
    })
  }
}

If you wish to incorporate fading or other transitions, additional work may be necessary.

Plunk

Iterate endlessly over CSS styles in Angular 4

Answer №1

Similar questions

jQuery Load - Oops! There seems to be a syntax error: Unexpected token <

Position a div in the center and add color to one side of the space

Unable to Trigger Jquery Scroll Event

JavaScript in IE/Edge may not run correctly if it is loaded from the cache

Is there a method in AngularJS to compel TypeScript to generate functions instead of variables with IIFE during the compilation process with gulp-uglify?

How can I extract information from an HTML table using AngleSharp?

Error: Unable to access the 'nom_gr' property of null - encountered in Chrome

"When implementing an Ajax autorefresh feature, ensure you pass the necessary variables consistently to update the content. Don't overlook

The useEffect function is failing to execute, leading to an issue with an undefined variable

Yarn combined with Webpack fails to execute post-compilation tasks

I am unable to pass a variable through a callback, and I cannot assign a promise to a

Tips for showing more rows by clicking an icon within an Angular 2 table

pictures showcased in a grid that dance and sway

Add more functionality to the server.js script

javascript implementing number formatting during keyup event

What causes the data to flicker between the old and new values when the state is updated in ReactJS?

Extracting a precise data point stored in Mongo database

AngularJS property sorting: organize your list by name

Implementing AJAX mysqli interaction in PHP following the MVC design pattern

Transmit an array using a GET Request