Online Angular Compiler

Select File

app.component.ts Editor

app.module.ts Editor

main.ts Editor

Toggle Console

Enable Smart Editor

About Angular Compiler

Our online Angular Playground is a lightweight application that allows you to write, run, and test Angular framework code directly in your browser. This lightweight yet powerful platform offers real-time code execution, allowing developers to see the results instantly. Whether you’re a beginner learning Angular or a seasoned developer prototyping applications, this tool is designed to enhance your coding experience.

Key Features

Powered by Modern Tools: Utilizes the TypeScript library and Rollup.js bundler for efficient code compilation.
Real-Time Execution: Write and execute Angular code directly in your browser without any installations.
Sandbox Environment: Test your code in a secure environment without affecting your local setup.
Support for Libraries: Easily add external libraries using <script> tags to extend Angular’s core capabilities. Practice using Angular’s HTTP client, animations, and other modules by including browser-compatible builds.
Code Persistence: Save your projects in the browser’s local storage for easy access and updates.
Privacy & Security: No data is sent to our servers, ensuring complete privacy and safety.
Mobile-Friendly: Fully functional on desktops, tablets, and smartphones.
Built for All: Ideal for students, teachers, and professionals working on Angular projects.

How to Use Angular Playground

The Angular Playground includes five editors for different purposes:

index.html: Load external libraries compatible with browsers (e.g., UMD or IIFE builds) using <script> tags.
index.css: Add custom styles for your web application or test responsive designs and CSS concepts in real time.
main.ts: This is the main entry point for your Angular application.
app.module.ts: Define the structure, components, services, and other features of your Angular application in this editor.
app.component.ts: Write the logic and templates for your Angular components here.

Steps to Execute Code:

Write your code in the respective editors.
Click the Run button to compile and render the output.
If an error disrupts the execution environment, use the Reset button to restore the sandbox environment.
Utilize the Save button to store your code in the browser’s local storage for future reference.
Use the Clear button to delete your code from local storage when no longer needed.

About Angular

Angular is a free, open-source web application framework maintained by Google. It is widely used to build dynamic single-page applications (SPAs) that are robust, scalable, and easy to maintain. Designed with modern web development in mind, Angular simplifies the process of building interactive and high-performance web applications.

Key Features of Angular

Component-Based Architecture: Angular uses a modular approach where the application is divided into encapsulated, reusable components. Each component handles a specific piece of functionality, making the codebase easier to maintain and scale.
Two-Way Data Binding: Angular provides seamless synchronization between the model (data) and the view (UI). Changes in the UI are instantly reflected in the model and vice versa, reducing boilerplate code and improving efficiency.
Dependency Injection: Angular’s built-in dependency injection system simplifies the management of services and dependencies.
Directives: Angular extends HTML functionality through directives, which are custom HTML attributes.
Powerful Routing System: Angular’s router enables the creation of seamless navigation paths for single-page applications.

Angular Examples

1. Simple Data Binding (Two-Way Binding)

First, install the browser-compatible version of the Angular forms using a <script> tag. Insert the following code in the index.html editor to include the Angular forms package.

<script src="https://cdn.jsdelivr.net/npm/@angular/forms@12.2.17/bundles/forms.umd.js"></script>
<app-root></app-root>

Next, select the app.component.ts file and insert the following code.

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

@Component({
    selector: 'app-root',
    template: `
        <h1>Two-Way Data Binding</h1>
        <input [(ngModel)]="message" placeholder="Type something..." />
        <p>You typed: {{ message }}</p>
    `,
    styles: ['input { margin-bottom: 10px; }']
})

export class AppComponent {
    message = '';
}

Finally, select the app.module.ts file and add the following code.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, FormsModule],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule {}

2. Using Directives (ngIf and ngFor)

Select the app.component.ts file and insert the following code.

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

@Component({
    selector: 'app-root',
    template: `
        <h1>Using Directives</h1>
        <button (click)="toggleList()">Toggle List</button>
        <ul *ngIf="showList">
            <li *ngFor="let item of items">{{ item }}</li>
        </ul>
    `,
    styles: ['button { margin-bottom: 10px; }']
})

export class AppComponent {
    showList = true;
    items = ['Angular', 'React', 'Vue'];

    toggleList() {
        this.showList = !this.showList;
    }
}

3. Event Binding

Select the app.component.ts file and insert the following code.

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

@Component({
    selector: 'app-root',
    template: `
        <h1>Event Binding Example</h1>
        <button (click)="incrementCounter()">Click Me</button>
        <p>Button clicked {{ counter }} times</p>
    `,
    styles: ['button { margin: 5px; }']
})

export class AppComponent {
    counter = 0;

    incrementCounter() {
        this.counter++;
    }
}

4. HTTP Client Example

First, install the browser-compatible version of the Angular HttpClient package using a <script> tag. Insert the following code in the index.html editor to include the Angular HttpClient package.

<script src="https://cdn.jsdelivr.net/npm/@angular/common@12.2.17/bundles/common-http.umd.js"></script>
<app-root></app-root>

Next, select the app.component.ts file and insert the following code.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-root',
    template: `
        <h1>HTTP Client Example</h1>
        <button (click)="fetchData()">Fetch Data</button>
        <ul>
            <li *ngFor="let post of posts">{{ post.title }}</li>
        </ul>
    `
})

export class AppComponent {
    posts: any[] = [];

    constructor(private http: HttpClient) {}

    fetchData() {
        this.http.get<any[]>('https://jsonplaceholder.typicode.com/posts')
            .subscribe(data => this.posts = data.slice(0, 5));
    }
}

Finally, select the app.module.ts file and add the following code.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, HttpClientModule],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule {}

5. Angular Animations Example

To use Angular animations, you need to include the browser-compatible version of the Angular animations library using a <script> tag. Add the following code to the index.html editor to include the Angular animations package. Ensure that the order of <script> tags is correct to properly resolve package dependencies.

<script src="https://cdn.jsdelivr.net/npm/@angular/animations@12.2.17/bundles/animations.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/animations@12.2.17/bundles/animations-browser.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/platform-browser@12.2.17/bundles/platform-browser-animations.umd.js"></script>
<app-root></app-root>

Next, select the app.component.ts file and insert the following code.

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
    selector: 'app-root',
    template: `
        <h1 @fadeIn>Angular Animations Example</h1>
        <button (click)="toggle()">Toggle Fade</button>
        <div [@fadeInOut]="state" class="box"></div>
    `,
    animations: [
        trigger('fadeIn', [
            state('void', style({ opacity: 0 })),
            transition(':enter', [
                animate('1s ease-in', style({ opacity: 1 }))
            ])
        ]),
        trigger('fadeInOut', [
            state('in', style({ opacity: 1 })),
            state('out', style({ opacity: 0 })),
            transition('in <=> out', [
                animate('500ms ease-in-out')
            ])
        ])
    ],
    styles: [`
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 20px;
        }
    `]
})

export class AppComponent {
    state = 'in';

    toggle() {
        this.state = this.state === 'in' ? 'out' : 'in';
    }
}

Finally, select the app.module.ts file and add the following code.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, BrowserAnimationsModule ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }