🅰️Angular Playground

Component Testing Environment

Examples:

Angular Component (TypeScript)

Angular 17Standalone

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="container">
      <h1>{{ title }}</h1>
      <p>Count: {{ count }}</p>
      <button (click)="increment()">Increment</button>
      <button (click)="decrement()">Decrement</button>
      
      <div class="list">
        <h2>Items:</h2>
        <ul>
          <li *ngFor="let item of items">
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
  `,
  styles: [`
    .container {
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    
    h1 {
      color: #dd0031;
    }
    
    button {
      padding: 10px 20px;
      margin: 5px;
      background-color: #dd0031;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
    }
    
    button:hover {
      background-color: #c3002f;
    }
    
    .list {
      margin-top: 20px;
    }
    
    ul {
      list-style-type: none;
      padding: 0;
    }
    
    li {
      padding: 8px;
      margin: 5px 0;
      background-color: #f0f0f0;
      border-radius: 4px;
    }
  `]
})
export class AppComponent {
  title = 'Angular Playground';
  count = 0;
  items = [
    { id: 1, name: 'Learn Angular' },
    { id: 2, name: 'Build Projects' },
    { id: 3, name: 'Have Fun!' }
  ];
  
  increment() {
    this.count++;
  }
  
  decrement() {
    this.count--;
  }
}

💡 Tip: Use standalone components API📚 Supports: CommonModule, FormsModule

Live Preview

Loading Angular environment...