URL Encoder for Angular Developers

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-url-encode',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="input" placeholder="Enter text..." />
    <button (click)="toggle()">{{ mode }}</button>
    <pre>{{ result }}</pre>
  `,
})
export class UrlEncodeComponent {
  input = ''; mode: 'Encode' | 'Decode' = 'Encode';
  toggle() { this.mode = this.mode === 'Encode' ? 'Decode' : 'Encode'; }
  get result() {
    try { return this.mode === 'Encode' ? encodeURIComponent(this.input) : decodeURIComponent(this.input); }
    catch { return 'Invalid input'; }
  }
}