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

Is there a way to remove a specific row from both an HTML table and a MySQL database using CodeIgniter?

Error: Reactjs - Attempting to access the 'name' property of an undefined variable

The reason behind the clickable issue with my duplicate <ion-select>

What is the most efficient method for embedding a YouTube video into a <video> tag using React?

Unable to scroll down an overlay window using Selenium with Python

Error code 0 occurs in jQuery AJAX when there is an issue with the communication between the client

Is it possible to refresh the chat-box using PHP?

Unraveling functions from a JavaScript promise in a web application using ExpressJS and NeDB

What is the best way to allow my limit to be as greedy as possible?

Troubleshooting issues with the IE flexible box model functionality

What is the method for showing the number of characters in a string within a textfield by utilizing events in Angular

I am struggling to display an array of objects retrieved from the server in the UI using AngularJS

Guide on creating a function in PHP that takes a string input and outputs it in JSON format

Initial page load experiencing issues with paroller.js functionality

The PHP page is not receiving the variable passed through AJAX

Error occurred when attempting to fetch data from a nested JSON object in React/Next.JS

What is the best way to create a grid item that maximizes the available space in ReactJS Material-UI?

Is it possible to utilize the useRef Hook for the purpose of storing and accessing previous state values?

Customize Bottom Navigation Bar in React Navigation based on User Roles

The error code TS2345 indicates that the argument '{ read: typeof ElementRef; }' cannot be assigned to the parameter '{ read?: any; static: boolean; }'