Diff Checker for Angular Developers

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import * as Diff from 'diff';

@Component({
  selector: 'app-diff',
  standalone: true,
  imports: [FormsModule],
  template: `
    <div style="display:grid;grid-template-columns:1fr 1fr">
      <textarea [(ngModel)]="a" rows="8"></textarea>
      <textarea [(ngModel)]="b" rows="8"></textarea>
    </div>
    <pre><ng-container *ngFor="let c of diff">
      <span [style.color]="c.added ? 'green' : c.removed ? 'red' : ''">{{ c.value }}</span>
    </ng-container></pre>
  `,
})
export class DiffComponent {
  a = ''; b = '';
  get diff() { return Diff.diffLines(this.a, this.b); }
}