diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 06c7342..0297262 100644
--- a/src/app/app-routing.module.ts
+++ b/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 = [];
diff --git a/src/app/app.component.html b/src/app/app.component.html
index cebf745..71f0695 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1 @@
-
-
-
-
-
+
\ No newline at end of file
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..f21605c 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,4 @@
+:host{
+ font-size: x-large;
+ font-family: Arial, Helvetica, sans-serif;
+}
\ No newline at end of file
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 56a385e..3126c68 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,10 +1,10 @@
-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
],
@@ -12,7 +12,7 @@ describe('AppComponent', () => {
AppComponent
],
}).compileComponents();
- }));
+ });
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
@@ -20,16 +20,16 @@ describe('AppComponent', () => {
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!');
});
});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6a08b74..8bdd2b6 100644
--- a/src/app/app.component.ts
+++ b/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';
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1e49a4a..f85b14a 100644
--- a/src/app/app.module.ts
+++ b/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]
diff --git a/src/app/model/todo-item.ts b/src/app/model/todo-item.ts
deleted file mode 100644
index bdb4f8b..0000000
--- a/src/app/model/todo-item.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export class TodoItem {
- id: number;
- description: string;
- isCompleted: boolean = false;
-
- toggleCompleted() {
- this.isCompleted = !this.isCompleted;
- }
-}
diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html
index 5d907a2..f500142 100644
--- a/src/app/todo-app/todo-app.component.html
+++ b/src/app/todo-app/todo-app.component.html
@@ -1,8 +1,8 @@
-
-
+
+
-
+
\ No newline at end of file
diff --git a/src/app/todo-app/todo-app.component.spec.ts b/src/app/todo-app/todo-app.component.spec.ts
index 070f2ac..c832938 100644
--- a/src/app/todo-app/todo-app.component.spec.ts
+++ b/src/app/todo-app/todo-app.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TodoAppComponent } from './todo-app.component';
@@ -6,12 +6,12 @@ describe('TodoAppComponent', () => {
let component: TodoAppComponent;
let fixture: ComponentFixture;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
declarations: [ TodoAppComponent ]
})
.compileComponents();
- }));
+ });
beforeEach(() => {
fixture = TestBed.createComponent(TodoAppComponent);
diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts
index 700530b..246a76d 100644
--- a/src/app/todo-app/todo-app.component.ts
+++ b/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});
+
+
+ }
+
+
+
}
diff --git a/src/app/todo-footer/todo-footer.component.html b/src/app/todo-footer/todo-footer.component.html
new file mode 100644
index 0000000..35cf2dc
--- /dev/null
+++ b/src/app/todo-footer/todo-footer.component.html
@@ -0,0 +1 @@
+todo-footer works!
diff --git a/src/app/todo-footer/todo-footer.component.scss b/src/app/todo-footer/todo-footer.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/todo-footer/todo-footer.component.spec.ts b/src/app/todo-footer/todo-footer.component.spec.ts
new file mode 100644
index 0000000..10e7952
--- /dev/null
+++ b/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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ TodoFooterComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TodoFooterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/todo-footer/todo-footer.component.ts b/src/app/todo-footer/todo-footer.component.ts
new file mode 100644
index 0000000..bf0e5f9
--- /dev/null
+++ b/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 {
+ }
+
+}
diff --git a/src/app/todo-form/todo-form.component.html b/src/app/todo-form/todo-form.component.html
index 69e81bd..d42e6b5 100644
--- a/src/app/todo-form/todo-form.component.html
+++ b/src/app/todo-form/todo-form.component.html
@@ -1 +1,3 @@
-todo-form works!
+
+
+
diff --git a/src/app/todo-form/todo-form.component.spec.ts b/src/app/todo-form/todo-form.component.spec.ts
index 6f823ef..2280503 100644
--- a/src/app/todo-form/todo-form.component.spec.ts
+++ b/src/app/todo-form/todo-form.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TodoFormComponent } from './todo-form.component';
@@ -6,12 +6,12 @@ describe('TodoFormComponent', () => {
let component: TodoFormComponent;
let fixture: ComponentFixture;
- beforeEach(async(() => {
- TestBed.configureTestingModule({
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
declarations: [ TodoFormComponent ]
})
.compileComponents();
- }));
+ });
beforeEach(() => {
fixture = TestBed.createComponent(TodoFormComponent);
diff --git a/src/app/todo-form/todo-form.component.ts b/src/app/todo-form/todo-form.component.ts
index 78dc6ab..93d8e3d 100644
--- a/src/app/todo-form/todo-form.component.ts
+++ b/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();
+
constructor() { }
ngOnInit(): void {
}
+ add(inputControl: { value: string | String | undefined; }){
+
+ if(inputControl.value === ''){
+ return;
+ }
+ this.addst.emit(inputControl.value);
+ inputControl.value = '';
+ }
+
}
diff --git a/src/app/todo-list/todo-list.component.html b/src/app/todo-list/todo-list.component.html
new file mode 100644
index 0000000..433a639
--- /dev/null
+++ b/src/app/todo-list/todo-list.component.html
@@ -0,0 +1,7 @@
+
+ - {{item.desc}}
+
+
+
+
diff --git a/src/app/todo-list/todo-list.component.scss b/src/app/todo-list/todo-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/todo-list/todo-list.component.spec.ts b/src/app/todo-list/todo-list.component.spec.ts
new file mode 100644
index 0000000..f5ca307
--- /dev/null
+++ b/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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ TodoListComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TodoListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts
new file mode 100644
index 0000000..7727b17
--- /dev/null
+++ b/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();
+ @Output() itemStateChanged = new EventEmitter();
+ @Input() list = [];
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+ onItemRemoved(item: any){
+ this.itemRemoved.emit(item);
+ }
+
+ toggle(item: any){
+ this.itemStateChanged.emit(item);
+ }
+
+
+}
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 7b4f817..f56ff47 100644
--- a/src/environments/environment.ts
+++ b/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.
diff --git a/src/index.html b/src/index.html
index 62a7817..c4682ae 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
- NgPeti
+ EjercicioInOut
diff --git a/src/polyfills.ts b/src/polyfills.ts
index 03711e5..373f538 100644
--- a/src/polyfills.ts
+++ b/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.
/***************************************************************************************************
diff --git a/src/test.ts b/src/test.ts
index 50193eb..2042356 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -1,6 +1,6 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,