Back
Angular (Modern) Compiler
Clear
Run
Template
<div class="card"> <h1>{{ title }}</h1> <p>Count: {{ count }}</p> <button (click)="increment()">Increment</button> <ul> <li *ngFor="let task of tasks">{{ task }}</li> </ul> </div>
Component Class
constructor() { this.title = "Angular 15 Playground"; this.count = 0; this.tasks = ["Plan UI", "Wire data", "Ship"]; } increment() { this.count += 1; }
Styles
body { margin: 0; font-family: Arial, sans-serif; background: #f5f5f5; } .card { max-width: 520px; margin: 30px auto; background: white; padding: 24px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } button { margin-top: 8px; padding: 8px 14px; border: none; border-radius: 6px; background: #dd0031; color: white; cursor: pointer; }
Output