How to Add Counter in Angular 6

How to add counter in angular 6?

why not simply use the length

<span class="comments_count">{{comments.length}}</span>

Adding a counter on html file in Angular

You can add index to the *ngFor:

<div *ngFor="let res of restaurants; let i = index">
    <p> It is index of restaurants {{ i }} </p>
    <p> It is counter of restaurants {{ i + 1 }} </p>
</div>

UPDATE:

You can create a variable counter:

counter = this.restaurants.length;

this.searchForm.controls['str'].valueChanges.subscribe((value) => {
  this.searchString = value;      
  this.counter = this.restaurants.filter(f => 
       f.Name.toLowerCase().includes(value.toLowerCase() 
       || this.searchLength == false) 
       && (f.Address == this.printedOption || this.checked == false)).length;
  if (this.searchString.length > 0) {
    this.searchLength = true;
  }
  else { this.searchLength = false }

});

HTML:

<div *ngFor="let res of restaurants; let k = index;">
    <!-- I want to show the count after this filter 
       (and the number of all restaurants if no filter is done) -->

    <li *ngIf="(res.Name.toLowerCase().includes(searchString?.toLowerCase()) 
        || searchLength == false) 
        &&(res.Address == printedOption || checked == false)"
        class="nav-item has-treeview menu-open">        
    <p>counter: {{ counter }}</p>
        <a class="nav-link active">
            <div>{{res.Name}}</div>
        </a>
    </li>
</div>

A work example at stackblitz.com

Angular 6 how to get count of the particular column based on same value from an array of object

Actually, You are adding the progress value in count. Please try this..

ngOnInit(){
   let progress_count=0;
   let completed_count=0;
   this.array.forEach((item, index) => {
   if (item.progress == 100) {
    progress_count++;
   } else {
    completed_count++;
   }
});
   console.log('Progress count :',progress_count);
   console.log('Completed count :',completed_count);
}

And use progress_count and completed_count in your HTML

How to count characters in keyup in angular 6

You can count character by
box.value.length
or
box.value?.length

? after the property will check for undefined..

Increment counter for nested for loop in Angular

Why don't you flatten the array in code and traverse on top of flattened array.

It would be simpler that way:

const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());

Approach 2:

You can write 2 functions to get count and object :

  getBlade(i,j) {
    return this.adjustments[i].blades[j];
  }

 getCount(i: number, j: number) {
    let len= 0;
    for(let x = 0; x<i; x++) {
      len = len + this.adjustments[x].blades.length;
    } 
    return len + (j+ 1);
  }

And then in HTML you can lookup for either object or the count :

<tr *ngFor="let adjustment of adjustments; let i = index">
  <td *ngFor="let blade of adjustment.blades; let j = index">
    <span> Counter = {{ getCount(i,j) }} : {{getBlade(i,j)}} , 
    </span>
  </td>
</tr>

increment a value counter in a nested for loop in Angular

I tried to work around with the counter issue, added CSS counters but you will have to manage the design.

<table class="mainTable">
    <tr>
      <td width="20%">SR. No</td>
      <td width="20%">Income No</td>
      <td width="20%">Discount</td>
      <td width="20%">Name </td> 
      <td width="20%">Code</td> 
    </tr>
    <tr *ngFor="let sensor of ProductMain; let i = index">
      <td colspan="5">
        <table border="1" width="100%">
            <tr *ngFor="let lot of sensor.income; let i = index">
              <td width="20%" class="counter"><!-- Counter via CSS --></td>
              <td width="20%">{{lot.incomeNo}}</td>
              <td width="20%">{{lot.discount}}</td>
              <td width="20%">{{sensor.project.code}}</td>
              <td width="20%">{{sensor.project.project}}</td>
            </tr>
        </table>
      </td>
    </tr>
  </table>

in css file add:

.mainTable{
    counter-reset: section;
}
.counter::before {
    counter-increment: section;
    content: counter(section) ") ";
}

Count words dynamically as users types in angular

You should use keydown event and use ViewChild to get text in text area

Updated: if you want to restrict only 100 words, you can add [attr.disabled]="words >100 ? '' : null" to disable textarea

HTML

 <textarea [attr.disabled]="words >100 ? '' : null" (keydown)="wordCounter()" #text id="wmd-input" name="post-text" 
class="wmd-input s-input bar0 js-post-body-field processed" data-post-type-id="2" cols="92" rows="15" tabindex="101" data-min-length="" oncopy="return false;" onpaste="return false;" oncut="return false;"></textarea>

    <div>Words:<span id="wordCount">{{ words }}</span></div>

TS

export class AppComponent {
  wordCount: any;

  @ViewChild("text") text: ElementRef;
  words: any;
  wordCounter() {
    //alert(this.text.nativeElement.value)
    this.wordCount = this.text ? this.text.nativeElement.value.split(/\s+/) : 0;
    this.words = this.wordCount ? this.wordCount.length : 0;
  }
}

Demo https://stackblitz.com/edit/angular-word-count

---

Related Topics