Implement the todolist component

TFPower-app/src/app/todo-edit/todo-edit.component.html

@@ -0,0 +1,36 @@
+<!-- <ion-header>
+  <ion-toolbar>
+    <ion-title>Example</ion-title>
+  </ion-toolbar>
+</ion-header> -->
+
+<!-- 输入框和按钮 -->
+<ion-grid>
+  <ion-row>
+    <ion-col size="9">
+      <ion-input [value]="userInputText" (ionInput)="userInput($event)" type="text" label="Todolist 输入"
+        label-placement="floating" fill="outline" placeholder="Enter text" class="input-place input"></ion-input>
+    </ion-col>
+    <ion-col size="3">X
+      <ion-button fill="outline" class="btn-size" (click)="addTodoList()">添加</ion-button>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+
+<!-- todolist -->
+<ion-card color="light">
+  <ion-list [inset]="true">
+    <!-- <ion-item>
+      <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
+      <ion-input aria-label="Task name" value="Get eggs" disabled></ion-input>
+    </ion-item> -->
+    @for (todo of todolist; track todo) {
+    <ion-item>
+      <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
+      <ion-input aria-label="Task name" value="{{todo}}" disabled></ion-input>
+      <span (click)="deleteThisTodolist(todo)" class="text-red">X</span>
+    </ion-item>
+    }
+  </ion-list>
+</ion-card>

TFPower-app/src/app/todo-edit/todo-edit.component.scss

@@ -0,0 +1,12 @@
+.input-place {
+  margin-top: 3px;
+  margin-bottom: 5px;
+}
+.btn-size {
+  //   width: 90px;
+  width: 100%;
+  height: 53px;
+}
+.text-red {
+  color: red;
+}

TFPower-app/src/app/todo-edit/todo-edit.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { TodoEditComponent } from './todo-edit.component';
+
+describe('TodoEditComponent', () => {
+  let component: TodoEditComponent;
+  let fixture: ComponentFixture<TodoEditComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TodoEditComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TodoEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

TFPower-app/src/app/todo-edit/todo-edit.component.ts

@@ -0,0 +1,72 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import {
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  IonCard,
+  IonButton,
+  IonGrid,
+  IonCol,
+  IonRow,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-todo-edit',
+  templateUrl: './todo-edit.component.html',
+  styleUrls: ['./todo-edit.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonList,
+    IonItem,
+    IonCheckbox,
+    IonInput,
+    IonCard,
+    IonButton,
+    IonGrid,
+    IonCol,
+    IonRow,
+  ],
+})
+export class TodoEditComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+
+  userInputText: string = '';
+  todolist: Array<string> = ['Get eggs', 'Get milk', 'Pick up dry cleaning'];
+
+  userInput(ev: any) {
+    this.userInputText = ev.detail.value;
+  }
+  addTodoList() {
+    if (this.userInputText.trim() === '') {
+      this.userInputText = '';
+    } else {
+      this.todolist.push(this.userInputText.trim());
+      this.userInputText = '';
+      this.todolistChange.emit(this.todolist);
+    }
+  }
+  deleteThisTodolist(todo: string) {
+    let idx = this.todolist.findIndex((item) => item === todo);
+    this.todolist.splice(idx, 1);
+  }
+
+  /**
+   * todo-edit 是子组件，父组件是tab1
+   * 子组件向父组件发送信息，需要使用@Output()和EventEmitter()
+   */
+  @Output()
+  todolistChange: EventEmitter<Array<string>> = new EventEmitter<
+    Array<string>
+  >();
+}