Category: CSS/CSS3

I came across the following progress indicator for jquery and wanted to try to recreate it as an angular component.

<ol class="ProgressBar">
    <li #lis class="ProgressBar-step" *ngFor="let step of steps; let i = index">
      <svg class="ProgressBar-icon"><use attr.href="{{svgUrl}}"/></svg>

      <span class="ProgressBar-stepLabel">{{step}}</span>
    </li>
</ol>

The only modifications done to the HTML were adding a template variable #lis and iterating on the steps to be displayed.

xlink:href has been deprecated so it was replaced with attr.href and the svg was saved in a file and the path to the file is passed to the component. Styling is pretty much identical.

import { Component, OnInit } from '@angular/core';
import { ElementRef, QueryList, ViewChildren, Renderer2} from '@angular/core';
import { Input } from '@angular/core';

@Component({
  selector: 'app-progress-indicator',
  templateUrl: './progress-indicator.component.html',
  styleUrls: ['./progress-indicator.component.scss'],
})
export class ProgressIndicatorComponent {

  @Input() public steps: string[];
  @Input() public svgUrl:string;

  @ViewChildren('lis') lis: QueryList<ElementRef>;

  private elems: ElementRef<any>[];

  constructor(private renderer: Renderer2) {
  }

  advance() {
    this.elems = this.lis.toArray();
    var count = this.lis.filter(x => x.nativeElement.classList.contains('is-current')).length;
    if (count > 0) {
      let index = 0;
      for (let i = 0; i < this.elems.length; i++) {
        if (this.elems[i].nativeElement.classList.contains('is-current')) {
          index = i;
          break;
        }
      }
      if (index < this.elems.length) {
        if(index <  this.elems.length-1){ // if last one done remove current
             this.renderer.removeClass(this.elems[index].nativeElement, "is-current");
        }
        this.renderer.addClass(this.elems[index].nativeElement, "is-complete");
      } 
      if (index +1 < this.elems.length) {
        this.renderer.addClass(this.elems[++index].nativeElement, "is-current");
      }
    } else {
      this.renderer.addClass(this.lis.first.nativeElement, "is-current");
    }
  }

  previous(){
    this.elems = this.lis.toArray();
    var count = this.lis.filter(x => x.nativeElement.classList.contains('is-current')).length;
    if (count > 0) {
      let index = 0;
      for (let i = 0; i < this.elems.length; i++) {
        if (this.elems[i].nativeElement.classList.contains('is-current')) {
          index = i;
          break;
        }
      }
      if (index >= 0) {
         this.renderer.removeClass(this.elems[index].nativeElement, "is-current");
         this.renderer.removeClass(this.elems[index].nativeElement, "is-complete");
      }
      if(index > 0){
         this.renderer.addClass(this.elems[--index].nativeElement, "is-current");
        this.renderer.removeClass(this.elems[index].nativeElement, "is-complete")
      }
    }
  }
}

The component uses @ViewChildren to access the li tags and Renderer2 to do safe modifications to the classes of each element.

 <app-progress-indicator 
     [steps]='steps'  
     [svgUrl]='"./assets/svg/checkmark-bold.svg#checkmark-bold"'>
</app-progress-indicator>

Usage is as above steps should be an array of strings.

  public steps = ["Test","Review","Result","Mistakes"]; 

Note that QueryList is not accessible by index nor one could iterate on it for ES5 so toarray() was used to get things done. ES6 makes it possible to iterate directly.