Angular Directive for making battery Icon from font awesome change by the percentage #angular #directive #battery-animation

BatteryIconDirective.ts

import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';

@Directive({
  selector: '[batteryIcon]'
})
export class BatteryIconDirective implements AfterViewInit {

  private _batteryPercentage: number;

  @Input()
  get batteryPercentage(): number {
    return this._batteryPercentage;
  }

  set batteryPercentage(value: number) {
    this._batteryPercentage = value;

    this.setBatteryPercentage();
  }

  private _activeBatteryIcon = true;

  @Input()
  get activeBatteryIcon(): boolean {
    return this._activeBatteryIcon;
  }

  set activeBatteryIcon(value: boolean) {
    this._activeBatteryIcon = value;
    this.setBatteryPercentage();
  }

  constructor(private svgBatteryPathEl: ElementRef) {
  }

  ngAfterViewInit(): void {
    this.setBatteryPercentage();
  }

  /**
   * Set the battery percentage in the svg
   */
  setBatteryPercentage = () => {
    if (this.isOkSettingBattery()) {
      Object.assign(this.svgBatteryPathEl.nativeElement.attributes.d, {value: this.calcBatteryPercentage(this._batteryPercentage)});
    }
  };

  private isOkSettingBattery(): boolean {
    return this._activeBatteryIcon &&
      this._batteryPercentage >= 0 &&
      this.svgBatteryPathEl &&
      this.svgBatteryPathEl.nativeElement &&
      this.svgBatteryPathEl.nativeElement.attributes;
  }

  /**
   * Calculate battery percentage
   * @param battery the battery
   * @return return the path
   */
  private calcBatteryPercentage(battery: number): string {
    battery = (battery && (battery >= 0 || battery <= 100)) ? battery : 0;
    // tslint:disable-next-line:max-line-length
    return 'M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-48 96H96v128h' + (battery * 416 / 100).toString() + 'V192z';
  };

}

example.html

<svg aria-hidden="true"
     data-prefix="fas"
     data-icon="battery-empty"
     class="svg-inline--fa fa-battery-empty fa-w-20"
     role="img"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 640 512">
    <path appBatteryIcon [batteryPercentage]="<battery-percent>" d=""></path>
</svg>

• Add animation of the battery icon