Ejercicio todo-list no terminado

src/app/app-routing.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
+import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [];
 

src/app/app.component.html

@@ -1,5 +1 @@
-<app-todo></app-todo>
-
-<app-todo></app-todo>
-
-<app-todo></app-todo>
+<todo-app></todo-app>

src/app/app.component.scss

@@ -0,0 +1,4 @@
+:host{
+    font-size: x-large;
+    font-family: Arial, Helvetica, sans-serif;
+}

src/app/app.component.spec.ts

@@ -1,35 +1,35 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [
         RouterTestingModule
       ],
       declarations: [
         AppComponent
       ],
     }).compileComponents();
-  }));
+  });
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'ng-peti'`, () => {
+  it(`should have as title 'Ejercicio-in-out'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('ng-peti');
+    expect(app.title).toEqual('Ejercicio-in-out');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('ng-peti app is running!');
+    expect(compiled.querySelector('.content span').textContent).toContain('Ejercicio-in-out app is running!');
   });
 });

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'ng-peti';
+  title = 'Ejercicio-in-out';
 }

src/app/app.module.ts

@@ -1,22 +1,24 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TodoAppComponent } from './todo-app/todo-app.component';
 import { TodoFormComponent } from './todo-form/todo-form.component';
+import { TodoListComponent } from './todo-list/todo-list.component';
+import { TodoFooterComponent } from './todo-footer/todo-footer.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     TodoAppComponent,
-    TodoFormComponent
+    TodoFormComponent,
+    TodoListComponent,
+    TodoFooterComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule
+    AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,8 +1,8 @@
-<app-todo-form (add)="onTodoItemCreated($event)"></app-todo-form>
-<app-todo-list
-  [list]="list"
-  (itemRemoved)="onTodoItemRemoved($event)"
-  (itemStateChanged)="onItemStateChanged($event)"
-  >
+<app-todo-form (addst)="onTodoItemCreated($event)"></app-todo-form>
+<app-todo-list 
+[list] = "list"
+(itemRemoved) = "onTodoItemRemoved($event)"
+(itemStateChanged) = "onItemStateChanged($event)"
+>
 </app-todo-list>
-<app-todo-footer [list]="list"></app-todo-footer>
+<app-todo-footer [list]="list"></app-todo-footer>

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

@@ -1,17 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TodoAppComponent } from './todo-app.component';
 
 describe('TodoAppComponent', () => {
   let component: TodoAppComponent;
   let fixture: ComponentFixture<TodoAppComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [ TodoAppComponent ]
     })
     .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TodoAppComponent);

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

@@ -1,20 +1,39 @@
-import { Component, OnInit } from '@angular/core';
-import {TodoItem} from '../model/todo-item';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 
 @Component({
-  selector: 'app-todo',
+  selector: 'todo-app',
   templateUrl: './todo-app.component.html',
   styleUrls: ['./todo-app.component.scss']
 })
 export class TodoAppComponent implements OnInit {
   list = [];
   lastItemId = 0;
+
+
+
   constructor() { }
 
   ngOnInit(): void {
+
+  }
+
+  onItemStateChanged(item: any){
+    item.completed = !item.completed
   }
 
-  onItemStateChanged(item: TodoItem) {
-    item.toggleCompleted();
+  onTodoItemRemoved(item : any){
+    const index = this.list.findIndex(each => each.desc === this.item.desc)
+    this.list.splice(index,1);
   }
+
+  onTodoItemCreated(description : string){
+
+    this.lastItemId+=1;
+    this.list.push({id: this.lastItemId , desc: description, completed: false});
+
+
+  }
+
+
+
 }

src/app/todo-footer/todo-footer.component.html

@@ -0,0 +1 @@
+<p>todo-footer works!</p>

src/app/todo-footer/todo-footer.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoFooterComponent } from './todo-footer.component';
+
+describe('TodoFooterComponent', () => {
+  let component: TodoFooterComponent;
+  let fixture: ComponentFixture<TodoFooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TodoFooterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/todo-footer/todo-footer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-todo-footer',
+  templateUrl: './todo-footer.component.html',
+  styleUrls: ['./todo-footer.component.scss']
+})
+export class TodoFooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/todo-form/todo-form.component.html

@@ -1 +1,3 @@
-<p>todo-form works!</p>
+<input type="text" #addInput>
+<button (click)="add(addInput)">Agregar</button>
+

src/app/todo-form/todo-form.component.spec.ts

@@ -1,17 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TodoFormComponent } from './todo-form.component';
 
 describe('TodoFormComponent', () => {
   let component: TodoFormComponent;
   let fixture: ComponentFixture<TodoFormComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [ TodoFormComponent ]
     })
     .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TodoFormComponent);

src/app/todo-form/todo-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Output, EventEmitter} from '@angular/core';
+import { Component, OnInit, Output , EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-todo-form',
@@ -7,10 +7,20 @@ import { Component, OnInit, Output, EventEmitter} from '@angular/core';
 })
 export class TodoFormComponent implements OnInit {
 
-  @Output() add = new EventEmitter();
+  @Output() addst = new EventEmitter<String>();
+
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  add(inputControl: { value: string | String | undefined; }){
+
+    if(inputControl.value === ''){
+      return;
+    }
+    this.addst.emit(inputControl.value);
+    inputControl.value = '';
+  }
+
 }

src/app/todo-list/todo-list.component.html

@@ -0,0 +1,7 @@
+<ul>
+    <li *ngFor="let item of list "
+    > {{item.desc}}
+    <button (click)="onItemRemoved(item)">X</button>
+    <button (click)="toggle(item)">-</button>
+</li>
+</ul>

src/app/todo-list/todo-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoListComponent } from './todo-list.component';
+
+describe('TodoListComponent', () => {
+  let component: TodoListComponent;
+  let fixture: ComponentFixture<TodoListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TodoListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/todo-list/todo-list.component.ts

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-todo-list',
+  templateUrl: './todo-list.component.html',
+  styleUrls: ['./todo-list.component.scss']
+})
+export class TodoListComponent implements OnInit {
+
+  @Output() itemRemoved = new EventEmitter<any>();
+  @Output() itemStateChanged = new EventEmitter<any>();
+  @Input() list = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onItemRemoved(item: any){
+    this.itemRemoved.emit(item);
+  }
+
+  toggle(item: any){
+    this.itemStateChanged.emit(item);
+  }
+
+
+}

src/environments/environment.ts

@@ -1,5 +1,5 @@
 // This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>NgPeti</title>
+  <title>EjercicioInOut</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/polyfills.ts

@@ -18,7 +18,9 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+/**
+ * IE11 requires the following for NgClass support on SVG elements
+ */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /**
@@ -55,7 +57,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************