├── .gitignore ├── README.md ├── modulo10 ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── animacion-basica │ │ │ ├── animacion-basica.component.css │ │ │ ├── animacion-basica.component.html │ │ │ ├── animacion-basica.component.spec.ts │ │ │ └── animacion-basica.component.ts │ │ ├── app-routing.module.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── modulo3 ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.e2e.json ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── commConServicios │ │ │ ├── comunicacion.service.spec.ts │ │ │ ├── comunicacion.service.ts │ │ │ ├── hijo-a-s │ │ │ │ ├── hijo-a-s.component.css │ │ │ │ ├── hijo-a-s.component.html │ │ │ │ ├── hijo-a-s.component.spec.ts │ │ │ │ └── hijo-a-s.component.ts │ │ │ ├── hijo-b-s │ │ │ │ ├── hijo-b-s.component.css │ │ │ │ ├── hijo-b-s.component.html │ │ │ │ ├── hijo-b-s.component.spec.ts │ │ │ │ └── hijo-b-s.component.ts │ │ │ ├── nieto-a-s │ │ │ │ ├── nieto-a-s.component.css │ │ │ │ ├── nieto-a-s.component.html │ │ │ │ ├── nieto-a-s.component.spec.ts │ │ │ │ └── nieto-a-s.component.ts │ │ │ ├── nieto-b-s │ │ │ │ ├── nieto-b-s.component.css │ │ │ │ ├── nieto-b-s.component.html │ │ │ │ ├── nieto-b-s.component.spec.ts │ │ │ │ └── nieto-b-s.component.ts │ │ │ └── padre-s │ │ │ │ ├── padre-s.component.css │ │ │ │ ├── padre-s.component.html │ │ │ │ ├── padre-s.component.spec.ts │ │ │ │ └── padre-s.component.ts │ │ ├── ejemplo │ │ │ ├── ejemplo.component.css │ │ │ ├── ejemplo.component.html │ │ │ ├── ejemplo.component.spec.ts │ │ │ └── ejemplo.component.ts │ │ ├── event-binding-demo │ │ │ ├── event-binding-demo.component.css │ │ │ ├── event-binding-demo.component.html │ │ │ ├── event-binding-demo.component.spec.ts │ │ │ └── event-binding-demo.component.ts │ │ ├── hermanos │ │ │ ├── hijo1-h │ │ │ │ ├── hijo1-h.component.css │ │ │ │ ├── hijo1-h.component.html │ │ │ │ ├── hijo1-h.component.spec.ts │ │ │ │ └── hijo1-h.component.ts │ │ │ ├── hijo2-h │ │ │ │ ├── hijo2-h.component.css │ │ │ │ ├── hijo2-h.component.html │ │ │ │ ├── hijo2-h.component.spec.ts │ │ │ │ └── hijo2-h.component.ts │ │ │ └── padre-h │ │ │ │ ├── padre-h.component.css │ │ │ │ ├── padre-h.component.html │ │ │ │ ├── padre-h.component.spec.ts │ │ │ │ └── padre-h.component.ts │ │ ├── hijo-a-padre │ │ │ ├── hijo │ │ │ │ ├── hijo.component.css │ │ │ │ ├── hijo.component.html │ │ │ │ ├── hijo.component.spec.ts │ │ │ │ └── hijo.component.ts │ │ │ └── padre │ │ │ │ ├── padre.component.css │ │ │ │ ├── padre.component.html │ │ │ │ ├── padre.component.spec.ts │ │ │ │ └── padre.component.ts │ │ ├── interpolacion-demo │ │ │ ├── interpolacion-demo.component.css │ │ │ ├── interpolacion-demo.component.html │ │ │ ├── interpolacion-demo.component.spec.ts │ │ │ └── interpolacion-demo.component.ts │ │ ├── ng-class-demo │ │ │ ├── ng-class-demo.component.css │ │ │ ├── ng-class-demo.component.html │ │ │ ├── ng-class-demo.component.spec.ts │ │ │ └── ng-class-demo.component.ts │ │ ├── ng-for-demo │ │ │ ├── ng-for-demo.component.css │ │ │ ├── ng-for-demo.component.html │ │ │ ├── ng-for-demo.component.spec.ts │ │ │ └── ng-for-demo.component.ts │ │ ├── ng-if-demo │ │ │ ├── ng-if-demo.component.css │ │ │ ├── ng-if-demo.component.html │ │ │ ├── ng-if-demo.component.spec.ts │ │ │ └── ng-if-demo.component.ts │ │ ├── ng-model-demo │ │ │ ├── ng-model-demo.component.css │ │ │ ├── ng-model-demo.component.html │ │ │ ├── ng-model-demo.component.spec.ts │ │ │ └── ng-model-demo.component.ts │ │ ├── ng-style-demo │ │ │ ├── ng-style-demo.component.css │ │ │ ├── ng-style-demo.component.html │ │ │ ├── ng-style-demo.component.spec.ts │ │ │ └── ng-style-demo.component.ts │ │ ├── ng-switch-demo │ │ │ ├── ng-switch-demo.component.css │ │ │ ├── ng-switch-demo.component.html │ │ │ ├── ng-switch-demo.component.spec.ts │ │ │ └── ng-switch-demo.component.ts │ │ ├── padre-a-hijo │ │ │ ├── hijo │ │ │ │ ├── hijo.component.css │ │ │ │ ├── hijo.component.html │ │ │ │ ├── hijo.component.spec.ts │ │ │ │ └── hijo.component.ts │ │ │ └── padre │ │ │ │ ├── padre.component.css │ │ │ │ ├── padre.component.html │ │ │ │ ├── padre.component.spec.ts │ │ │ │ └── padre.component.ts │ │ ├── property-binding-demo │ │ │ ├── property-binding-demo.component.css │ │ │ ├── property-binding-demo.component.html │ │ │ ├── property-binding-demo.component.spec.ts │ │ │ └── property-binding-demo.component.ts │ │ └── var-ref-plantilla-demo │ │ │ ├── var-ref-plantilla-demo.component.css │ │ │ ├── var-ref-plantilla-demo.component.html │ │ │ ├── var-ref-plantilla-demo.component.spec.ts │ │ │ └── var-ref-plantilla-demo.component.ts │ ├── assets │ │ └── .gitkeep │ ├── browserslist │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── karma.conf.js │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── tslint.json ├── tsconfig.json └── tslint.json ├── modulo4 ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.e2e.json ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── comunicacion-service.service.spec.ts │ │ ├── comunicacion-service.service.ts │ │ ├── estilos │ │ │ ├── hijo-estilos │ │ │ │ ├── hijo-estilos.component.css │ │ │ │ ├── hijo-estilos.component.html │ │ │ │ ├── hijo-estilos.component.spec.ts │ │ │ │ └── hijo-estilos.component.ts │ │ │ └── padre-estilos │ │ │ │ ├── padre-estilos.component.css │ │ │ │ ├── padre-estilos.component.html │ │ │ │ ├── padre-estilos.component.spec.ts │ │ │ │ └── padre-estilos.component.ts │ │ ├── hermanos │ │ │ ├── hijo1-her │ │ │ │ ├── hijo1-her.component.css │ │ │ │ ├── hijo1-her.component.html │ │ │ │ ├── hijo1-her.component.spec.ts │ │ │ │ └── hijo1-her.component.ts │ │ │ ├── hijo2-her │ │ │ │ ├── hijo2-her.component.css │ │ │ │ ├── hijo2-her.component.html │ │ │ │ ├── hijo2-her.component.spec.ts │ │ │ │ └── hijo2-her.component.ts │ │ │ └── padre-her │ │ │ │ ├── padre-her.component.css │ │ │ │ ├── padre-her.component.html │ │ │ │ ├── padre-her.component.spec.ts │ │ │ │ └── padre-her.component.ts │ │ ├── hijo-a-padre │ │ │ ├── hijo-hap │ │ │ │ ├── hijo-hap.component.css │ │ │ │ ├── hijo-hap.component.html │ │ │ │ ├── hijo-hap.component.spec.ts │ │ │ │ └── hijo-hap.component.ts │ │ │ └── padre-hap │ │ │ │ ├── padre-hap.component.css │ │ │ │ ├── padre-hap.component.html │ │ │ │ ├── padre-hap.component.spec.ts │ │ │ │ └── padre-hap.component.ts │ │ ├── lejanos │ │ │ ├── hijo-a-lej │ │ │ │ ├── hijo-a-lej.component.css │ │ │ │ ├── hijo-a-lej.component.html │ │ │ │ ├── hijo-a-lej.component.spec.ts │ │ │ │ └── hijo-a-lej.component.ts │ │ │ ├── hijo-b-lej │ │ │ │ ├── hijo-b-lej.component.css │ │ │ │ ├── hijo-b-lej.component.html │ │ │ │ ├── hijo-b-lej.component.spec.ts │ │ │ │ └── hijo-b-lej.component.ts │ │ │ ├── nieto-a-lej │ │ │ │ ├── nieto-a-lej.component.css │ │ │ │ ├── nieto-a-lej.component.html │ │ │ │ ├── nieto-a-lej.component.spec.ts │ │ │ │ └── nieto-a-lej.component.ts │ │ │ ├── nieto-b-lej │ │ │ │ ├── nieto-b-lej.component.css │ │ │ │ ├── nieto-b-lej.component.html │ │ │ │ ├── nieto-b-lej.component.spec.ts │ │ │ │ └── nieto-b-lej.component.ts │ │ │ └── padre-lej │ │ │ │ ├── padre-lej.component.css │ │ │ │ ├── padre-lej.component.html │ │ │ │ ├── padre-lej.component.spec.ts │ │ │ │ └── padre-lej.component.ts │ │ ├── padre-a-hijo │ │ │ ├── hijo-pah │ │ │ │ ├── hijo-pah.component.css │ │ │ │ ├── hijo-pah.component.html │ │ │ │ ├── hijo-pah.component.spec.ts │ │ │ │ └── hijo-pah.component.ts │ │ │ └── padre-pah │ │ │ │ ├── padre-pah.component.css │ │ │ │ ├── padre-pah.component.html │ │ │ │ ├── padre-pah.component.spec.ts │ │ │ │ └── padre-pah.component.ts │ │ ├── proyeccion │ │ │ ├── hijo-proyeccion │ │ │ │ ├── hijo-proyeccion.component.css │ │ │ │ ├── hijo-proyeccion.component.html │ │ │ │ ├── hijo-proyeccion.component.spec.ts │ │ │ │ └── hijo-proyeccion.component.ts │ │ │ ├── padre-proyeccion │ │ │ │ ├── padre-proyeccion.component.css │ │ │ │ ├── padre-proyeccion.component.html │ │ │ │ ├── padre-proyeccion.component.spec.ts │ │ │ │ └── padre-proyeccion.component.ts │ │ │ └── proyectado │ │ │ │ ├── proyectado.component.css │ │ │ │ ├── proyectado.component.html │ │ │ │ ├── proyectado.component.spec.ts │ │ │ │ └── proyectado.component.ts │ │ ├── viewChild │ │ │ ├── hijo-view-child │ │ │ │ ├── hijo-view-child.component.css │ │ │ │ ├── hijo-view-child.component.html │ │ │ │ ├── hijo-view-child.component.spec.ts │ │ │ │ └── hijo-view-child.component.ts │ │ │ └── padre-view-child │ │ │ │ ├── padre-view-child.component.css │ │ │ │ ├── padre-view-child.component.html │ │ │ │ ├── padre-view-child.component.spec.ts │ │ │ │ └── padre-view-child.component.ts │ │ └── viewChildren │ │ │ ├── hijo-view-children │ │ │ ├── hijo-view-children.component.css │ │ │ ├── hijo-view-children.component.html │ │ │ ├── hijo-view-children.component.spec.ts │ │ │ └── hijo-view-children.component.ts │ │ │ └── padre-view-children │ │ │ ├── padre-view-children.component.css │ │ │ ├── padre-view-children.component.html │ │ │ ├── padre-view-children.component.spec.ts │ │ │ └── padre-view-children.component.ts │ ├── assets │ │ └── .gitkeep │ ├── browserslist │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── karma.conf.js │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── tslint.json ├── tsconfig.json └── tslint.json ├── modulo6 ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.e2e.json ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── first.service.spec.ts │ │ ├── first.service.ts │ │ ├── get-list-demo │ │ │ ├── get-list-demo.component.css │ │ │ ├── get-list-demo.component.html │ │ │ ├── get-list-demo.component.spec.ts │ │ │ └── get-list-demo.component.ts │ │ ├── gets │ │ │ └── get-demo │ │ │ │ ├── get-demo.component.css │ │ │ │ ├── get-demo.component.html │ │ │ │ ├── get-demo.component.spec.ts │ │ │ │ └── get-demo.component.ts │ │ ├── http-patch-demo │ │ │ ├── http-patch-demo.component.css │ │ │ ├── http-patch-demo.component.html │ │ │ ├── http-patch-demo.component.spec.ts │ │ │ └── http-patch-demo.component.ts │ │ ├── http-post-demo │ │ │ ├── http-post-demo.component.css │ │ │ ├── http-post-demo.component.html │ │ │ ├── http-post-demo.component.spec.ts │ │ │ └── http-post-demo.component.ts │ │ ├── intro-to-services │ │ │ ├── intro-to-services.component.css │ │ │ ├── intro-to-services.component.html │ │ │ ├── intro-to-services.component.spec.ts │ │ │ └── intro-to-services.component.ts │ │ ├── models │ │ │ └── user.ts │ │ └── services │ │ │ ├── auth-interceptor.service.spec.ts │ │ │ ├── auth-interceptor.service.ts │ │ │ ├── user.service.spec.ts │ │ │ └── user.service.ts │ ├── assets │ │ └── .gitkeep │ ├── browserslist │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── karma.conf.js │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── tslint.json ├── tsconfig.json └── tslint.json ├── modulo7 ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── boton-panico │ │ │ ├── boton-panico.component.css │ │ │ ├── boton-panico.component.html │ │ │ ├── boton-panico.component.spec.ts │ │ │ └── boton-panico.component.ts │ │ ├── can-activate.guard.spec.ts │ │ ├── can-activate.guard.ts │ │ ├── can-deactivate.guard.spec.ts │ │ ├── can-deactivate.guard.ts │ │ ├── contacto │ │ │ ├── contacto.component.css │ │ │ ├── contacto.component.html │ │ │ ├── contacto.component.spec.ts │ │ │ └── contacto.component.ts │ │ ├── login │ │ │ ├── login.component.css │ │ │ ├── login.component.html │ │ │ ├── login.component.spec.ts │ │ │ └── login.component.ts │ │ ├── menu │ │ │ ├── menu.component.css │ │ │ ├── menu.component.html │ │ │ ├── menu.component.spec.ts │ │ │ └── menu.component.ts │ │ ├── models │ │ │ ├── post.ts │ │ │ └── usuario.ts │ │ ├── posts-resolver.guard.spec.ts │ │ ├── posts-resolver.guard.ts │ │ ├── posts │ │ │ ├── posts-routing.module.ts │ │ │ ├── posts.component.css │ │ │ ├── posts.component.html │ │ │ ├── posts.component.spec.ts │ │ │ ├── posts.component.ts │ │ │ └── posts.module.ts │ │ ├── services │ │ │ ├── auth.service.spec.ts │ │ │ ├── auth.service.ts │ │ │ ├── web-api.service.spec.ts │ │ │ └── web-api.service.ts │ │ └── usuarios │ │ │ ├── usuario-detalle │ │ │ ├── usuario-detalle.component.css │ │ │ ├── usuario-detalle.component.html │ │ │ ├── usuario-detalle.component.spec.ts │ │ │ └── usuario-detalle.component.ts │ │ │ ├── usuarios-listado │ │ │ ├── usuarios-listado.component.css │ │ │ ├── usuarios-listado.component.html │ │ │ ├── usuarios-listado.component.spec.ts │ │ │ └── usuarios-listado.component.ts │ │ │ ├── usuarios-routing.module.ts │ │ │ ├── usuarios.component.css │ │ │ ├── usuarios.component.html │ │ │ ├── usuarios.component.spec.ts │ │ │ ├── usuarios.component.ts │ │ │ └── usuarios.module.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── modulo8 ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── models │ │ │ ├── registro.ts │ │ │ └── suscripcion.enum.ts │ │ ├── reactive-form │ │ │ ├── reactive-form.component.css │ │ │ ├── reactive-form.component.html │ │ │ ├── reactive-form.component.spec.ts │ │ │ └── reactive-form.component.ts │ │ ├── services │ │ │ ├── web-api.service.spec.ts │ │ │ └── web-api.service.ts │ │ ├── template-form │ │ │ ├── template-form.component.css │ │ │ ├── template-form.component.html │ │ │ ├── template-form.component.spec.ts │ │ │ └── template-form.component.ts │ │ └── validations │ │ │ ├── password-validation.directive.spec.ts │ │ │ ├── password-validation.directive.ts │ │ │ ├── username-unico.directive.spec.ts │ │ │ └── username-unico.directive.ts │ ├── assets │ │ ├── .gitkeep │ │ └── usernames.json │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json └── trello-clone ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── board-create │ │ ├── board-create.component.css │ │ ├── board-create.component.html │ │ ├── board-create.component.spec.ts │ │ └── board-create.component.ts │ ├── board-title │ │ ├── board-title.component.css │ │ ├── board-title.component.html │ │ ├── board-title.component.spec.ts │ │ └── board-title.component.ts │ ├── board │ │ ├── board.component.css │ │ ├── board.component.html │ │ ├── board.component.spec.ts │ │ └── board.component.ts │ ├── boards │ │ ├── boards.component.css │ │ ├── boards.component.html │ │ ├── boards.component.spec.ts │ │ └── boards.component.ts │ ├── card-edit │ │ ├── card-edit.component.css │ │ ├── card-edit.component.html │ │ ├── card-edit.component.spec.ts │ │ └── card-edit.component.ts │ ├── card-form │ │ ├── card-form.component.css │ │ ├── card-form.component.html │ │ ├── card-form.component.spec.ts │ │ └── card-form.component.ts │ ├── list-header │ │ ├── list-header.component.css │ │ ├── list-header.component.html │ │ ├── list-header.component.spec.ts │ │ └── list-header.component.ts │ ├── login │ │ ├── login.component.css │ │ ├── login.component.html │ │ ├── login.component.spec.ts │ │ └── login.component.ts │ ├── material │ │ └── material.module.ts │ ├── menu │ │ ├── menu.component.css │ │ ├── menu.component.html │ │ ├── menu.component.spec.ts │ │ └── menu.component.ts │ ├── models │ │ ├── board.ts │ │ └── list.ts │ └── services │ │ ├── boards.service.spec.ts │ │ └── boards.service.ts ├── assets │ └── .gitkeep ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE 2 | 3 | dist 4 | bazel- 5 | integrationbazelbazel- 6 | e2e_test. 7 | node_modules 8 | bower_components 9 | toolsgulp-taskscldrcldr-data 10 | 11 | # Include when developing application packages. 12 | pubspec.lock 13 | .c9 14 | .idea 15 | .settings 16 | .swo 17 | modules.settings 18 | .vscode 19 | modules.vscode 20 | 21 | # Don't check in secret files 22 | secret.js 23 | 24 | # Ignore npmyarn debug log 25 | npm-debug.log 26 | yarn-error.log 27 | 28 | # build-analytics 29 | .build-analytics 30 | 31 | # rollup-test output 32 | modulesrollup-testdist 33 | 34 | # User specific bazel settings 35 | .bazelrc.user 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular-8-Curso 2 | Repositorio del curso de Angular 8 3 | 4 | Por Felipe Gavilán 5 | 6 | Link del curso en Udemy: https://www.udemy.com/programando-en-angular-haciendo-proyectos/?couponCode=ANGYTBE 7 | -------------------------------------------------------------------------------- /modulo10/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /modulo10/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /modulo10/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to modulo10!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /modulo10/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /modulo10/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /modulo10/src/app/animacion-basica/animacion-basica.component.css: -------------------------------------------------------------------------------- 1 | .cuadro { 2 | margin-bottom: 15px; 3 | } -------------------------------------------------------------------------------- /modulo10/src/app/animacion-basica/animacion-basica.component.html: -------------------------------------------------------------------------------- 1 |

Animación básica

2 | 3 |
4 | 5 | -------------------------------------------------------------------------------- /modulo10/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | 5 | const routes: Routes = []; 6 | 7 | @NgModule({ 8 | imports: [RouterModule.forRoot(routes)], 9 | exports: [RouterModule] 10 | }) 11 | export class AppRoutingModule { } 12 | -------------------------------------------------------------------------------- /modulo10/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo10/src/app/app.component.css -------------------------------------------------------------------------------- /modulo10/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /modulo10/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'modulo10'; 10 | } 11 | -------------------------------------------------------------------------------- /modulo10/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 4 | 5 | 6 | import { AppRoutingModule } from './app-routing.module'; 7 | import { AppComponent } from './app.component'; 8 | import { AnimacionBasicaComponent } from './animacion-basica/animacion-basica.component'; 9 | 10 | @NgModule({ 11 | declarations: [ 12 | AppComponent, 13 | AnimacionBasicaComponent, 14 | ], 15 | imports: [ 16 | BrowserModule, 17 | BrowserAnimationsModule, 18 | AppRoutingModule 19 | ], 20 | providers: [], 21 | bootstrap: [AppComponent] 22 | }) 23 | export class AppModule { } 24 | -------------------------------------------------------------------------------- /modulo10/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo10/src/assets/.gitkeep -------------------------------------------------------------------------------- /modulo10/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /modulo10/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /modulo10/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo10/src/favicon.ico -------------------------------------------------------------------------------- /modulo10/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Modulo10 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /modulo10/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /modulo10/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /modulo10/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /modulo10/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ], 10 | "exclude": [ 11 | "src/test.ts", 12 | "src/**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /modulo10/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | }, 22 | "angularCompilerOptions": { 23 | "fullTemplateTypeCheck": true, 24 | "strictInjectionParameters": true 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /modulo10/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /modulo3/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /modulo3/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | -------------------------------------------------------------------------------- /modulo3/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to modulo3!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /modulo3/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /modulo3/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /modulo3/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /modulo3/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/app.component.css -------------------------------------------------------------------------------- /modulo3/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /modulo3/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'modulo3'; 10 | } 11 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/comunicacion.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { ComunicacionService } from './comunicacion.service'; 4 | 5 | describe('ComunicacionService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: ComunicacionService = TestBed.get(ComunicacionService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/comunicacion.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Subject } from 'rxjs'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class ComunicacionService { 8 | mensaje: string; 9 | private enviarMensajeSubject = new Subject(); 10 | enviarMensajeObservable = this.enviarMensajeSubject.asObservable(); 11 | 12 | enviarMensaje(mensaje: string) { 13 | this.mensaje = mensaje; 14 | this.enviarMensajeSubject.next(mensaje); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/hijo-a-s/hijo-a-s.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/commConServicios/hijo-a-s/hijo-a-s.component.css -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/hijo-a-s/hijo-a-s.component.html: -------------------------------------------------------------------------------- 1 |

Componente hijo A

2 |
3 | 4 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/hijo-a-s/hijo-a-s.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HijoASComponent } from './hijo-a-s.component'; 4 | 5 | describe('HijoASComponent', () => { 6 | let component: HijoASComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HijoASComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HijoASComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/hijo-a-s/hijo-a-s.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-hijo-a-s', 5 | templateUrl: './hijo-a-s.component.html', 6 | styleUrls: ['./hijo-a-s.component.css'] 7 | }) 8 | export class HijoASComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/hijo-b-s/hijo-b-s.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/commConServicios/hijo-b-s/hijo-b-s.component.css -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/hijo-b-s/hijo-b-s.component.html: -------------------------------------------------------------------------------- 1 |

Componente hijo B

2 | 3 | Esto es lo escrito en el textbox:
4 |
{{ mensaje }}
5 |
6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/hijo-b-s/hijo-b-s.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HijoBSComponent } from './hijo-b-s.component'; 4 | 5 | describe('HijoBSComponent', () => { 6 | let component: HijoBSComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HijoBSComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HijoBSComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/hijo-b-s/hijo-b-s.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ComunicacionService } from '../comunicacion.service'; 3 | 4 | @Component({ 5 | selector: 'app-hijo-b-s', 6 | templateUrl: './hijo-b-s.component.html', 7 | styleUrls: ['./hijo-b-s.component.css'] 8 | }) 9 | export class HijoBSComponent implements OnInit { 10 | mensaje: string; 11 | constructor(public comunicacionService: ComunicacionService) { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | recibirCambios() { 17 | this.mensaje = this.comunicacionService.mensaje; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/nieto-a-s/nieto-a-s.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/commConServicios/nieto-a-s/nieto-a-s.component.css -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/nieto-a-s/nieto-a-s.component.html: -------------------------------------------------------------------------------- 1 |

Componente Nieto A

2 | 3 | Escribe aquí
4 | 7 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/nieto-a-s/nieto-a-s.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NietoASComponent } from './nieto-a-s.component'; 4 | 5 | describe('NietoASComponent', () => { 6 | let component: NietoASComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NietoASComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NietoASComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/nieto-a-s/nieto-a-s.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ComunicacionService } from '../comunicacion.service'; 3 | 4 | @Component({ 5 | selector: 'app-nieto-a-s', 6 | templateUrl: './nieto-a-s.component.html', 7 | styleUrls: ['./nieto-a-s.component.css'] 8 | }) 9 | export class NietoASComponent implements OnInit { 10 | mensaje: string; 11 | constructor(private servicioComunicacion: ComunicacionService) { } 12 | 13 | ngOnInit() { 14 | this.servicioComunicacion.enviarMensajeObservable.subscribe(mensaje => { 15 | this.mensaje = mensaje; 16 | }); 17 | } 18 | 19 | cambioTexto(mensaje: string) { 20 | this.servicioComunicacion.enviarMensaje(mensaje); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/nieto-b-s/nieto-b-s.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/commConServicios/nieto-b-s/nieto-b-s.component.css -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/nieto-b-s/nieto-b-s.component.html: -------------------------------------------------------------------------------- 1 |

Componente Nieto B

2 | 3 | Escribe aquí
4 | 7 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/nieto-b-s/nieto-b-s.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NietoBSComponent } from './nieto-b-s.component'; 4 | 5 | describe('NietoBSComponent', () => { 6 | let component: NietoBSComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NietoBSComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NietoBSComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/nieto-b-s/nieto-b-s.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ComunicacionService } from '../comunicacion.service'; 3 | 4 | @Component({ 5 | selector: 'app-nieto-b-s', 6 | templateUrl: './nieto-b-s.component.html', 7 | styleUrls: ['./nieto-b-s.component.css'] 8 | }) 9 | export class NietoBSComponent implements OnInit { 10 | mensaje: string; 11 | constructor(private servicioComunicacion: ComunicacionService) { } 12 | 13 | ngOnInit() { 14 | this.servicioComunicacion.enviarMensajeObservable.subscribe(mensaje => { 15 | this.mensaje = mensaje; 16 | }); 17 | } 18 | 19 | cambioTexto(mensaje: string) { 20 | this.servicioComunicacion.enviarMensaje(mensaje); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/padre-s/padre-s.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/commConServicios/padre-s/padre-s.component.css -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/padre-s/padre-s.component.html: -------------------------------------------------------------------------------- 1 |

Componente Padre

2 | 3 | Esto es lo escrito en el textbox:
4 |
{{ comunicacionService.mensaje }}
5 | 6 |
7 | 8 | 9 | 10 |
11 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/padre-s/padre-s.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PadreSComponent } from './padre-s.component'; 4 | 5 | describe('PadreSComponent', () => { 6 | let component: PadreSComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ PadreSComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PadreSComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/commConServicios/padre-s/padre-s.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ComunicacionService } from '../comunicacion.service'; 3 | 4 | @Component({ 5 | selector: 'app-padre-s', 6 | templateUrl: './padre-s.component.html', 7 | styleUrls: ['./padre-s.component.css'] 8 | }) 9 | export class PadreSComponent implements OnInit { 10 | 11 | constructor(public comunicacionService: ComunicacionService) { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /modulo3/src/app/ejemplo/ejemplo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/ejemplo/ejemplo.component.css -------------------------------------------------------------------------------- /modulo3/src/app/ejemplo/ejemplo.component.html: -------------------------------------------------------------------------------- 1 |

2 | ejemplo works! 3 |

4 | -------------------------------------------------------------------------------- /modulo3/src/app/ejemplo/ejemplo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { EjemploComponent } from './ejemplo.component'; 4 | 5 | describe('EjemploComponent', () => { 6 | let component: EjemploComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ EjemploComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(EjemploComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/ejemplo/ejemplo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-ejemplo', 5 | templateUrl: './ejemplo.component.html', 6 | styleUrls: ['./ejemplo.component.css'] 7 | }) 8 | export class EjemploComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /modulo3/src/app/event-binding-demo/event-binding-demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/event-binding-demo/event-binding-demo.component.css -------------------------------------------------------------------------------- /modulo3/src/app/event-binding-demo/event-binding-demo.component.html: -------------------------------------------------------------------------------- 1 |

Binding de Eventos

2 | 3 |
4 |

Ejemplo 1 - Binding de evento con un botón

5 |
6 | Contador: {{ cantidad }} 7 |
8 | 9 |
10 |

Ejemplo 2 - Binding de evento sin una función

11 |
12 | Contador: {{ cantidad }} 13 |
14 | 15 |
16 |

Ejemplo 3 - Otros eventos y objeto especial $event

17 | 18 |
19 | Texto escrito: {{textoEscrito}} 20 |
-------------------------------------------------------------------------------- /modulo3/src/app/event-binding-demo/event-binding-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-event-binding-demo', 5 | templateUrl: './event-binding-demo.component.html', 6 | styleUrls: ['./event-binding-demo.component.css'] 7 | }) 8 | export class EventBindingDemoComponent { 9 | 10 | cantidad = 0; 11 | 12 | incrementar() { 13 | this.cantidad++; 14 | } 15 | 16 | textoEscrito; 17 | onTextboxInput(event) { 18 | console.log(event); 19 | this.textoEscrito = event.target.value; 20 | } 21 | 22 | 23 | } 24 | -------------------------------------------------------------------------------- /modulo3/src/app/hermanos/hijo1-h/hijo1-h.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/hermanos/hijo1-h/hijo1-h.component.css -------------------------------------------------------------------------------- /modulo3/src/app/hermanos/hijo1-h/hijo1-h.component.html: -------------------------------------------------------------------------------- 1 |

Componente hijo 1

2 | 3 | Escribe: -------------------------------------------------------------------------------- /modulo3/src/app/hermanos/hijo1-h/hijo1-h.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Hijo1HComponent } from './hijo1-h.component'; 4 | 5 | describe('Hijo1HComponent', () => { 6 | let component: Hijo1HComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ Hijo1HComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(Hijo1HComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/hermanos/hijo1-h/hijo1-h.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, EventEmitter, Output } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-hijo1-h', 5 | templateUrl: './hijo1-h.component.html', 6 | styleUrls: ['./hijo1-h.component.css'] 7 | }) 8 | export class Hijo1HComponent { 9 | 10 | @Output() 11 | textoCambiado: EventEmitter = new EventEmitter(); 12 | 13 | cambioTexto(texto: string){ 14 | this.textoCambiado.emit(texto); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /modulo3/src/app/hermanos/hijo2-h/hijo2-h.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/hermanos/hijo2-h/hijo2-h.component.css -------------------------------------------------------------------------------- /modulo3/src/app/hermanos/hijo2-h/hijo2-h.component.html: -------------------------------------------------------------------------------- 1 |

Componente hijo 2

2 | 3 | Texto escrito en el componente hermano: {{ textoHijo2 }} -------------------------------------------------------------------------------- /modulo3/src/app/hermanos/hijo2-h/hijo2-h.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Hijo2HComponent } from './hijo2-h.component'; 4 | 5 | describe('Hijo2HComponent', () => { 6 | let component: Hijo2HComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ Hijo2HComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(Hijo2HComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/hermanos/hijo2-h/hijo2-h.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-hijo2-h', 5 | templateUrl: './hijo2-h.component.html', 6 | styleUrls: ['./hijo2-h.component.css'] 7 | }) 8 | export class Hijo2HComponent implements OnInit { 9 | 10 | @Input() 11 | textoHijo2: string; 12 | constructor() { } 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /modulo3/src/app/hermanos/padre-h/padre-h.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/hermanos/padre-h/padre-h.component.css -------------------------------------------------------------------------------- /modulo3/src/app/hermanos/padre-h/padre-h.component.html: -------------------------------------------------------------------------------- 1 |

Comunicación entre componentes hermanos

2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /modulo3/src/app/hermanos/padre-h/padre-h.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PadreHComponent } from './padre-h.component'; 4 | 5 | describe('PadreHComponent', () => { 6 | let component: PadreHComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ PadreHComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PadreHComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/hermanos/padre-h/padre-h.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-padre-h', 5 | templateUrl: './padre-h.component.html', 6 | styleUrls: ['./padre-h.component.css'] 7 | }) 8 | export class PadreHComponent implements OnInit { 9 | textoHijo1: string; 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /modulo3/src/app/hijo-a-padre/hijo/hijo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/hijo-a-padre/hijo/hijo.component.css -------------------------------------------------------------------------------- /modulo3/src/app/hijo-a-padre/hijo/hijo.component.html: -------------------------------------------------------------------------------- 1 |

Componente hijo

2 | 3 | 4 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /modulo3/src/app/hijo-a-padre/hijo/hijo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HijoComponent } from './hijo.component'; 4 | 5 | describe('HijoComponent', () => { 6 | let component: HijoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HijoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HijoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/hijo-a-padre/hijo/hijo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, EventEmitter, Output } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-hijo-2', 5 | templateUrl: './hijo.component.html', 6 | styleUrls: ['./hijo.component.css'] 7 | }) 8 | export class HijoComponent { 9 | @Output() 10 | enviar: EventEmitter = new EventEmitter(); 11 | @Output() 12 | enviarMayusculas: EventEmitter = new EventEmitter(); 13 | textoHijo: string; 14 | 15 | botonClick() { 16 | this.enviar.emit(this.textoHijo); 17 | } 18 | 19 | botonClickMayusculas(){ 20 | this.enviarMayusculas.emit(this.textoHijo.toUpperCase()); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /modulo3/src/app/hijo-a-padre/padre/padre.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/hijo-a-padre/padre/padre.component.css -------------------------------------------------------------------------------- /modulo3/src/app/hijo-a-padre/padre/padre.component.html: -------------------------------------------------------------------------------- 1 |

Ejemplo 1 - Recibiendo un mensaje del componente hijo

2 | 3 |

Componente Padre

4 | 5 | Mensaje desde el componente hijo: {{ textoPadre }} 6 | 7 | -------------------------------------------------------------------------------- /modulo3/src/app/hijo-a-padre/padre/padre.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PadreComponent } from './padre.component'; 4 | 5 | describe('PadreComponent', () => { 6 | let component: PadreComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ PadreComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PadreComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/hijo-a-padre/padre/padre.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-padre-2', 5 | templateUrl: './padre.component.html', 6 | styleUrls: ['./padre.component.css'] 7 | }) 8 | export class PadreComponent { 9 | textoPadre: string; 10 | 11 | recibirMensaje(mensaje: string) { 12 | this.textoPadre = mensaje; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /modulo3/src/app/interpolacion-demo/interpolacion-demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/interpolacion-demo/interpolacion-demo.component.css -------------------------------------------------------------------------------- /modulo3/src/app/interpolacion-demo/interpolacion-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-interpolacion-demo', 5 | templateUrl: './interpolacion-demo.component.html', 6 | styleUrls: ['./interpolacion-demo.component.css'] 7 | }) 8 | export class InterpolacionDemoComponent { 9 | direccion = 'Avenida siempreviva 742'; 10 | persona = { 11 | nombre: 'Felipe', 12 | apellido: 'Gavilán' 13 | } 14 | 15 | duplicarTexto(valor: string): string { 16 | return valor + valor; 17 | } 18 | } -------------------------------------------------------------------------------- /modulo3/src/app/ng-class-demo/ng-class-demo.component.css: -------------------------------------------------------------------------------- 1 | .cuadrado { 2 | width: 100px; 3 | height: 100px; 4 | background-color: red; 5 | } 6 | 7 | .secundario { 8 | background-color: blue; 9 | } 10 | 11 | .cuadrado-grande { 12 | width: 200px; 13 | height: 200px; 14 | } 15 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-class-demo/ng-class-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Ejemplo 2 - Múltiples condiciones para distintas clases

3 | Cambiar color 4 |
5 | Cambiar tamaño 6 | 7 |
8 |

9 | 10 |
14 |
15 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-class-demo/ng-class-demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NgClassDemoComponent } from './ng-class-demo.component'; 4 | 5 | describe('NgClassDemoComponent', () => { 6 | let component: NgClassDemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NgClassDemoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NgClassDemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-class-demo/ng-class-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-ng-class-demo', 5 | templateUrl: './ng-class-demo.component.html', 6 | styleUrls: ['./ng-class-demo.component.css'] 7 | }) 8 | export class NgClassDemoComponent { 9 | tamanoCheck = false; 10 | colorCheck = false; 11 | 12 | constructor() { } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-for-demo/ng-for-demo.component.css: -------------------------------------------------------------------------------- 1 | .par { 2 | background-color: red; 3 | } 4 | 5 | .impar { 6 | background-color: blue; 7 | } 8 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-for-demo/ng-for-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Ejemplo 3 - Otras variables de contexto

3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 15 | 16 | 17 | 18 | 19 |
IndiceNombreEdad
{{ indice }}{{ persona.nombre }}{{ persona.edad }}
20 |
-------------------------------------------------------------------------------- /modulo3/src/app/ng-for-demo/ng-for-demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NgForDemoComponent } from './ng-for-demo.component'; 4 | 5 | describe('NgForDemoComponent', () => { 6 | let component: NgForDemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NgForDemoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NgForDemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-for-demo/ng-for-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-ng-for-demo', 5 | templateUrl: './ng-for-demo.component.html', 6 | styleUrls: ['./ng-for-demo.component.css'] 7 | }) 8 | export class NgForDemoComponent { 9 | personas: any[] = [ 10 | { nombre: "Felipe Gavilán", edad: 999 }, 11 | { nombre: "Claudia Rodríguez", edad: 43 }, 12 | { nombre: "Fernando Medina", edad: 23 }, 13 | { nombre: "Milton Encarnación", edad: 53 } 14 | ]; 15 | 16 | } 17 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-if-demo/ng-if-demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/ng-if-demo/ng-if-demo.component.css -------------------------------------------------------------------------------- /modulo3/src/app/ng-if-demo/ng-if-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Ejemplo 2 - Esperando la carga de un recurso

3 |
4 | La data ha cargado 5 |
6 |
7 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-if-demo/ng-if-demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NgIfDemoComponent } from './ng-if-demo.component'; 4 | 5 | describe('NgIfDemoComponent', () => { 6 | let component: NgIfDemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NgIfDemoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NgIfDemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-if-demo/ng-if-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-ng-if-demo', 5 | templateUrl: './ng-if-demo.component.html', 6 | styleUrls: ['./ng-if-demo.component.css'] 7 | }) 8 | export class NgIfDemoComponent { 9 | dataCargada: any; 10 | ngOnInit() { 11 | setTimeout(() => { 12 | this.dataCargada = 'cargada!'; 13 | }, 3000); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-model-demo/ng-model-demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/ng-model-demo/ng-model-demo.component.css -------------------------------------------------------------------------------- /modulo3/src/app/ng-model-demo/ng-model-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Ejemplo 1 - ngModel para hacer binding de dos vías (two-way binding)

3 | Escribe algo: 4 |
5 | El valor de la variable es: {{ texto }} 6 |

7 | 8 | 9 |
-------------------------------------------------------------------------------- /modulo3/src/app/ng-model-demo/ng-model-demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NgModelDemoComponent } from './ng-model-demo.component'; 4 | 5 | describe('NgModelDemoComponent', () => { 6 | let component: NgModelDemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NgModelDemoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NgModelDemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-model-demo/ng-model-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-ng-model-demo', 5 | templateUrl: './ng-model-demo.component.html', 6 | styleUrls: ['./ng-model-demo.component.css'] 7 | }) 8 | export class NgModelDemoComponent { 9 | texto: string; 10 | 11 | hacerMayusculas() { 12 | this.texto = this.texto.toUpperCase(); 13 | } 14 | 15 | hacerMinusculas() { 16 | this.texto = this.texto.toLowerCase(); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-style-demo/ng-style-demo.component.css: -------------------------------------------------------------------------------- 1 | .cuadrado { 2 | width: 100px; 3 | height: 100px; 4 | background-color: red; 5 | } 6 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-style-demo/ng-style-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Ejemplo 1 - Editando estilos dinámicamente

3 | Cambiar color 4 |
5 | Cambiar tamaño 6 |

7 | 8 |
9 |

10 | 11 |
16 |
17 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-style-demo/ng-style-demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NgStyleDemoComponent } from './ng-style-demo.component'; 4 | 5 | describe('NgStyleDemoComponent', () => { 6 | let component: NgStyleDemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NgStyleDemoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NgStyleDemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-style-demo/ng-style-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-ng-style-demo', 5 | templateUrl: './ng-style-demo.component.html', 6 | styleUrls: ['./ng-style-demo.component.css'] 7 | }) 8 | export class NgStyleDemoComponent { 9 | anchuraAltura = 100; 10 | colorCheck = false; 11 | } 12 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-switch-demo/ng-switch-demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/ng-switch-demo/ng-switch-demo.component.css -------------------------------------------------------------------------------- /modulo3/src/app/ng-switch-demo/ng-switch-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Ejemplo 1 - ngSwitch

3 | 4 | Seleccione una opción 5 | 10 | 11 |
12 |
Debe escoger una opcion
13 |
14 | Usted ha escogido ASP.NET, un framework de desarrollo de aplicaciones web 15 | creado por Microsoft 16 |
17 |
18 | Usted ha escogido Angular, una plataforma de desarrollo de aplicaciones 19 | modernas 20 |
21 |
22 |
-------------------------------------------------------------------------------- /modulo3/src/app/ng-switch-demo/ng-switch-demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NgSwitchDemoComponent } from './ng-switch-demo.component'; 4 | 5 | describe('NgSwitchDemoComponent', () => { 6 | let component: NgSwitchDemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NgSwitchDemoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NgSwitchDemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/ng-switch-demo/ng-switch-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-ng-switch-demo', 5 | templateUrl: './ng-switch-demo.component.html', 6 | styleUrls: ['./ng-switch-demo.component.css'] 7 | }) 8 | export class NgSwitchDemoComponent { 9 | opcion: string 10 | } 11 | -------------------------------------------------------------------------------- /modulo3/src/app/padre-a-hijo/hijo/hijo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/padre-a-hijo/hijo/hijo.component.css -------------------------------------------------------------------------------- /modulo3/src/app/padre-a-hijo/hijo/hijo.component.html: -------------------------------------------------------------------------------- 1 |

Componente hijo

2 | 3 | Aquí se muestra el texto en el componente hijo: {{ textoHijo }} -------------------------------------------------------------------------------- /modulo3/src/app/padre-a-hijo/hijo/hijo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HijoComponent } from './hijo.component'; 4 | 5 | describe('HijoComponent', () => { 6 | let component: HijoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HijoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HijoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/padre-a-hijo/hijo/hijo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-hijo', 5 | templateUrl: './hijo.component.html', 6 | styleUrls: ['./hijo.component.css'] 7 | }) 8 | export class HijoComponent { 9 | // @Input() 10 | // textoHijo: string; 11 | 12 | private _textoHijo: string; 13 | 14 | @Input() 15 | set textoHijo(value: string) { 16 | value = value || ''; 17 | this._textoHijo = value.toUpperCase(); 18 | } 19 | 20 | get textoHijo() {return this._textoHijo;} 21 | } 22 | -------------------------------------------------------------------------------- /modulo3/src/app/padre-a-hijo/padre/padre.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/padre-a-hijo/padre/padre.component.css -------------------------------------------------------------------------------- /modulo3/src/app/padre-a-hijo/padre/padre.component.html: -------------------------------------------------------------------------------- 1 |

Ejemplo 2 - Comunicación de Padre a Hijo - Usando getters y setters

2 | 3 |

Componente Padre

4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /modulo3/src/app/padre-a-hijo/padre/padre.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PadreComponent } from './padre.component'; 4 | 5 | describe('PadreComponent', () => { 6 | let component: PadreComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ PadreComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PadreComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo3/src/app/padre-a-hijo/padre/padre.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-padre', 5 | templateUrl: './padre.component.html', 6 | styleUrls: ['./padre.component.css'] 7 | }) 8 | export class PadreComponent { 9 | textoPadre: string; 10 | } 11 | -------------------------------------------------------------------------------- /modulo3/src/app/property-binding-demo/property-binding-demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/property-binding-demo/property-binding-demo.component.css -------------------------------------------------------------------------------- /modulo3/src/app/property-binding-demo/property-binding-demo.component.html: -------------------------------------------------------------------------------- 1 |

Binding de Propiedad

2 | 3 |
4 |

Ejemplo 1 - Binding de propiedad con un Select

5 | Seleccione una imagen: 6 | 14 |
15 | 16 |
17 | -------------------------------------------------------------------------------- /modulo3/src/app/property-binding-demo/property-binding-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-property-binding-demo', 5 | templateUrl: './property-binding-demo.component.html', 6 | styleUrls: ['./property-binding-demo.component.css'] 7 | }) 8 | export class PropertyBindingDemoComponent implements OnInit { 9 | 10 | imagenURL: string; 11 | 12 | ngOnInit(): void { 13 | this.imagenURL = (document.getElementById('selectImagen')).value; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /modulo3/src/app/var-ref-plantilla-demo/var-ref-plantilla-demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/app/var-ref-plantilla-demo/var-ref-plantilla-demo.component.css -------------------------------------------------------------------------------- /modulo3/src/app/var-ref-plantilla-demo/var-ref-plantilla-demo.component.html: -------------------------------------------------------------------------------- 1 |

Demo: Variable de Referencia de Plantilla

2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /modulo3/src/app/var-ref-plantilla-demo/var-ref-plantilla-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-var-ref-plantilla-demo', 5 | templateUrl: './var-ref-plantilla-demo.component.html', 6 | styleUrls: ['./var-ref-plantilla-demo.component.css'] 7 | }) 8 | export class VarRefPlantillaDemoComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /modulo3/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/assets/.gitkeep -------------------------------------------------------------------------------- /modulo3/src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /modulo3/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /modulo3/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /modulo3/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo3/src/favicon.ico -------------------------------------------------------------------------------- /modulo3/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Modulo3 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /modulo3/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /modulo3/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | * { 4 | font-family: 'calibri'; 5 | } -------------------------------------------------------------------------------- /modulo3/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /modulo3/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /modulo3/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /modulo3/src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /modulo3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es5", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2018", 18 | "dom" 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /modulo4/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /modulo4/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | -------------------------------------------------------------------------------- /modulo4/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to modulo4!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /modulo4/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /modulo4/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /modulo4/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /modulo4/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/app.component.css -------------------------------------------------------------------------------- /modulo4/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /modulo4/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'modulo4'; 10 | } 11 | -------------------------------------------------------------------------------- /modulo4/src/app/comunicacion-service.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { ComunicacionServiceService } from './comunicacion-service.service'; 4 | 5 | describe('ComunicacionServiceService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: ComunicacionServiceService = TestBed.get(ComunicacionServiceService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /modulo4/src/app/comunicacion-service.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Subject } from 'rxjs'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class ComunicacionService { 8 | mensaje: string; 9 | private enviarMensajeSubject = new Subject(); 10 | enviarMensajeObservable = this.enviarMensajeSubject.asObservable(); 11 | 12 | enviarMensaje(mensaje: string) { 13 | this.mensaje = mensaje; 14 | this.enviarMensajeSubject.next(mensaje); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /modulo4/src/app/estilos/hijo-estilos/hijo-estilos.component.css: -------------------------------------------------------------------------------- 1 | /* span { 2 | color: red; 3 | } */ -------------------------------------------------------------------------------- /modulo4/src/app/estilos/hijo-estilos/hijo-estilos.component.html: -------------------------------------------------------------------------------- 1 |

Componente Hijo

2 | 3 | Este es el componente hijo 4 | -------------------------------------------------------------------------------- /modulo4/src/app/estilos/hijo-estilos/hijo-estilos.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HijoEstilosComponent } from './hijo-estilos.component'; 4 | 5 | describe('HijoEstilosComponent', () => { 6 | let component: HijoEstilosComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HijoEstilosComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HijoEstilosComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/estilos/hijo-estilos/hijo-estilos.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'hijo-estilos', 5 | templateUrl: './hijo-estilos.component.html', 6 | styleUrls: ['./hijo-estilos.component.css'], 7 | encapsulation: ViewEncapsulation.Emulated 8 | }) 9 | export class HijoEstilosComponent implements OnInit { 10 | 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /modulo4/src/app/estilos/padre-estilos/padre-estilos.component.css: -------------------------------------------------------------------------------- 1 | /* span { 2 | color: blue; 3 | } */ -------------------------------------------------------------------------------- /modulo4/src/app/estilos/padre-estilos/padre-estilos.component.html: -------------------------------------------------------------------------------- 1 |

Componente Padre

2 | 3 | Este es el contenido del componente padre 4 | 5 | -------------------------------------------------------------------------------- /modulo4/src/app/estilos/padre-estilos/padre-estilos.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PadreEstilosComponent } from './padre-estilos.component'; 4 | 5 | describe('PadreEstilosComponent', () => { 6 | let component: PadreEstilosComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ PadreEstilosComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PadreEstilosComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/estilos/padre-estilos/padre-estilos.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'padre-estilos', 5 | templateUrl: './padre-estilos.component.html', 6 | styleUrls: ['./padre-estilos.component.css'], 7 | encapsulation: ViewEncapsulation.ShadowDom 8 | }) 9 | export class PadreEstilosComponent implements OnInit { 10 | 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /modulo4/src/app/hermanos/hijo1-her/hijo1-her.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/hermanos/hijo1-her/hijo1-her.component.css -------------------------------------------------------------------------------- /modulo4/src/app/hermanos/hijo1-her/hijo1-her.component.html: -------------------------------------------------------------------------------- 1 |

Componente hijo 1

2 | 3 | Escribe: 4 | -------------------------------------------------------------------------------- /modulo4/src/app/hermanos/hijo1-her/hijo1-her.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Hijo1HerComponent } from './hijo1-her.component'; 4 | 5 | describe('Hijo1HerComponent', () => { 6 | let component: Hijo1HerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ Hijo1HerComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(Hijo1HerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/hermanos/hijo1-her/hijo1-her.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'hijo1-her', 5 | templateUrl: './hijo1-her.component.html', 6 | styleUrls: ['./hijo1-her.component.css'] 7 | }) 8 | export class Hijo1HerComponent { 9 | @Output() 10 | textoCambiado: EventEmitter = new EventEmitter(); 11 | cambioTexto(texto: string) { 12 | this.textoCambiado.emit(texto); 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /modulo4/src/app/hermanos/hijo2-her/hijo2-her.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/hermanos/hijo2-her/hijo2-her.component.css -------------------------------------------------------------------------------- /modulo4/src/app/hermanos/hijo2-her/hijo2-her.component.html: -------------------------------------------------------------------------------- 1 |

Componente hijo 2

2 | 3 | Texto escrito en el componente hermano: {{ textoHijo2 }} 4 | -------------------------------------------------------------------------------- /modulo4/src/app/hermanos/hijo2-her/hijo2-her.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Hijo2HerComponent } from './hijo2-her.component'; 4 | 5 | describe('Hijo2HerComponent', () => { 6 | let component: Hijo2HerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ Hijo2HerComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(Hijo2HerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/hermanos/hijo2-her/hijo2-her.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'hijo2-her', 5 | templateUrl: './hijo2-her.component.html', 6 | styleUrls: ['./hijo2-her.component.css'] 7 | }) 8 | export class Hijo2HerComponent { 9 | @Input() 10 | textoHijo2: String; 11 | 12 | } 13 | -------------------------------------------------------------------------------- /modulo4/src/app/hermanos/padre-her/padre-her.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/hermanos/padre-her/padre-her.component.css -------------------------------------------------------------------------------- /modulo4/src/app/hermanos/padre-her/padre-her.component.html: -------------------------------------------------------------------------------- 1 |

Comunicación entre componentes hermanos

2 | 3 | 4 |
5 | 6 | -------------------------------------------------------------------------------- /modulo4/src/app/hermanos/padre-her/padre-her.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PadreHerComponent } from './padre-her.component'; 4 | 5 | describe('PadreHerComponent', () => { 6 | let component: PadreHerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ PadreHerComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PadreHerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/hermanos/padre-her/padre-her.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'padre-her', 5 | templateUrl: './padre-her.component.html', 6 | styleUrls: ['./padre-her.component.css'] 7 | }) 8 | export class PadreHerComponent { 9 | textoHijo1: string; 10 | } 11 | -------------------------------------------------------------------------------- /modulo4/src/app/hijo-a-padre/hijo-hap/hijo-hap.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/hijo-a-padre/hijo-hap/hijo-hap.component.css -------------------------------------------------------------------------------- /modulo4/src/app/hijo-a-padre/hijo-hap/hijo-hap.component.html: -------------------------------------------------------------------------------- 1 |

Componente hijo

2 | 3 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /modulo4/src/app/hijo-a-padre/hijo-hap/hijo-hap.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HijoHapComponent } from './hijo-hap.component'; 4 | 5 | describe('HijoHapComponent', () => { 6 | let component: HijoHapComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HijoHapComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HijoHapComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/hijo-a-padre/hijo-hap/hijo-hap.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, EventEmitter, Output } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'hijo-hap', 5 | templateUrl: './hijo-hap.component.html', 6 | styleUrls: ['./hijo-hap.component.css'] 7 | }) 8 | export class HijoHapComponent { 9 | @Output() 10 | enviar: EventEmitter = new EventEmitter(); 11 | textoHijo: string; 12 | 13 | botonClick() { 14 | this.enviar.emit(this.textoHijo); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /modulo4/src/app/hijo-a-padre/padre-hap/padre-hap.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/hijo-a-padre/padre-hap/padre-hap.component.css -------------------------------------------------------------------------------- /modulo4/src/app/hijo-a-padre/padre-hap/padre-hap.component.html: -------------------------------------------------------------------------------- 1 |

Ejemplo 1 - Recibiendo un mensaje del componente hijo

2 | 3 |

Componente Padre

4 | 5 | Mensaje desde el componente hijo: {{ textoPadre }} 6 | 7 | -------------------------------------------------------------------------------- /modulo4/src/app/hijo-a-padre/padre-hap/padre-hap.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PadreHapComponent } from './padre-hap.component'; 4 | 5 | describe('PadreHapComponent', () => { 6 | let component: PadreHapComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ PadreHapComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PadreHapComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/hijo-a-padre/padre-hap/padre-hap.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'padre-hap', 5 | templateUrl: './padre-hap.component.html', 6 | styleUrls: ['./padre-hap.component.css'] 7 | }) 8 | export class PadreHapComponent { 9 | textoPadre: string; 10 | 11 | recibirMensaje(mensaje: string) { 12 | this.textoPadre = mensaje; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/hijo-a-lej/hijo-a-lej.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/lejanos/hijo-a-lej/hijo-a-lej.component.css -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/hijo-a-lej/hijo-a-lej.component.html: -------------------------------------------------------------------------------- 1 |

Componente hijo A

2 |
3 | 4 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/hijo-a-lej/hijo-a-lej.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HijoALejComponent } from './hijo-a-lej.component'; 4 | 5 | describe('HijoALejComponent', () => { 6 | let component: HijoALejComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HijoALejComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HijoALejComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/hijo-a-lej/hijo-a-lej.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'hijo-a-lej', 5 | templateUrl: './hijo-a-lej.component.html', 6 | styleUrls: ['./hijo-a-lej.component.css'] 7 | }) 8 | export class HijoALejComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/hijo-b-lej/hijo-b-lej.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/lejanos/hijo-b-lej/hijo-b-lej.component.css -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/hijo-b-lej/hijo-b-lej.component.html: -------------------------------------------------------------------------------- 1 |

Componente hijo B

2 | 3 | Esto es lo escrito en el textbox:
4 |
{{ mensaje }}
5 |
6 | 7 |
8 | 9 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/hijo-b-lej/hijo-b-lej.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HijoBLejComponent } from './hijo-b-lej.component'; 4 | 5 | describe('HijoBLejComponent', () => { 6 | let component: HijoBLejComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HijoBLejComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HijoBLejComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/hijo-b-lej/hijo-b-lej.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ComunicacionService } from 'src/app/comunicacion-service.service'; 3 | 4 | @Component({ 5 | selector: 'hijo-b-lej', 6 | templateUrl: './hijo-b-lej.component.html', 7 | styleUrls: ['./hijo-b-lej.component.css'] 8 | }) 9 | export class HijoBLejComponent { 10 | 11 | mensaje: string; 12 | constructor(private comunicacionService: ComunicacionService) { } 13 | 14 | recibirCambios() { 15 | this.mensaje = this.comunicacionService.mensaje; 16 | } 17 | 18 | 19 | } 20 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/nieto-a-lej/nieto-a-lej.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/lejanos/nieto-a-lej/nieto-a-lej.component.css -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/nieto-a-lej/nieto-a-lej.component.html: -------------------------------------------------------------------------------- 1 |

Componente Nieto A

2 | 3 | Escribe aquí
4 | 6 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/nieto-a-lej/nieto-a-lej.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NietoALejComponent } from './nieto-a-lej.component'; 4 | 5 | describe('NietoALejComponent', () => { 6 | let component: NietoALejComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NietoALejComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NietoALejComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/nieto-a-lej/nieto-a-lej.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ComunicacionService } from 'src/app/comunicacion-service.service'; 3 | 4 | @Component({ 5 | selector: 'nieto-a-lej', 6 | templateUrl: './nieto-a-lej.component.html', 7 | styleUrls: ['./nieto-a-lej.component.css'] 8 | }) 9 | export class NietoALejComponent implements OnInit { 10 | mensaje: string; 11 | constructor(private servicioComunicacion: ComunicacionService) { } 12 | 13 | ngOnInit(): void { 14 | this.servicioComunicacion.enviarMensajeObservable.subscribe(response => { 15 | this.mensaje = response; 16 | }); 17 | } 18 | 19 | cambioTexto(mensaje: string) { 20 | this.servicioComunicacion.enviarMensaje(mensaje); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/nieto-b-lej/nieto-b-lej.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/lejanos/nieto-b-lej/nieto-b-lej.component.css -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/nieto-b-lej/nieto-b-lej.component.html: -------------------------------------------------------------------------------- 1 |

Componente Nieto B

2 | 3 | Escribe aquí
4 | 6 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/nieto-b-lej/nieto-b-lej.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NietoBLejComponent } from './nieto-b-lej.component'; 4 | 5 | describe('NietoBLejComponent', () => { 6 | let component: NietoBLejComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NietoBLejComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NietoBLejComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/nieto-b-lej/nieto-b-lej.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ComunicacionService } from 'src/app/comunicacion-service.service'; 3 | 4 | @Component({ 5 | selector: 'nieto-b-lej', 6 | templateUrl: './nieto-b-lej.component.html', 7 | styleUrls: ['./nieto-b-lej.component.css'] 8 | }) 9 | export class NietoBLejComponent { 10 | 11 | mensaje: string; 12 | constructor(private servicioComunicacion: ComunicacionService) {} 13 | 14 | ngOnInit(): void { 15 | this.servicioComunicacion.enviarMensajeObservable.subscribe(response => { 16 | this.mensaje = response; 17 | }); 18 | } 19 | 20 | cambioTexto(mensaje: string) { 21 | this.servicioComunicacion.enviarMensaje(mensaje); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/padre-lej/padre-lej.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/lejanos/padre-lej/padre-lej.component.css -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/padre-lej/padre-lej.component.html: -------------------------------------------------------------------------------- 1 |

Componente Padre

2 | 3 | Esto es lo escrito en el textbox:
4 |
{{ comunicacionService.mensaje }}
5 | 6 |
7 | 8 | 9 | 10 |
11 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/padre-lej/padre-lej.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PadreLejComponent } from './padre-lej.component'; 4 | 5 | describe('PadreLejComponent', () => { 6 | let component: PadreLejComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ PadreLejComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PadreLejComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/lejanos/padre-lej/padre-lej.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ComunicacionService } from 'src/app/comunicacion-service.service'; 3 | 4 | @Component({ 5 | selector: 'padre-lej', 6 | templateUrl: './padre-lej.component.html', 7 | styleUrls: ['./padre-lej.component.css'] 8 | }) 9 | export class PadreLejComponent { 10 | constructor(public comunicacionService: ComunicacionService) { } 11 | } 12 | -------------------------------------------------------------------------------- /modulo4/src/app/padre-a-hijo/hijo-pah/hijo-pah.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/padre-a-hijo/hijo-pah/hijo-pah.component.css -------------------------------------------------------------------------------- /modulo4/src/app/padre-a-hijo/hijo-pah/hijo-pah.component.html: -------------------------------------------------------------------------------- 1 |

Componente hijo

2 | 3 | Aquí se muestra el texto en el componente hijo: {{ textoHijo }} 4 | -------------------------------------------------------------------------------- /modulo4/src/app/padre-a-hijo/hijo-pah/hijo-pah.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HijoPahComponent } from './hijo-pah.component'; 4 | 5 | describe('HijoPahComponent', () => { 6 | let component: HijoPahComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HijoPahComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HijoPahComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/padre-a-hijo/hijo-pah/hijo-pah.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'hijo-pah', 5 | templateUrl: './hijo-pah.component.html', 6 | styleUrls: ['./hijo-pah.component.css'] 7 | }) 8 | export class HijoPahComponent { 9 | // Ejemplo 1. 10 | // @Input() 11 | // textoHijo: string; 12 | 13 | // Ejemplo 2. 14 | private _textoHijo: string; 15 | 16 | @Input() 17 | set textoHijo(value: string) { 18 | value = value || ''; 19 | this._textoHijo = value.toUpperCase(); 20 | } 21 | 22 | get textoHijo() { return this._textoHijo; } 23 | } 24 | -------------------------------------------------------------------------------- /modulo4/src/app/padre-a-hijo/padre-pah/padre-pah.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/padre-a-hijo/padre-pah/padre-pah.component.css -------------------------------------------------------------------------------- /modulo4/src/app/padre-a-hijo/padre-pah/padre-pah.component.html: -------------------------------------------------------------------------------- 1 |

Ejemplo 1 - Comunicación de Padre a Hijo

2 | 3 |

Componente Padre

4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /modulo4/src/app/padre-a-hijo/padre-pah/padre-pah.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PadrePahComponent } from './padre-pah.component'; 4 | 5 | describe('PadrePahComponent', () => { 6 | let component: PadrePahComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ PadrePahComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PadrePahComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/padre-a-hijo/padre-pah/padre-pah.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'padre-pah', 5 | templateUrl: './padre-pah.component.html', 6 | styleUrls: ['./padre-pah.component.css'] 7 | }) 8 | export class PadrePahComponent { 9 | textoPadre: string; 10 | } 11 | -------------------------------------------------------------------------------- /modulo4/src/app/proyeccion/hijo-proyeccion/hijo-proyeccion.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/proyeccion/hijo-proyeccion/hijo-proyeccion.component.css -------------------------------------------------------------------------------- /modulo4/src/app/proyeccion/hijo-proyeccion/hijo-proyeccion.component.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 |
9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /modulo4/src/app/proyeccion/hijo-proyeccion/hijo-proyeccion.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'hijo-proyeccion', 5 | templateUrl: './hijo-proyeccion.component.html', 6 | styleUrls: ['./hijo-proyeccion.component.css'] 7 | }) 8 | export class HijoProyeccionComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /modulo4/src/app/proyeccion/padre-proyeccion/padre-proyeccion.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/proyeccion/padre-proyeccion/padre-proyeccion.component.css -------------------------------------------------------------------------------- /modulo4/src/app/proyeccion/padre-proyeccion/padre-proyeccion.component.html: -------------------------------------------------------------------------------- 1 |

Componente Padre

2 | 3 | 4 | 10 | 11 | 12 | 13 | Esta es la cabecera 14 | Este es el cuerpo 15 | Este es el pie 16 | -------------------------------------------------------------------------------- /modulo4/src/app/proyeccion/padre-proyeccion/padre-proyeccion.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'padre-proyeccion', 5 | templateUrl: './padre-proyeccion.component.html', 6 | styleUrls: ['./padre-proyeccion.component.css'] 7 | }) 8 | export class PadreProyeccionComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | handleClick(){ 16 | alert('click'); 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /modulo4/src/app/proyeccion/proyectado/proyectado.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/proyeccion/proyectado/proyectado.component.css -------------------------------------------------------------------------------- /modulo4/src/app/proyeccion/proyectado/proyectado.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /modulo4/src/app/proyeccion/proyectado/proyectado.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ProyectadoComponent } from './proyectado.component'; 4 | 5 | describe('ProyectadoComponent', () => { 6 | let component: ProyectadoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ProyectadoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ProyectadoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo4/src/app/proyeccion/proyectado/proyectado.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'proyectado', 5 | templateUrl: './proyectado.component.html', 6 | styleUrls: ['./proyectado.component.css'] 7 | }) 8 | export class ProyectadoComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /modulo4/src/app/viewChild/hijo-view-child/hijo-view-child.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/viewChild/hijo-view-child/hijo-view-child.component.css -------------------------------------------------------------------------------- /modulo4/src/app/viewChild/hijo-view-child/hijo-view-child.component.html: -------------------------------------------------------------------------------- 1 |

Componente hijo

2 | 3 | Mensaje: {{ mensaje }} 4 | -------------------------------------------------------------------------------- /modulo4/src/app/viewChild/hijo-view-child/hijo-view-child.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'hijo-view-child', 5 | templateUrl: './hijo-view-child.component.html', 6 | styleUrls: ['./hijo-view-child.component.css'] 7 | }) 8 | export class HijoViewChildComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | mensaje: string; 15 | editarMensaje(mensaje: string) { 16 | this.mensaje = mensaje; 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /modulo4/src/app/viewChild/padre-view-child/padre-view-child.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/viewChild/padre-view-child/padre-view-child.component.css -------------------------------------------------------------------------------- /modulo4/src/app/viewChild/padre-view-child/padre-view-child.component.html: -------------------------------------------------------------------------------- 1 |

Ejemplo 1. Utilizando ViewChild con una variable de referencia de plantilla

2 | 3 | Escribe algo: 4 | 5 | {{mensajeDeError}} 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /modulo4/src/app/viewChildren/hijo-view-children/hijo-view-children.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/viewChildren/hijo-view-children/hijo-view-children.component.css -------------------------------------------------------------------------------- /modulo4/src/app/viewChildren/hijo-view-children/hijo-view-children.component.html: -------------------------------------------------------------------------------- 1 |

2 | Este es un componente hijo 3 |

4 | -------------------------------------------------------------------------------- /modulo4/src/app/viewChildren/hijo-view-children/hijo-view-children.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'hijo-view-children', 5 | templateUrl: './hijo-view-children.component.html', 6 | styleUrls: ['./hijo-view-children.component.css'] 7 | }) 8 | export class HijoViewChildrenComponent implements OnInit { 9 | colorCheck = true; 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | voltearColor() { 16 | this.colorCheck = !this.colorCheck; 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /modulo4/src/app/viewChildren/padre-view-children/padre-view-children.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/app/viewChildren/padre-view-children/padre-view-children.component.css -------------------------------------------------------------------------------- /modulo4/src/app/viewChildren/padre-view-children/padre-view-children.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

5 | 6 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /modulo4/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/assets/.gitkeep -------------------------------------------------------------------------------- /modulo4/src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /modulo4/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /modulo4/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /modulo4/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo4/src/favicon.ico -------------------------------------------------------------------------------- /modulo4/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Modulo4 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /modulo4/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /modulo4/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | span { 4 | color: green; 5 | } 6 | -------------------------------------------------------------------------------- /modulo4/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /modulo4/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /modulo4/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /modulo4/src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /modulo4/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es5", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2018", 18 | "dom" 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /modulo6/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /modulo6/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events.json 15 | speed-measure-plugin.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /modulo6/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to modulo6!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /modulo6/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /modulo6/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /modulo6/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /modulo6/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo6/src/app/app.component.css -------------------------------------------------------------------------------- /modulo6/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /modulo6/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'modulo6'; 10 | } 11 | -------------------------------------------------------------------------------- /modulo6/src/app/first.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { FirstService } from './first.service'; 4 | 5 | describe('FirstService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: FirstService = TestBed.get(FirstService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /modulo6/src/app/first.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class FirstService { 7 | fireAlert(message: string) { 8 | alert(message); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /modulo6/src/app/get-list-demo/get-list-demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo6/src/app/get-list-demo/get-list-demo.component.css -------------------------------------------------------------------------------- /modulo6/src/app/get-list-demo/get-list-demo.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
IdNameUsername
{{ user.id }}{{ user.name }}{{ user.username }}
18 | 19 | -------------------------------------------------------------------------------- /modulo6/src/app/get-list-demo/get-list-demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { GetListDemoComponent } from './get-list-demo.component'; 4 | 5 | describe('GetListDemoComponent', () => { 6 | let component: GetListDemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ GetListDemoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(GetListDemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo6/src/app/get-list-demo/get-list-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { User } from '../models/user'; 3 | import { UserService } from '../services/user.service'; 4 | 5 | @Component({ 6 | selector: 'app-get-list-demo', 7 | templateUrl: './get-list-demo.component.html', 8 | styleUrls: ['./get-list-demo.component.css'] 9 | }) 10 | export class GetListDemoComponent implements OnInit { 11 | users: User[]; 12 | 13 | constructor(private userService: UserService) { } 14 | 15 | ngOnInit() { 16 | this.userService.getUsersWithHeaders().subscribe((response: any) => { 17 | console.log(response); 18 | this.users = response.body 19 | }, error => console.error(error)); 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /modulo6/src/app/gets/get-demo/get-demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo6/src/app/gets/get-demo/get-demo.component.css -------------------------------------------------------------------------------- /modulo6/src/app/gets/get-demo/get-demo.component.html: -------------------------------------------------------------------------------- 1 | Put the user ID: 2 | 3 | 4 | 5 |
6 | 7 | 8 | User not found 9 | 10 | 11 | 12 |
13 | Id: {{ user.id }} 14 |
15 | 16 |
17 | Name: {{ user.name }} 18 |
19 | 20 |
21 | Username: {{ user.username }} 22 |
23 | -------------------------------------------------------------------------------- /modulo6/src/app/gets/get-demo/get-demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { GetDemoComponent } from './get-demo.component'; 4 | 5 | describe('GetDemoComponent', () => { 6 | let component: GetDemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ GetDemoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(GetDemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo6/src/app/http-patch-demo/http-patch-demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo6/src/app/http-patch-demo/http-patch-demo.component.css -------------------------------------------------------------------------------- /modulo6/src/app/http-patch-demo/http-patch-demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HttpPatchDemoComponent } from './http-patch-demo.component'; 4 | 5 | describe('HttpPatchDemoComponent', () => { 6 | let component: HttpPatchDemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HttpPatchDemoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HttpPatchDemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo6/src/app/http-post-demo/http-post-demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo6/src/app/http-post-demo/http-post-demo.component.css -------------------------------------------------------------------------------- /modulo6/src/app/http-post-demo/http-post-demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HttpPostDemoComponent } from './http-post-demo.component'; 4 | 5 | describe('HttpPostDemoComponent', () => { 6 | let component: HttpPostDemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HttpPostDemoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HttpPostDemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo6/src/app/http-post-demo/http-post-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { User } from '../models/user'; 3 | import { UserService } from '../services/user.service'; 4 | 5 | @Component({ 6 | selector: 'app-http-post-demo', 7 | templateUrl: './http-post-demo.component.html', 8 | styleUrls: ['./http-post-demo.component.css'] 9 | }) 10 | export class HttpPostDemoComponent implements OnInit { 11 | 12 | model: User = {id: 0, name: '', username: ''}; 13 | 14 | constructor(private userService: UserService) { } 15 | 16 | ngOnInit() { 17 | } 18 | 19 | onSubmit() { 20 | // console.log(this.model); 21 | this.userService.createUser(this.model).subscribe((response: User) => console.log(response)); 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /modulo6/src/app/intro-to-services/intro-to-services.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo6/src/app/intro-to-services/intro-to-services.component.css -------------------------------------------------------------------------------- /modulo6/src/app/intro-to-services/intro-to-services.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /modulo6/src/app/intro-to-services/intro-to-services.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FirstService } from '../first.service'; 3 | 4 | @Component({ 5 | selector: 'app-intro-to-services', 6 | templateUrl: './intro-to-services.component.html', 7 | styleUrls: ['./intro-to-services.component.css'] 8 | }) 9 | export class IntroToServicesComponent implements OnInit { 10 | 11 | constructor(private firstService: FirstService) { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | handleClick(){ 17 | this.firstService.fireAlert('I have been clicked'); 18 | } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /modulo6/src/app/models/user.ts: -------------------------------------------------------------------------------- 1 | export interface User { 2 | id: number; 3 | name: string; 4 | username: string; 5 | } 6 | -------------------------------------------------------------------------------- /modulo6/src/app/services/auth-interceptor.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { AuthInterceptorService } from './auth-interceptor.service'; 4 | 5 | describe('AuthInterceptorService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: AuthInterceptorService = TestBed.get(AuthInterceptorService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /modulo6/src/app/services/auth-interceptor.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http'; 3 | import { Observable } from 'rxjs'; 4 | 5 | @Injectable() 6 | export class AuthInterceptorService implements HttpInterceptor { 7 | 8 | intercept(req: HttpRequest, next: HttpHandler): Observable> { 9 | console.log('http interceptor'); 10 | req = req.clone({ 11 | setHeaders: {'Authorization': 'token http header'} 12 | }); 13 | return next.handle(req); 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /modulo6/src/app/services/user.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { UserService } from './user.service'; 4 | 5 | describe('UserService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: UserService = TestBed.get(UserService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /modulo6/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo6/src/assets/.gitkeep -------------------------------------------------------------------------------- /modulo6/src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /modulo6/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /modulo6/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | apiURL: 'https://jsonplaceholder.typicode.com/' 8 | }; 9 | 10 | /* 11 | * For easier debugging in development mode, you can import the following file 12 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 13 | * 14 | * This import should be commented out in production mode because it will have a negative impact 15 | * on performance if an error is thrown. 16 | */ 17 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 18 | -------------------------------------------------------------------------------- /modulo6/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo6/src/favicon.ico -------------------------------------------------------------------------------- /modulo6/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Modulo6 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /modulo6/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /modulo6/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /modulo6/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /modulo6/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /modulo6/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /modulo6/src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /modulo6/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es5", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /modulo7/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /modulo7/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /modulo7/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to modulo7!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /modulo7/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /modulo7/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /modulo7/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .bottomright { 2 | position: fixed; 3 | bottom: 0px; 4 | right: 0px; 5 | } 6 | -------------------------------------------------------------------------------- /modulo7/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 6 |
7 | 8 |
-------------------------------------------------------------------------------- /modulo7/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'modulo7'; 10 | } 11 | -------------------------------------------------------------------------------- /modulo7/src/app/boton-panico/boton-panico.component.css: -------------------------------------------------------------------------------- 1 | .container-main { 2 | margin: 0 5px 5px 0; 3 | width: 300px; 4 | background-color: white; 5 | } 6 | 7 | .container-enviado { 8 | text-align: center; 9 | } 10 | -------------------------------------------------------------------------------- /modulo7/src/app/boton-panico/boton-panico.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 |
6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 |
17 |

18 | La ayuda va en camino! 19 |

20 | 21 |
22 | 23 |
-------------------------------------------------------------------------------- /modulo7/src/app/boton-panico/boton-panico.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { BotonPanicoComponent } from './boton-panico.component'; 4 | 5 | describe('BotonPanicoComponent', () => { 6 | let component: BotonPanicoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ BotonPanicoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(BotonPanicoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo7/src/app/boton-panico/boton-panico.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-boton-panico', 6 | templateUrl: './boton-panico.component.html', 7 | styleUrls: ['./boton-panico.component.css'] 8 | }) 9 | export class BotonPanicoComponent implements OnInit { 10 | 11 | enviado = false; 12 | constructor(private router: Router) { } 13 | 14 | cerrar() { 15 | this.router.navigate([{ outlets: { popup: null } }]); 16 | } 17 | 18 | 19 | ngOnInit() { 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /modulo7/src/app/can-activate.guard.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async, inject } from '@angular/core/testing'; 2 | 3 | import { CanActivateGuard } from './can-activate.guard'; 4 | 5 | describe('CanActivateGuard', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [CanActivateGuard] 9 | }); 10 | }); 11 | 12 | it('should ...', inject([CanActivateGuard], (guard: CanActivateGuard) => { 13 | expect(guard).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /modulo7/src/app/can-deactivate.guard.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async, inject } from '@angular/core/testing'; 2 | 3 | import { CanDeactivateGuard } from './can-deactivate.guard'; 4 | 5 | describe('CanDeactivateGuard', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [CanDeactivateGuard] 9 | }); 10 | }); 11 | 12 | it('should ...', inject([CanDeactivateGuard], (guard: CanDeactivateGuard) => { 13 | expect(guard).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /modulo7/src/app/can-deactivate.guard.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanDeactivate } from '@angular/router'; 3 | import { Observable } from 'rxjs'; 4 | 5 | export interface PuedeDesactivar { 6 | permitirSalirDeRuta: () => Observable | Promise | boolean; 7 | } 8 | 9 | @Injectable({ 10 | providedIn: 'root' 11 | }) 12 | export class CanDeactivateGuard implements CanDeactivate { 13 | canDeactivate(component: PuedeDesactivar) { 14 | return component.permitirSalirDeRuta ? component.permitirSalirDeRuta() : true; 15 | } 16 | } -------------------------------------------------------------------------------- /modulo7/src/app/contacto/contacto.component.css: -------------------------------------------------------------------------------- 1 | .container-contacto textarea { 2 | height: 200px; 3 | } 4 | -------------------------------------------------------------------------------- /modulo7/src/app/contacto/contacto.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 |
6 | 7 |
8 | -------------------------------------------------------------------------------- /modulo7/src/app/contacto/contacto.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ContactoComponent } from './contacto.component'; 4 | 5 | describe('ContactoComponent', () => { 6 | let component: ContactoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ContactoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ContactoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo7/src/app/login/login.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo7/src/app/login/login.component.css -------------------------------------------------------------------------------- /modulo7/src/app/login/login.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 |
6 |
7 | 8 | 9 |
10 | 11 |
-------------------------------------------------------------------------------- /modulo7/src/app/login/login.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LoginComponent } from './login.component'; 4 | 5 | describe('LoginComponent', () => { 6 | let component: LoginComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ LoginComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(LoginComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo7/src/app/login/login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { AuthService } from '../services/auth.service'; 3 | import { Router } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-login', 7 | templateUrl: './login.component.html', 8 | styleUrls: ['./login.component.css'] 9 | }) 10 | export class LoginComponent implements OnInit { 11 | 12 | constructor(private authService: AuthService, 13 | private router: Router) { } 14 | 15 | routeRedirect = ''; 16 | 17 | login() { 18 | this.authService.login(); 19 | this.routeRedirect = this.authService.urlUsuarioIntentaAcceder; 20 | this.authService.urlUsuarioIntentaAcceder = ''; 21 | this.router.navigate([this.routeRedirect]); 22 | } 23 | 24 | 25 | ngOnInit() { 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /modulo7/src/app/menu/menu.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo7/src/app/menu/menu.component.css -------------------------------------------------------------------------------- /modulo7/src/app/menu/menu.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MenuComponent } from './menu.component'; 4 | 5 | describe('MenuComponent', () => { 6 | let component: MenuComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MenuComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MenuComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo7/src/app/menu/menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { AuthService } from '../services/auth.service'; 3 | 4 | @Component({ 5 | selector: 'app-menu', 6 | templateUrl: './menu.component.html', 7 | styleUrls: ['./menu.component.css'] 8 | }) 9 | export class MenuComponent implements OnInit { 10 | 11 | usuarioLogueado = false; 12 | constructor(public authService: AuthService) { } 13 | 14 | ngOnInit() { 15 | this.usuarioLogueado = this.authService.isLoggedIn(''); 16 | this.authService.changeLoginStatus$.subscribe((loggedStatus: boolean) => { 17 | this.usuarioLogueado = loggedStatus; 18 | }) 19 | } 20 | 21 | logout() { 22 | this.authService.logout(); 23 | } 24 | 25 | 26 | } 27 | -------------------------------------------------------------------------------- /modulo7/src/app/models/post.ts: -------------------------------------------------------------------------------- 1 | export interface Post { 2 | userId: number; 3 | id: number; 4 | title: string; 5 | body: string; 6 | } 7 | -------------------------------------------------------------------------------- /modulo7/src/app/models/usuario.ts: -------------------------------------------------------------------------------- 1 | export interface Usuario { 2 | id: number; 3 | name: string; 4 | username: string; 5 | } 6 | -------------------------------------------------------------------------------- /modulo7/src/app/posts-resolver.guard.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async, inject } from '@angular/core/testing'; 2 | 3 | import { PostsResolverGuard } from './posts-resolver.guard'; 4 | 5 | describe('PostsResolverGuard', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [PostsResolverGuard] 9 | }); 10 | }); 11 | 12 | it('should ...', inject([PostsResolverGuard], (guard: PostsResolverGuard) => { 13 | expect(guard).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /modulo7/src/app/posts/posts.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo7/src/app/posts/posts.component.css -------------------------------------------------------------------------------- /modulo7/src/app/posts/posts.component.html: -------------------------------------------------------------------------------- 1 |

Componente de Posts

2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
User IdTitleBody
{{post.userId}}{{ post.title }}{{ post.body }}
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /modulo7/src/app/posts/posts.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PostsComponent } from './posts.component'; 4 | 5 | describe('PostsComponent', () => { 6 | let component: PostsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ PostsComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PostsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo7/src/app/posts/posts.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { PostsRoutingModule } from './posts-routing.module'; 5 | import { PostsComponent } from './posts.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | PostsComponent 10 | ], 11 | imports: [ 12 | CommonModule, 13 | PostsRoutingModule 14 | ] 15 | }) 16 | export class PostsModule { } 17 | -------------------------------------------------------------------------------- /modulo7/src/app/services/auth.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { AuthService } from './auth.service'; 4 | 5 | describe('AuthService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: AuthService = TestBed.get(AuthService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /modulo7/src/app/services/web-api.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { WebApiService } from './web-api.service'; 4 | 5 | describe('WebApiService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: WebApiService = TestBed.get(WebApiService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /modulo7/src/app/usuarios/usuario-detalle/usuario-detalle.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo7/src/app/usuarios/usuario-detalle/usuario-detalle.component.css -------------------------------------------------------------------------------- /modulo7/src/app/usuarios/usuario-detalle/usuario-detalle.component.html: -------------------------------------------------------------------------------- 1 |

2 | usuario-detalle works! 3 |

4 | -------------------------------------------------------------------------------- /modulo7/src/app/usuarios/usuario-detalle/usuario-detalle.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-usuario-detalle', 5 | templateUrl: './usuario-detalle.component.html', 6 | styleUrls: ['./usuario-detalle.component.css'] 7 | }) 8 | export class UsuarioDetalleComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /modulo7/src/app/usuarios/usuarios-listado/usuarios-listado.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo7/src/app/usuarios/usuarios-listado/usuarios-listado.component.css -------------------------------------------------------------------------------- /modulo7/src/app/usuarios/usuarios-listado/usuarios-listado.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
NameUsername
{{ usuario.name }}{{ usuario.username }}
18 | -------------------------------------------------------------------------------- /modulo7/src/app/usuarios/usuarios-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { UsuariosComponent } from './usuarios.component'; 4 | import { UsuariosListadoComponent } from './usuarios-listado/usuarios-listado.component'; 5 | import { UsuarioDetalleComponent } from './usuario-detalle/usuario-detalle.component'; 6 | 7 | const routes: Routes = [ 8 | {path: 'usuarios', component: UsuariosComponent, 9 | children: [ 10 | {path: '', component: UsuariosListadoComponent}, 11 | {path: ':id', component: UsuarioDetalleComponent} 12 | ]}, 13 | ]; 14 | 15 | @NgModule({ 16 | imports: [RouterModule.forChild(routes)], 17 | exports: [RouterModule] 18 | }) 19 | export class UsuariosRoutingModule { } 20 | -------------------------------------------------------------------------------- /modulo7/src/app/usuarios/usuarios.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo7/src/app/usuarios/usuarios.component.css -------------------------------------------------------------------------------- /modulo7/src/app/usuarios/usuarios.component.html: -------------------------------------------------------------------------------- 1 |

Componente de Usuarios

2 | 3 | -------------------------------------------------------------------------------- /modulo7/src/app/usuarios/usuarios.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UsuariosComponent } from './usuarios.component'; 4 | 5 | describe('UsuariosComponent', () => { 6 | let component: UsuariosComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ UsuariosComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(UsuariosComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo7/src/app/usuarios/usuarios.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import { WebApiService } from '../services/web-api.service'; 4 | import { Usuario } from '../models/usuario'; 5 | 6 | @Component({ 7 | selector: 'app-usuarios', 8 | templateUrl: './usuarios.component.html', 9 | styleUrls: ['./usuarios.component.css'] 10 | }) 11 | export class UsuariosComponent implements OnInit { 12 | constructor(private router: Router, 13 | private webApiService: WebApiService) { } 14 | usuarios: Usuario[]; 15 | 16 | ngOnInit() { 17 | 18 | } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /modulo7/src/app/usuarios/usuarios.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { UsuariosRoutingModule } from './usuarios-routing.module'; 5 | import { UsuariosComponent } from './usuarios.component'; 6 | import { UsuariosListadoComponent } from './usuarios-listado/usuarios-listado.component'; 7 | import { UsuarioDetalleComponent } from './usuario-detalle/usuario-detalle.component'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | UsuariosComponent, 12 | UsuariosListadoComponent, 13 | UsuarioDetalleComponent 14 | ], 15 | imports: [ 16 | CommonModule, 17 | UsuariosRoutingModule 18 | ] 19 | }) 20 | export class UsuariosModule { } 21 | -------------------------------------------------------------------------------- /modulo7/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo7/src/assets/.gitkeep -------------------------------------------------------------------------------- /modulo7/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /modulo7/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | apiURL: 'https://jsonplaceholder.typicode.com/' 8 | }; 9 | 10 | /* 11 | * For easier debugging in development mode, you can import the following file 12 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 13 | * 14 | * This import should be commented out in production mode because it will have a negative impact 15 | * on performance if an error is thrown. 16 | */ 17 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 18 | -------------------------------------------------------------------------------- /modulo7/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo7/src/favicon.ico -------------------------------------------------------------------------------- /modulo7/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Modulo7 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /modulo7/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /modulo7/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /modulo7/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /modulo7/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ], 10 | "exclude": [ 11 | "src/test.ts", 12 | "src/**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /modulo7/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /modulo7/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /modulo8/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /modulo8/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /modulo8/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to modulo8!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /modulo8/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /modulo8/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /modulo8/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /modulo8/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo8/src/app/app.component.css -------------------------------------------------------------------------------- /modulo8/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /modulo8/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'modulo8'; 10 | } 11 | -------------------------------------------------------------------------------- /modulo8/src/app/models/registro.ts: -------------------------------------------------------------------------------- 1 | import { Suscripcion } from './suscripcion.enum'; 2 | 3 | export interface Registro { 4 | username: string; 5 | password: string; 6 | suscripcion: Suscripcion; 7 | promociones: boolean; 8 | } 9 | -------------------------------------------------------------------------------- /modulo8/src/app/models/suscripcion.enum.ts: -------------------------------------------------------------------------------- 1 | export enum Suscripcion { 2 | Gratuita = 1, 3 | Basica = 2, 4 | Premium = 3 5 | } 6 | -------------------------------------------------------------------------------- /modulo8/src/app/reactive-form/reactive-form.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo8/src/app/reactive-form/reactive-form.component.css -------------------------------------------------------------------------------- /modulo8/src/app/reactive-form/reactive-form.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ReactiveFormComponent } from './reactive-form.component'; 4 | 5 | describe('ReactiveFormComponent', () => { 6 | let component: ReactiveFormComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ReactiveFormComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ReactiveFormComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo8/src/app/services/web-api.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { WebAPIService } from './web-api.service'; 4 | 5 | describe('WebAPIService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: WebAPIService = TestBed.get(WebAPIService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /modulo8/src/app/services/web-api.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | import { HttpClient } from '@angular/common/http'; 4 | 5 | @Injectable({ 6 | providedIn: 'root' 7 | }) 8 | export class WebApiService { 9 | 10 | constructor(private http: HttpClient) { } 11 | 12 | obtenerUsernames(): Observable { 13 | var url = './assets/usernames.json'; 14 | return this.http.get(url); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /modulo8/src/app/template-form/template-form.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo8/src/app/template-form/template-form.component.css -------------------------------------------------------------------------------- /modulo8/src/app/template-form/template-form.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TemplateFormComponent } from './template-form.component'; 4 | 5 | describe('TemplateFormComponent', () => { 6 | let component: TemplateFormComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ TemplateFormComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(TemplateFormComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /modulo8/src/app/validations/password-validation.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { PasswordValidationDirective } from './password-validation.directive'; 2 | 3 | describe('PasswordValidationDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new PasswordValidationDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /modulo8/src/app/validations/username-unico.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { UsernameUnicoDirective } from './username-unico.directive'; 2 | 3 | describe('UsernameUnicoDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new UsernameUnicoDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /modulo8/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo8/src/assets/.gitkeep -------------------------------------------------------------------------------- /modulo8/src/assets/usernames.json: -------------------------------------------------------------------------------- 1 | ["gavilanch", "gavilanch2", "gavilanch3", "felipe"] -------------------------------------------------------------------------------- /modulo8/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /modulo8/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /modulo8/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/modulo8/src/favicon.ico -------------------------------------------------------------------------------- /modulo8/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Modulo8 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /modulo8/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /modulo8/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /modulo8/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /modulo8/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ], 10 | "exclude": [ 11 | "src/test.ts", 12 | "src/**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /modulo8/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /modulo8/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /trello-clone/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /trello-clone/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /trello-clone/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to trello-clone!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /trello-clone/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /trello-clone/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /trello-clone/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import {LoginComponent} from './login/login.component'; 4 | import { BoardsComponent } from './boards/boards.component'; 5 | import { BoardComponent } from './board/board.component'; 6 | 7 | const routes: Routes = [ 8 | {path: 'boards', component: BoardsComponent}, 9 | {path: 'boards/:id', component: BoardComponent}, 10 | {path: '', component: LoginComponent} 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forRoot(routes)], 15 | exports: [RouterModule] 16 | }) 17 | export class AppRoutingModule { } 18 | -------------------------------------------------------------------------------- /trello-clone/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/trello-clone/src/app/app.component.css -------------------------------------------------------------------------------- /trello-clone/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | -------------------------------------------------------------------------------- /trello-clone/src/app/board-create/board-create.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/trello-clone/src/app/board-create/board-create.component.css -------------------------------------------------------------------------------- /trello-clone/src/app/board-create/board-create.component.html: -------------------------------------------------------------------------------- 1 |

Create a new board

2 |
3 |

What's your board name?

4 | 5 | 6 | 7 |
8 |
9 | 10 | 11 |
-------------------------------------------------------------------------------- /trello-clone/src/app/board-create/board-create.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { BoardCreateComponent } from './board-create.component'; 4 | 5 | describe('BoardCreateComponent', () => { 6 | let component: BoardCreateComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ BoardCreateComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(BoardCreateComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /trello-clone/src/app/board-title/board-title.component.css: -------------------------------------------------------------------------------- 1 | span { 2 | min-width: 200px; 3 | } 4 | 5 | input { 6 | width: 400px; 7 | } 8 | -------------------------------------------------------------------------------- /trello-clone/src/app/board-title/board-title.component.html: -------------------------------------------------------------------------------- 1 | {{board.title}} 4 | -------------------------------------------------------------------------------- /trello-clone/src/app/board-title/board-title.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { BoardTitleComponent } from './board-title.component'; 4 | 5 | describe('BoardTitleComponent', () => { 6 | let component: BoardTitleComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ BoardTitleComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(BoardTitleComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /trello-clone/src/app/board/board.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { BoardComponent } from './board.component'; 4 | 5 | describe('BoardComponent', () => { 6 | let component: BoardComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ BoardComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(BoardComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /trello-clone/src/app/boards/boards.component.css: -------------------------------------------------------------------------------- 1 | .boards-container { 2 | display: flex; 3 | flex-direction: row; 4 | flex-wrap: wrap; 5 | } 6 | 7 | .board-square { 8 | width: 190px; 9 | height: 95px; 10 | border: 1px solid black; 11 | border-radius: 10px; 12 | margin: 0 20px 20px 0; 13 | padding: 10px 10px 0 10px; 14 | cursor: pointer; 15 | background-color: rgb(0, 121, 191); 16 | color: white; 17 | font-size: 16px; 18 | font-weight: 700; 19 | } 20 | -------------------------------------------------------------------------------- /trello-clone/src/app/boards/boards.component.html: -------------------------------------------------------------------------------- 1 | Create a new board 2 |
3 | 6 |
7 | 8 |
9 |
10 | My boards 11 |
12 | 13 |
14 |
15 | {{board.title}} 16 |
17 |
-------------------------------------------------------------------------------- /trello-clone/src/app/boards/boards.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { BoardsComponent } from './boards.component'; 4 | 5 | describe('BoardsComponent', () => { 6 | let component: BoardsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ BoardsComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(BoardsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /trello-clone/src/app/card-edit/card-edit.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/trello-clone/src/app/card-edit/card-edit.component.css -------------------------------------------------------------------------------- /trello-clone/src/app/card-edit/card-edit.component.html: -------------------------------------------------------------------------------- 1 |

Edit or delete card

2 |
3 |

Card text

4 | 5 | 6 | 7 |
8 |
9 | 10 | 11 |
-------------------------------------------------------------------------------- /trello-clone/src/app/card-edit/card-edit.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CardEditComponent } from './card-edit.component'; 4 | 5 | describe('CardEditComponent', () => { 6 | let component: CardEditComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ CardEditComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CardEditComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /trello-clone/src/app/card-form/card-form.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/trello-clone/src/app/card-form/card-form.component.css -------------------------------------------------------------------------------- /trello-clone/src/app/card-form/card-form.component.html: -------------------------------------------------------------------------------- 1 | 3 |
4 | 6 | 7 |
-------------------------------------------------------------------------------- /trello-clone/src/app/card-form/card-form.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CardFormComponent } from './card-form.component'; 4 | 5 | describe('CardFormComponent', () => { 6 | let component: CardFormComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ CardFormComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CardFormComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /trello-clone/src/app/list-header/list-header.component.css: -------------------------------------------------------------------------------- 1 | textarea[name="list-title"], 2 | span.mat-h2 { 3 | width: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /trello-clone/src/app/list-header/list-header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ListHeaderComponent } from './list-header.component'; 4 | 5 | describe('ListHeaderComponent', () => { 6 | let component: ListHeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ListHeaderComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ListHeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /trello-clone/src/app/login/login.component.css: -------------------------------------------------------------------------------- 1 | .example-container { 2 | overflow: hidden; 3 | position: absolute; 4 | width: 100%; 5 | height: 100%; 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: center; 9 | align-items: center; 10 | overflow: hidden; 11 | } 12 | 13 | .example-container > * { 14 | width: 25%; 15 | } 16 | 17 | .center { 18 | text-align: center; 19 | } 20 | -------------------------------------------------------------------------------- /trello-clone/src/app/login/login.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LoginComponent } from './login.component'; 4 | 5 | describe('LoginComponent', () => { 6 | let component: LoginComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ LoginComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(LoginComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /trello-clone/src/app/menu/menu.component.css: -------------------------------------------------------------------------------- 1 | .fixed-top { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | z-index: 998; 7 | } 8 | 9 | .example-spacer { 10 | flex: 1 1 auto; 11 | } 12 | -------------------------------------------------------------------------------- /trello-clone/src/app/menu/menu.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | assignment Trello Clone 5 | 6 | 7 | 12 | 13 |
14 | 17 | 18 | 19 | 20 |
21 | -------------------------------------------------------------------------------- /trello-clone/src/app/menu/menu.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MenuComponent } from './menu.component'; 4 | 5 | describe('MenuComponent', () => { 6 | let component: MenuComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MenuComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MenuComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /trello-clone/src/app/menu/menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input } from '@angular/core'; 2 | import { User } from 'firebase'; 3 | import { AngularFireAuth } from '@angular/fire/auth'; 4 | 5 | @Component({ 6 | selector: 'app-menu', 7 | templateUrl: './menu.component.html', 8 | styleUrls: ['./menu.component.css'] 9 | }) 10 | export class MenuComponent { 11 | @Input() 12 | user: User; 13 | 14 | constructor(public afAuth: AngularFireAuth) { } 15 | 16 | logout() { 17 | this.afAuth.auth.signOut(); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /trello-clone/src/app/models/board.ts: -------------------------------------------------------------------------------- 1 | export interface Board { 2 | title: string; 3 | uid: string; 4 | id?: string; 5 | } 6 | -------------------------------------------------------------------------------- /trello-clone/src/app/models/list.ts: -------------------------------------------------------------------------------- 1 | export interface List { 2 | title: string; 3 | order: number; 4 | cards?: any[]; 5 | id?: string; 6 | displayComposer?: boolean; 7 | } 8 | -------------------------------------------------------------------------------- /trello-clone/src/app/services/boards.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { BoardsService } from './boards.service'; 4 | 5 | describe('BoardsService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: BoardsService = TestBed.get(BoardsService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /trello-clone/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/trello-clone/src/assets/.gitkeep -------------------------------------------------------------------------------- /trello-clone/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | var firebaseConfig = { 2 | apiKey: "AIzaSyA0l4O8CpoKHNPvGsaN2_hy3UnvXGMnnWQ", 3 | authDomain: "trello-clone-udemy.firebaseapp.com", 4 | databaseURL: "https://trello-clone-udemy.firebaseio.com", 5 | projectId: "trello-clone-udemy", 6 | storageBucket: "trello-clone-udemy.appspot.com", 7 | messagingSenderId: "771779400915", 8 | appId: "1:771779400915:web:db951a82d39c6428" 9 | }; 10 | 11 | export const environment = { 12 | production: true, 13 | firebaseConfig 14 | }; 15 | -------------------------------------------------------------------------------- /trello-clone/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavilanch/Angular-8-Curso/572f6435ec6f9142ac901effc2666db5367f20dd/trello-clone/src/favicon.ico -------------------------------------------------------------------------------- /trello-clone/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TrelloClone 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /trello-clone/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /trello-clone/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | @import "@angular/material/prebuilt-themes/deeppurple-amber.css"; 4 | 5 | .clickable { 6 | cursor: pointer; 7 | } 8 | 9 | button { 10 | cursor: pointer; 11 | } 12 | 13 | .error { 14 | color: red; 15 | } 16 | 17 | .buttons-container button { 18 | margin-right: 8px; 19 | } 20 | 21 | .blend-in { 22 | height: 50px; 23 | width: 100%; 24 | border: none; 25 | background:none; 26 | box-shadow:none; 27 | resize: none; 28 | } 29 | -------------------------------------------------------------------------------- /trello-clone/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /trello-clone/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ], 10 | "exclude": [ 11 | "src/test.ts", 12 | "src/**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /trello-clone/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /trello-clone/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | --------------------------------------------------------------------------------