Hire Expert
Angular Developers

import { Component, NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

interface Item {
    id: number;
    name: string;
}

@Component({
    selector: 'app-item',
    template: 
        '<div>
            <input [(ngModel)]="newItemName" placeholder="Item name">
            <button (click)="addItem()">Add Item</button>
            <ul>
                <li *ngFor="let item of items">{{ item.name }}</li>
            </ul>
        </div>'
    ,
})
class ItemComponent implements OnInit {
    newItemName: string = '';
    items: Item[] = [];
    nextId: number = 1;

    ngOnInit() {
        this.items = [{ id: 0, name: 'Example item' }];
    }

    addItem() {
        if (this.newItemName) {
            this.items.push({ id: this.nextId++, name: this.newItemName });
            this.newItemName = '';
        }
    }
}

@NgModule({
    declarations: [ItemComponent],
    imports: [BrowserModule, FormsModule],
    bootstrap: [ItemComponent],
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);