Updating Angular 2 template based on specific conditions of model values

Question

Updating Angular 2 template based on specific conditions of model values

I want to update a view only when the total votes reach a number that is a multiple of ten. I am incrementing a random element in an array called rows every 10 milliseconds, ultimately adding up to the total number of votes. Is there a simple way in angular 2 to bind and show model value in a template only when a specific condition is met?

Template:

<div>
  <ul class="list">
    <li class="item" *ngFor="let row of rows">{{ row }}</li>
  </ul>
</div>
<h3 class="title">Total number of votes: {{ votes }}</h3>

angular typescript

Answer 1

Answer №1

The question is unclear to me. You have the option to utilize two variables, namely rows and rowsDisplays.

@Component({
  selector: 'app-home',
  template: `
  <div>
  <ul class="list">
    <li class="item" *ngFor="let row of rowsDisplay">{{ row }}</li>
  </ul>
</div>
  `
})
export class HomeComponent implements OnInit {

  rowsDisplay:any[]=[];
  rows:any[]=[];

  constructor() { }
  ngOnInit() {
    setInterval(()=>{
      this.rows.push(new Date());
      if (this.rows.length%10==0) //or another condition
        this.rowsDisplay=[].concat(this.rows); //you can't do this.rowsDisplay=this.rows, 
                            //because then this.rowsDisplay will be this.rows

    },1000);
  }
}

Answer 2

The question is unclear to me. You have the option to utilize two variables, namely rows and rowsDisplays.

@Component({
  selector: 'app-home',
  template: `
  <div>
  <ul class="list">
    <li class="item" *ngFor="let row of rowsDisplay">{{ row }}</li>
  </ul>
</div>
  `
})
export class HomeComponent implements OnInit {

  rowsDisplay:any[]=[];
  rows:any[]=[];

  constructor() { }
  ngOnInit() {
    setInterval(()=>{
      this.rows.push(new Date());
      if (this.rows.length%10==0) //or another condition
        this.rowsDisplay=[].concat(this.rows); //you can't do this.rowsDisplay=this.rows, 
                            //because then this.rowsDisplay will be this.rows

    },1000);
  }
}

Answer 3

Answer №2

To simplify and maintain a neat "Angular" structure, it is recommended to utilize a basic Pipe.

Here is an example of how your custom pipe could be structured:

@Pipe({name: 'ten'})
export class MultiplesOfTenPipe implements PipeTransform {
  transform(value: number): number {
    return Math.floor(value / 10) * 10;
  }
}

This approach will only adjust the value of votes in the template or view if it is evenly divisible by 10.

For a demonstration, you can visit this link: https://stackblitz.com/edit/angular-abc123

Answer 4

To simplify and maintain a neat "Angular" structure, it is recommended to utilize a basic Pipe.

Here is an example of how your custom pipe could be structured:

@Pipe({name: 'ten'})
export class MultiplesOfTenPipe implements PipeTransform {
  transform(value: number): number {
    return Math.floor(value / 10) * 10;
  }
}

This approach will only adjust the value of votes in the template or view if it is evenly divisible by 10.

For a demonstration, you can visit this link: https://stackblitz.com/edit/angular-abc123

Updating Angular 2 template based on specific conditions of model values

Answer №1

Answer №2

Similar questions

The Angular project failed to run properly following the ng build command

What is the best way to ensure a div is always scrollable?

Having trouble getting code hints to function properly with the official TypeScript plugin on Sublime Text 3

Next.js page freezes when Axios request is made causing the tab to become unresponsive

Guide on creating a Typescript function with a strongly typed argument

What is the method for making an interface extension from a type as optional?

How can I show the initial three digits and last three digits when using ngFor loop in Angular?

Using Angular DI to inject a specific token value into a provider factory

"Trouble accessing the URL" error encountered when trying to load templateUrl for dynamic components in Angular 2

Angular 2 Endgame: HostBinding feature no longer functional

Initiating a GET request to retrieve the file generated by the server

Tips for resolving this unhandled error in React TypeScript

Encountering issues when launching Node.js application using PM2 and ts-node in production mode

What are the steps to set up tsline in settings.json file?

Angular 4 file upload verification: Ensuring safe and secure uploads

Alternative to bower_concat for NPM

Performing a test on API GET Request with Playwright

How can I use "Lite-Server" with NPM start to showcase my index.cshtml file on the browser?

Building a REST API with Angular Universal: A Comprehensive Guide

Utilize the URL path entered by a user to navigate through the page