QList
HOME
WEST BENGAL
▼
মাধ্যমিক সাজেশান ২০২৭
📚 বাংলা (Bengali)
📖 English
🌍 ভূগোল (Geography)
📜 ইতিহাস (History)
🧬 জীবনবিজ্ঞান (Life Science)
Other Classes
Class 6
Class 7
Class 8
Class 9
Class 10
🎯 Career After 10th
CBSE
▼
Class 9
Class 10
🎓 JEE Exam Guide
💼 MBA Exam Guide
🩺 Medical Exam Guide
ENGLISH
▼
📝 English Grammar
📖 English Grammar (Bangla)
🗣️ Spoken English
TOOLS
▼
🛠️ Free Online Tools
🧮 Financial Calculators
💻 Code Playgrounds
CONTACT
Home
Playground
Angular
🅰️
Angular Playground
Component Testing Environment
Reset
Examples:
Basic
*ngFor
*ngIf
Angular Component (TypeScript)
Angular 17
Standalone
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...