├── .angulardoc.json ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── docs ├── angular-cli.md ├── angular-material.md ├── animations-advanced.md ├── animations.md ├── applications.md ├── arquitectura.md ├── browser-support.md ├── como-estructura-modular.md ├── components.md ├── contenedor-presentador.md ├── custom-estructural-directives.md ├── custom-form-controls.md ├── custom-validators.md ├── data-binding.md ├── decorators.md ├── deployment.md ├── deteccion-cambios.md ├── directives.md ├── dynamic-components.md ├── dynamic-forms.md ├── ejemplo-crud-basico.md ├── ejemplo-crud-completo.md ├── ejercicio_1.md ├── ejercicio_2.md ├── ejercicio_3.md ├── ejercicio_4.md ├── ejercicio_5.md ├── ejercicios.md ├── ejercicios │ ├── galeria.md │ ├── mini-aplicacion.md │ ├── rxjs.md │ └── servicio-auth.md ├── encuesta.md ├── estructura-proyecto.md ├── event-emitters.md ├── forms-model-driven.md ├── forms-template-driven.md ├── guards.md ├── httpclient.md ├── i18n.md ├── ides.md ├── img │ ├── comparacion_dev_prod.png │ ├── estructura-src.png │ ├── estructura.png │ ├── formcontrol_properties.png │ ├── generate-lib.png │ ├── lib-angularjson.png │ ├── lifecycle.png │ ├── ngModel_clases.png │ ├── projects.png │ ├── schedulers-animationFrame.png │ ├── schedulers-asap.png │ ├── schedulers-async.png │ ├── schedulers-inicio.png │ ├── schedulers-of.png │ ├── schedulers-timer.png │ └── typescript.png ├── impure-pipes.md ├── index.md ├── input-binding.md ├── instalacion.md ├── introduccion.md ├── inyeccion-dependencias.md ├── jquery.md ├── lazy-loading.md ├── libraries.md ├── lifecycle.md ├── modules.md ├── native-script.md ├── ngNativeValidate.md ├── ngrx.md ├── observables.md ├── old-version.md ├── pendiente.md ├── pipes.md ├── providers.md ├── pwa.md ├── redux-effects.md ├── redux.md ├── resolvers.md ├── routing.md ├── schedulers.md ├── schemas.md ├── server-side-rendering.md ├── services.md ├── subject.md ├── template-reference-variables.md ├── testing-e2e.md ├── testing.md └── typescript.md ├── e2e ├── src │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── protractor.conf.js └── tsconfig.e2e.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── projects ├── ejercicio-final │ ├── browserslist │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── components │ │ │ │ ├── layout │ │ │ │ │ ├── private-header │ │ │ │ │ │ ├── private-header.component.css │ │ │ │ │ │ ├── private-header.component.html │ │ │ │ │ │ └── private-header.component.ts │ │ │ │ │ ├── private-menu │ │ │ │ │ │ ├── private-menu.component.css │ │ │ │ │ │ ├── private-menu.component.html │ │ │ │ │ │ └── private-menu.component.ts │ │ │ │ │ ├── public-header │ │ │ │ │ │ ├── public-header.component.css │ │ │ │ │ │ ├── public-header.component.html │ │ │ │ │ │ └── public-header.component.ts │ │ │ │ │ └── public-menu │ │ │ │ │ │ ├── public-menu.component.css │ │ │ │ │ │ ├── public-menu.component.html │ │ │ │ │ │ └── public-menu.component.ts │ │ │ │ ├── private │ │ │ │ │ ├── customers │ │ │ │ │ │ └── customers-list │ │ │ │ │ │ │ ├── customers-list.component.css │ │ │ │ │ │ │ ├── customers-list.component.html │ │ │ │ │ │ │ └── customers-list.component.ts │ │ │ │ │ ├── dashboard │ │ │ │ │ │ ├── dashboard.component.css │ │ │ │ │ │ ├── dashboard.component.html │ │ │ │ │ │ └── dashboard.component.ts │ │ │ │ │ ├── profile │ │ │ │ │ │ └── profile-edit │ │ │ │ │ │ │ ├── profile-edit.component.css │ │ │ │ │ │ │ ├── profile-edit.component.html │ │ │ │ │ │ │ └── profile-edit.component.ts │ │ │ │ │ ├── providers │ │ │ │ │ │ └── providers-list │ │ │ │ │ │ │ ├── providers-list.component.css │ │ │ │ │ │ │ ├── providers-list.component.html │ │ │ │ │ │ │ └── providers-list.component.ts │ │ │ │ │ └── user-crud-basic │ │ │ │ │ │ ├── user-crud-basic.component.css │ │ │ │ │ │ ├── user-crud-basic.component.html │ │ │ │ │ │ └── user-crud-basic.component.ts │ │ │ │ └── public │ │ │ │ │ ├── about │ │ │ │ │ ├── about.component.css │ │ │ │ │ ├── about.component.html │ │ │ │ │ └── about.component.ts │ │ │ │ │ ├── home │ │ │ │ │ ├── home.component.css │ │ │ │ │ ├── home.component.html │ │ │ │ │ └── home.component.ts │ │ │ │ │ └── login │ │ │ │ │ ├── login.component.css │ │ │ │ │ ├── login.component.html │ │ │ │ │ └── login.component.ts │ │ │ ├── model │ │ │ │ ├── address.ts │ │ │ │ ├── autor.ts │ │ │ │ ├── company.ts │ │ │ │ ├── geo.ts │ │ │ │ └── user.ts │ │ │ └── services │ │ │ │ ├── auth.service.ts │ │ │ │ └── user.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.spec.json │ └── tslint.json ├── ejercicio01 │ ├── browserslist │ ├── karma.conf.js │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── components │ │ │ │ ├── customers │ │ │ │ │ └── customers-list │ │ │ │ │ │ ├── customers-list.component.css │ │ │ │ │ │ ├── customers-list.component.html │ │ │ │ │ │ ├── customers-list.component.spec.ts │ │ │ │ │ │ └── customers-list.component.ts │ │ │ │ ├── dashboard │ │ │ │ │ ├── dashboard.component.css │ │ │ │ │ ├── dashboard.component.html │ │ │ │ │ ├── dashboard.component.spec.ts │ │ │ │ │ └── dashboard.component.ts │ │ │ │ ├── home │ │ │ │ │ ├── home.component.css │ │ │ │ │ ├── home.component.html │ │ │ │ │ ├── home.component.spec.ts │ │ │ │ │ └── home.component.ts │ │ │ │ ├── login │ │ │ │ │ ├── login.component.css │ │ │ │ │ ├── login.component.html │ │ │ │ │ ├── login.component.spec.ts │ │ │ │ │ └── login.component.ts │ │ │ │ ├── profile │ │ │ │ │ └── profile-edit │ │ │ │ │ │ ├── profile-edit.component.css │ │ │ │ │ │ ├── profile-edit.component.html │ │ │ │ │ │ └── profile-edit.component.ts │ │ │ │ └── providers │ │ │ │ │ └── poviders-list │ │ │ │ │ ├── poviders-list.component.css │ │ │ │ │ ├── poviders-list.component.html │ │ │ │ │ ├── poviders-list.component.spec.ts │ │ │ │ │ └── poviders-list.component.ts │ │ │ ├── layout │ │ │ │ ├── private-header │ │ │ │ │ ├── private-header.component.css │ │ │ │ │ ├── private-header.component.html │ │ │ │ │ ├── private-header.component.spec.ts │ │ │ │ │ └── private-header.component.ts │ │ │ │ ├── private-menu │ │ │ │ │ ├── private-menu.component.css │ │ │ │ │ ├── private-menu.component.html │ │ │ │ │ ├── private-menu.component.spec.ts │ │ │ │ │ └── private-menu.component.ts │ │ │ │ ├── public-header │ │ │ │ │ ├── public-header.component.css │ │ │ │ │ ├── public-header.component.html │ │ │ │ │ ├── public-header.component.spec.ts │ │ │ │ │ └── public-header.component.ts │ │ │ │ └── public-menu │ │ │ │ │ ├── public-menu.component.css │ │ │ │ │ ├── public-menu.component.html │ │ │ │ │ ├── public-menu.component.spec.ts │ │ │ │ │ └── public-menu.component.ts │ │ │ └── services │ │ │ │ └── auth.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.spec.json │ └── tslint.json ├── fonk-integration │ ├── browserslist │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── validators │ │ │ │ └── fonk-validators.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.spec.json │ └── tslint.json ├── huge-form │ ├── browserslist │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── components │ │ │ │ └── huge-form │ │ │ │ │ ├── huge-form.component.css │ │ │ │ │ ├── huge-form.component.html │ │ │ │ │ ├── huge-form.component.spec.ts │ │ │ │ │ └── huge-form.component.ts │ │ │ └── services │ │ │ │ ├── db.service.spec.ts │ │ │ │ ├── db.service.ts │ │ │ │ ├── form.service.spec.ts │ │ │ │ └── form.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.spec.json │ └── tslint.json ├── marbles │ ├── browserslist │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── modules │ │ │ │ └── diagram │ │ │ │ ├── components │ │ │ │ ├── diagram │ │ │ │ │ ├── diagram.component.css │ │ │ │ │ ├── diagram.component.html │ │ │ │ │ └── diagram.component.ts │ │ │ │ ├── end │ │ │ │ │ ├── end.component.css │ │ │ │ │ ├── end.component.html │ │ │ │ │ └── end.component.ts │ │ │ │ ├── error │ │ │ │ │ ├── error.component.css │ │ │ │ │ ├── error.component.html │ │ │ │ │ └── error.component.ts │ │ │ │ ├── marble │ │ │ │ │ ├── marble.component.css │ │ │ │ │ ├── marble.component.html │ │ │ │ │ └── marble.component.ts │ │ │ │ ├── operator-block │ │ │ │ │ ├── operator-block.component.css │ │ │ │ │ ├── operator-block.component.html │ │ │ │ │ └── operator-block.component.ts │ │ │ │ ├── operator │ │ │ │ │ ├── operator.component.css │ │ │ │ │ ├── operator.component.html │ │ │ │ │ └── operator.component.ts │ │ │ │ └── source-block │ │ │ │ │ ├── source-block.component.css │ │ │ │ │ ├── source-block.component.html │ │ │ │ │ └── source-block.component.ts │ │ │ │ ├── diagram.module.ts │ │ │ │ └── pipes │ │ │ │ ├── decode-source.pipe.spec.ts │ │ │ │ ├── decode-source.pipe.ts │ │ │ │ └── shuffle.pipe.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.spec.json │ └── tslint.json ├── mylib │ ├── README.md │ ├── karma.conf.js │ ├── ng-package.json │ ├── package.json │ ├── src │ │ ├── lib │ │ │ ├── mylib.component.spec.ts │ │ │ ├── mylib.component.ts │ │ │ ├── mylib.module.ts │ │ │ ├── mylib.service.spec.ts │ │ │ └── mylib.service.ts │ │ ├── public-api.ts │ │ └── test.ts │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ ├── tsconfig.spec.json │ └── tslint.json ├── solucion01-funcion │ ├── browserslist │ ├── karma.conf.js │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── components │ │ │ │ ├── customers │ │ │ │ │ └── customers-list │ │ │ │ │ │ ├── customers-list.component.css │ │ │ │ │ │ ├── customers-list.component.html │ │ │ │ │ │ ├── customers-list.component.spec.ts │ │ │ │ │ │ └── customers-list.component.ts │ │ │ │ ├── dashboard │ │ │ │ │ ├── dashboard.component.css │ │ │ │ │ ├── dashboard.component.html │ │ │ │ │ ├── dashboard.component.spec.ts │ │ │ │ │ └── dashboard.component.ts │ │ │ │ ├── home │ │ │ │ │ ├── home.component.css │ │ │ │ │ ├── home.component.html │ │ │ │ │ ├── home.component.spec.ts │ │ │ │ │ └── home.component.ts │ │ │ │ ├── login │ │ │ │ │ ├── login.component.css │ │ │ │ │ ├── login.component.html │ │ │ │ │ ├── login.component.spec.ts │ │ │ │ │ └── login.component.ts │ │ │ │ ├── profile │ │ │ │ │ └── profile-edit │ │ │ │ │ │ ├── profile-edit.component.css │ │ │ │ │ │ ├── profile-edit.component.html │ │ │ │ │ │ ├── profile-edit.component.spec.ts │ │ │ │ │ │ └── profile-edit.component.ts │ │ │ │ └── providers │ │ │ │ │ └── poviders-list │ │ │ │ │ ├── poviders-list.component.css │ │ │ │ │ ├── poviders-list.component.html │ │ │ │ │ ├── poviders-list.component.spec.ts │ │ │ │ │ └── poviders-list.component.ts │ │ │ ├── layout │ │ │ │ ├── private-header │ │ │ │ │ ├── private-header.component.css │ │ │ │ │ ├── private-header.component.html │ │ │ │ │ ├── private-header.component.spec.ts │ │ │ │ │ └── private-header.component.ts │ │ │ │ ├── private-menu │ │ │ │ │ ├── private-menu.component.css │ │ │ │ │ ├── private-menu.component.html │ │ │ │ │ ├── private-menu.component.spec.ts │ │ │ │ │ └── private-menu.component.ts │ │ │ │ ├── public-header │ │ │ │ │ ├── public-header.component.css │ │ │ │ │ ├── public-header.component.html │ │ │ │ │ ├── public-header.component.spec.ts │ │ │ │ │ └── public-header.component.ts │ │ │ │ └── public-menu │ │ │ │ │ ├── public-menu.component.css │ │ │ │ │ ├── public-menu.component.html │ │ │ │ │ ├── public-menu.component.spec.ts │ │ │ │ │ └── public-menu.component.ts │ │ │ └── services │ │ │ │ └── auth.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.spec.json │ └── tslint.json ├── solucion01-ngdocheck │ ├── browserslist │ ├── karma.conf.js │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── components │ │ │ │ ├── customers │ │ │ │ │ └── customers-list │ │ │ │ │ │ ├── customers-list.component.css │ │ │ │ │ │ ├── customers-list.component.html │ │ │ │ │ │ ├── customers-list.component.spec.ts │ │ │ │ │ │ └── customers-list.component.ts │ │ │ │ ├── dashboard │ │ │ │ │ ├── dashboard.component.css │ │ │ │ │ ├── dashboard.component.html │ │ │ │ │ ├── dashboard.component.spec.ts │ │ │ │ │ └── dashboard.component.ts │ │ │ │ ├── home │ │ │ │ │ ├── home.component.css │ │ │ │ │ ├── home.component.html │ │ │ │ │ ├── home.component.spec.ts │ │ │ │ │ └── home.component.ts │ │ │ │ ├── login │ │ │ │ │ ├── login.component.css │ │ │ │ │ ├── login.component.html │ │ │ │ │ ├── login.component.spec.ts │ │ │ │ │ └── login.component.ts │ │ │ │ ├── profile │ │ │ │ │ └── profile-edit │ │ │ │ │ │ ├── profile-edit.component.css │ │ │ │ │ │ ├── profile-edit.component.html │ │ │ │ │ │ ├── profile-edit.component.spec.ts │ │ │ │ │ │ └── profile-edit.component.ts │ │ │ │ └── providers │ │ │ │ │ └── poviders-list │ │ │ │ │ ├── poviders-list.component.css │ │ │ │ │ ├── poviders-list.component.html │ │ │ │ │ ├── poviders-list.component.spec.ts │ │ │ │ │ └── poviders-list.component.ts │ │ │ ├── layout │ │ │ │ ├── private-header │ │ │ │ │ ├── private-header.component.css │ │ │ │ │ ├── private-header.component.html │ │ │ │ │ ├── private-header.component.spec.ts │ │ │ │ │ └── private-header.component.ts │ │ │ │ ├── private-menu │ │ │ │ │ ├── private-menu.component.css │ │ │ │ │ ├── private-menu.component.html │ │ │ │ │ ├── private-menu.component.spec.ts │ │ │ │ │ └── private-menu.component.ts │ │ │ │ ├── public-header │ │ │ │ │ ├── public-header.component.css │ │ │ │ │ ├── public-header.component.html │ │ │ │ │ ├── public-header.component.spec.ts │ │ │ │ │ └── public-header.component.ts │ │ │ │ └── public-menu │ │ │ │ │ ├── public-menu.component.css │ │ │ │ │ ├── public-menu.component.html │ │ │ │ │ ├── public-menu.component.spec.ts │ │ │ │ │ └── public-menu.component.ts │ │ │ └── services │ │ │ │ └── auth.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.spec.json │ └── tslint.json └── solucion01-subject │ ├── browserslist │ ├── karma.conf.js │ ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── components │ │ │ ├── customers │ │ │ │ └── customers-list │ │ │ │ │ ├── customers-list.component.css │ │ │ │ │ ├── customers-list.component.html │ │ │ │ │ ├── customers-list.component.spec.ts │ │ │ │ │ └── customers-list.component.ts │ │ │ ├── dashboard │ │ │ │ ├── dashboard.component.css │ │ │ │ ├── dashboard.component.html │ │ │ │ ├── dashboard.component.spec.ts │ │ │ │ └── dashboard.component.ts │ │ │ ├── home │ │ │ │ ├── home.component.css │ │ │ │ ├── home.component.html │ │ │ │ ├── home.component.spec.ts │ │ │ │ └── home.component.ts │ │ │ ├── login │ │ │ │ ├── login.component.css │ │ │ │ ├── login.component.html │ │ │ │ ├── login.component.spec.ts │ │ │ │ └── login.component.ts │ │ │ ├── profile │ │ │ │ └── profile-edit │ │ │ │ │ ├── profile-edit.component.css │ │ │ │ │ ├── profile-edit.component.html │ │ │ │ │ ├── profile-edit.component.spec.ts │ │ │ │ │ └── profile-edit.component.ts │ │ │ └── providers │ │ │ │ └── poviders-list │ │ │ │ ├── poviders-list.component.css │ │ │ │ ├── poviders-list.component.html │ │ │ │ ├── poviders-list.component.spec.ts │ │ │ │ └── poviders-list.component.ts │ │ ├── layout │ │ │ ├── private-header │ │ │ │ ├── private-header.component.css │ │ │ │ ├── private-header.component.html │ │ │ │ ├── private-header.component.spec.ts │ │ │ │ └── private-header.component.ts │ │ │ ├── private-menu │ │ │ │ ├── private-menu.component.css │ │ │ │ ├── private-menu.component.html │ │ │ │ ├── private-menu.component.spec.ts │ │ │ │ └── private-menu.component.ts │ │ │ ├── public-header │ │ │ │ ├── public-header.component.css │ │ │ │ ├── public-header.component.html │ │ │ │ ├── public-header.component.spec.ts │ │ │ │ └── public-header.component.ts │ │ │ └── public-menu │ │ │ │ ├── public-menu.component.css │ │ │ │ ├── public-menu.component.html │ │ │ │ ├── public-menu.component.spec.ts │ │ │ │ └── public-menu.component.ts │ │ └── services │ │ │ └── auth.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.spec.json │ └── tslint.json ├── protractor.conf.js ├── src ├── app │ ├── admin │ │ ├── admin.module.ts │ │ └── components │ │ │ ├── admin-home │ │ │ ├── admin-home.component.css │ │ │ ├── admin-home.component.html │ │ │ ├── admin-home.component.spec.ts │ │ │ └── admin-home.component.ts │ │ │ ├── clientes │ │ │ ├── clientes.component.css │ │ │ ├── clientes.component.html │ │ │ ├── clientes.component.spec.ts │ │ │ └── clientes.component.ts │ │ │ ├── proveedores │ │ │ ├── proveedores.component.css │ │ │ ├── proveedores.component.html │ │ │ ├── proveedores.component.spec.ts │ │ │ └── proveedores.component.ts │ │ │ ├── user-add │ │ │ ├── user-add.component.css │ │ │ ├── user-add.component.html │ │ │ ├── user-add.component.spec.ts │ │ │ └── user-add.component.ts │ │ │ ├── user-edit │ │ │ ├── user-edit.component.css │ │ │ ├── user-edit.component.html │ │ │ ├── user-edit.component.spec.ts │ │ │ └── user-edit.component.ts │ │ │ └── user-list │ │ │ ├── user-list.component.css │ │ │ ├── user-list.component.html │ │ │ ├── user-list.component.spec.ts │ │ │ └── user-list.component.ts │ ├── app-routing.module.ts │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── components │ │ ├── about │ │ │ ├── about.component.css │ │ │ ├── about.component.html │ │ │ └── about.component.ts │ │ ├── animation-query-stager │ │ │ ├── animation-query-stager.component.css │ │ │ ├── animation-query-stager.component.html │ │ │ └── animation-query-stager.component.ts │ │ ├── animation-search │ │ │ ├── animation-search.component.css │ │ │ ├── animation-search.component.html │ │ │ └── animation-search.component.ts │ │ ├── animation │ │ │ ├── animation.component.css │ │ │ ├── animation.component.html │ │ │ └── animation.component.ts │ │ ├── busqueda │ │ │ ├── busqueda.component.css │ │ │ ├── busqueda.component.html │ │ │ └── busqueda.component.ts │ │ ├── calculadora │ │ │ ├── calculadora.component.css │ │ │ ├── calculadora.component.html │ │ │ ├── calculadora.component.spec.ts │ │ │ └── calculadora.component.ts │ │ ├── child-comp │ │ │ ├── child-comp.component.css │ │ │ ├── child-comp.component.html │ │ │ ├── child-comp.component.spec.ts │ │ │ └── child-comp.component.ts │ │ ├── click-me │ │ │ └── click-me.component.ts │ │ ├── cold-observables │ │ │ ├── cold-observables.component.css │ │ │ ├── cold-observables.component.html │ │ │ ├── cold-observables.component.spec.ts │ │ │ └── cold-observables.component.ts │ │ ├── crono │ │ │ ├── crono.component.css │ │ │ ├── crono.component.html │ │ │ └── crono.component.ts │ │ ├── crud-basico │ │ │ ├── crud-basico.component.css │ │ │ ├── crud-basico.component.html │ │ │ ├── crud-basico.component.spec.ts │ │ │ └── crud-basico.component.ts │ │ ├── custom-controls │ │ │ ├── custom-controls.component.css │ │ │ ├── custom-controls.component.html │ │ │ └── custom-controls.component.ts │ │ ├── detalle │ │ │ ├── detalle.component.css │ │ │ ├── detalle.component.html │ │ │ └── detalle.component.ts │ │ ├── dynamic-components-example │ │ │ ├── dynamic-components-example.component.css │ │ │ ├── dynamic-components-example.component.html │ │ │ └── dynamic-components-example.component.ts │ │ ├── dynamic-form-example │ │ │ ├── dynamic-form-example.component.css │ │ │ ├── dynamic-form-example.component.html │ │ │ └── dynamic-form-example.component.ts │ │ ├── galeria │ │ │ ├── galeria.component.css │ │ │ ├── galeria.component.html │ │ │ ├── galeria.component.spec.ts │ │ │ └── galeria.component.ts │ │ ├── hero-form │ │ │ ├── hero-form.component.css │ │ │ ├── hero-form.component.html │ │ │ ├── hero-form.component.spec.ts │ │ │ └── hero-form.component.ts │ │ ├── hero-list │ │ │ ├── hero-list.component.css │ │ │ ├── hero-list.component.html │ │ │ ├── hero-list.component.spec.ts │ │ │ └── hero-list.component.ts │ │ ├── hero-search │ │ │ ├── hero-search.component.css │ │ │ ├── hero-search.component.html │ │ │ ├── hero-search.component.spec.ts │ │ │ └── hero-search.component.ts │ │ ├── highlight │ │ │ ├── highlight.component.css │ │ │ ├── highlight.component.html │ │ │ ├── highlight.component.spec.ts │ │ │ └── highlight.component.ts │ │ ├── home-page │ │ │ ├── home-page.component.css │ │ │ ├── home-page.component.html │ │ │ ├── home-page.component.spec.ts │ │ │ └── home-page.component.ts │ │ ├── home │ │ │ ├── home.component.css │ │ │ ├── home.component.html │ │ │ ├── home.component.spec.ts │ │ │ └── home.component.ts │ │ ├── iban-validator-example │ │ │ ├── iban-validator-example.component.css │ │ │ ├── iban-validator-example.component.html │ │ │ ├── iban-validator-example.component.spec.ts │ │ │ └── iban-validator-example.component.ts │ │ ├── impure-pipe │ │ │ ├── impure-pipe.component.css │ │ │ ├── impure-pipe.component.html │ │ │ └── impure-pipe.component.ts │ │ ├── key-up │ │ │ ├── key-up.component.css │ │ │ ├── key-up.component.html │ │ │ ├── key-up.component.spec.ts │ │ │ └── key-up.component.ts │ │ ├── lifecycle │ │ │ ├── lifecycle.component.css │ │ │ ├── lifecycle.component.html │ │ │ ├── lifecycle.component.spec.ts │ │ │ └── lifecycle.component.ts │ │ ├── login │ │ │ ├── login.component.css │ │ │ ├── login.component.html │ │ │ ├── login.component.spec.ts │ │ │ └── login.component.ts │ │ ├── master │ │ │ ├── master.component.css │ │ │ ├── master.component.html │ │ │ └── master.component.ts │ │ ├── menu │ │ │ ├── menu.component.css │ │ │ ├── menu.component.html │ │ │ └── menu.component.ts │ │ ├── nav │ │ │ ├── nav.component.css │ │ │ ├── nav.component.html │ │ │ └── nav.component.ts │ │ ├── nested-child │ │ │ ├── nested-child.component.css │ │ │ ├── nested-child.component.html │ │ │ ├── nested-child.component.spec.ts │ │ │ └── nested-child.component.ts │ │ ├── nested-child2 │ │ │ ├── nested-child2.component.css │ │ │ ├── nested-child2.component.html │ │ │ ├── nested-child2.component.spec.ts │ │ │ └── nested-child2.component.ts │ │ ├── nested-child3 │ │ │ ├── nested-child3.component.css │ │ │ ├── nested-child3.component.html │ │ │ ├── nested-child3.component.spec.ts │ │ │ └── nested-child3.component.ts │ │ ├── nested │ │ │ ├── nested.component.css │ │ │ ├── nested.component.html │ │ │ └── nested.component.ts │ │ ├── observables-frios │ │ │ ├── observables-frios.component.css │ │ │ ├── observables-frios.component.html │ │ │ ├── observables-frios.component.spec.ts │ │ │ └── observables-frios.component.ts │ │ ├── otro │ │ │ ├── otro.component.css │ │ │ ├── otro.component.html │ │ │ ├── otro.component.spec.ts │ │ │ └── otro.component.ts │ │ ├── parent-comp │ │ │ ├── parent-comp.component.css │ │ │ ├── parent-comp.component.html │ │ │ ├── parent-comp.component.spec.ts │ │ │ └── parent-comp.component.ts │ │ ├── pipes │ │ │ ├── pipes.component.css │ │ │ ├── pipes.component.html │ │ │ └── pipes.component.ts │ │ ├── reactive-form │ │ │ ├── reactive-form.component.css │ │ │ ├── reactive-form.component.html │ │ │ ├── reactive-form.component.spec.ts │ │ │ └── reactive-form.component.ts │ │ ├── rotate │ │ │ ├── rotate.component.css │ │ │ ├── rotate.component.html │ │ │ └── rotate.component.ts │ │ ├── search │ │ │ ├── search.component.css │ │ │ ├── search.component.html │ │ │ ├── search.component.spec.ts │ │ │ └── search.component.ts │ │ ├── template-form │ │ │ ├── template-form.component.css │ │ │ ├── template-form.component.html │ │ │ └── template-form.component.ts │ │ ├── template-variables │ │ │ ├── template-variables.component.css │ │ │ ├── template-variables.component.html │ │ │ ├── template-variables.component.spec.ts │ │ │ └── template-variables.component.ts │ │ ├── user-crud-basic │ │ │ ├── user-crud-basic.component.css │ │ │ ├── user-crud-basic.component.html │ │ │ └── user-crud-basic.component.ts │ │ ├── user-form-reactive │ │ │ ├── user-form-reactive.component.css │ │ │ ├── user-form-reactive.component.html │ │ │ └── user-form-reactive.component.ts │ │ ├── user-form │ │ │ ├── user-form.component.css │ │ │ ├── user-form.component.html │ │ │ └── user-form.component.ts │ │ └── usuarios-crud-esqueleto │ │ │ ├── usuarios-crud-esqueleto.component.css │ │ │ ├── usuarios-crud-esqueleto.component.html │ │ │ ├── usuarios-crud-esqueleto.component.spec.ts │ │ │ └── usuarios-crud-esqueleto.component.ts │ ├── contenedor-presentador │ │ ├── components │ │ │ ├── heroes-container │ │ │ │ ├── heroes-container.component.css │ │ │ │ ├── heroes-container.component.html │ │ │ │ └── heroes-container.component.ts │ │ │ ├── heroes-edit-presenter │ │ │ │ ├── heroes-edit-presenter.component.css │ │ │ │ ├── heroes-edit-presenter.component.html │ │ │ │ └── heroes-edit-presenter.component.ts │ │ │ ├── heroes-list-presenter │ │ │ │ ├── heroes-list-presenter.component.css │ │ │ │ ├── heroes-list-presenter.component.html │ │ │ │ └── heroes-list-presenter.component.ts │ │ │ └── heroes-new-presenter │ │ │ │ ├── heroes-new-presenter.component.css │ │ │ │ ├── heroes-new-presenter.component.html │ │ │ │ └── heroes-new-presenter.component.ts │ │ └── contenedor-presentador.module.ts │ ├── custom-controls │ │ ├── controls │ │ │ ├── rating-stars │ │ │ │ ├── rating-stars.component.css │ │ │ │ ├── rating-stars.component.html │ │ │ │ └── rating-stars.component.ts │ │ │ ├── required-text │ │ │ │ ├── required-text.component.css │ │ │ │ ├── required-text.component.html │ │ │ │ └── required-text.component.ts │ │ │ └── tri-state │ │ │ │ ├── tri-state.component.css │ │ │ │ ├── tri-state.component.html │ │ │ │ └── tri-state.component.ts │ │ ├── custom-controls.module.ts │ │ └── validators │ │ │ └── required-text-validator │ │ │ ├── required-text-validator.component.html │ │ │ └── required-text-validator.component.ts │ ├── data │ │ ├── ciudades.ts │ │ ├── equipos.ts │ │ ├── heroes.ts │ │ ├── mock-heroes.ts │ │ ├── partidos.ts │ │ └── users.ts │ ├── deteccion-cambios │ │ ├── components │ │ │ ├── change-detection-child1 │ │ │ │ ├── change-detection-child1.component.css │ │ │ │ ├── change-detection-child1.component.html │ │ │ │ └── change-detection-child1.component.ts │ │ │ ├── change-detection-child2 │ │ │ │ ├── change-detection-child2.component.css │ │ │ │ ├── change-detection-child2.component.html │ │ │ │ └── change-detection-child2.component.ts │ │ │ ├── change-detection-child3 │ │ │ │ ├── change-detection-child3.component.css │ │ │ │ ├── change-detection-child3.component.html │ │ │ │ └── change-detection-child3.component.ts │ │ │ └── change-detection-parent │ │ │ │ ├── change-detection-parent.component.css │ │ │ │ ├── change-detection-parent.component.html │ │ │ │ └── change-detection-parent.component.ts │ │ └── deteccion-cambios.module.ts │ ├── directives │ │ ├── highlight.directive.spec.ts │ │ ├── highlight.directive.ts │ │ ├── resizable.directive.ts │ │ ├── rotate.directive.spec.ts │ │ ├── rotate.directive.ts │ │ └── unless.directive.ts │ ├── dynamic-components │ │ ├── components │ │ │ ├── ad1 │ │ │ │ ├── ad1.component.css │ │ │ │ ├── ad1.component.html │ │ │ │ ├── ad1.component.spec.ts │ │ │ │ └── ad1.component.ts │ │ │ ├── ad2 │ │ │ │ ├── ad2.component.css │ │ │ │ ├── ad2.component.html │ │ │ │ ├── ad2.component.spec.ts │ │ │ │ └── ad2.component.ts │ │ │ ├── ad3 │ │ │ │ ├── ad3.component.css │ │ │ │ ├── ad3.component.html │ │ │ │ ├── ad3.component.spec.ts │ │ │ │ └── ad3.component.ts │ │ │ ├── ad4 │ │ │ │ ├── ad4.component.css │ │ │ │ ├── ad4.component.html │ │ │ │ ├── ad4.component.spec.ts │ │ │ │ └── ad4.component.ts │ │ │ └── ads-loader │ │ │ │ ├── ads-loader.component.css │ │ │ │ ├── ads-loader.component.html │ │ │ │ └── ads-loader.component.ts │ │ ├── dynamic-components.module.ts │ │ ├── model │ │ │ ├── AdComponent.ts │ │ │ └── AdItem.ts │ │ └── services │ │ │ └── ad-service.ts │ ├── dynamic-form │ │ ├── dynamic-form-question.component.html │ │ ├── dynamic-form-question.component.ts │ │ ├── dynamic-form.component.html │ │ ├── dynamic-form.component.ts │ │ ├── dynamic-form.module.ts │ │ ├── question-base.ts │ │ ├── question-checkbox.ts │ │ ├── question-control.service.ts │ │ ├── question-dropdown.ts │ │ ├── question-textbox.ts │ │ └── question.service.ts │ ├── fractal │ │ ├── components │ │ │ └── tree │ │ │ │ ├── tree.component.css │ │ │ │ ├── tree.component.html │ │ │ │ └── tree.component.ts │ │ └── fractal.module.ts │ ├── guards │ │ ├── auth.guard.ts │ │ ├── confimar.guard.spec.ts │ │ ├── confimar.guard.ts │ │ ├── prueba.guard.spec.ts │ │ └── prueba.guard.ts │ ├── lazy1 │ │ ├── lazy1.component.css │ │ ├── lazy1.component.html │ │ ├── lazy1.component.spec.ts │ │ ├── lazy1.component.ts │ │ └── lazy1.module.ts │ ├── lazy2 │ │ ├── lazy2.component.css │ │ ├── lazy2.component.html │ │ ├── lazy2.component.spec.ts │ │ ├── lazy2.component.ts │ │ └── lazy2.module.ts │ ├── lazy3 │ │ ├── lazy3.component.css │ │ ├── lazy3.component.html │ │ ├── lazy3.component.spec.ts │ │ ├── lazy3.component.ts │ │ └── lazy3.module.ts │ ├── lazy4 │ │ ├── lazy4.component.css │ │ ├── lazy4.component.html │ │ ├── lazy4.component.spec.ts │ │ ├── lazy4.component.ts │ │ └── lazy4.module.ts │ ├── lazy5 │ │ ├── lazy5.component.css │ │ ├── lazy5.component.html │ │ ├── lazy5.component.spec.ts │ │ ├── lazy5.component.ts │ │ └── lazy5.module.ts │ ├── material │ │ └── material.module.ts │ ├── model │ │ ├── ReqresUser.ts │ │ ├── TypicodeUser.ts │ │ ├── address.ts │ │ ├── autor.ts │ │ ├── ciudad.ts │ │ ├── company.ts │ │ ├── crono.ts │ │ ├── equipo.ts │ │ ├── geo.ts │ │ ├── hero.ts │ │ ├── partido.ts │ │ └── user.ts │ ├── pipes │ │ ├── exponente.pipe.spec.ts │ │ ├── exponente.pipe.ts │ │ ├── filter-age.pipe.spec.ts │ │ ├── filter-age.pipe.ts │ │ ├── to-slug.pipe.spec.ts │ │ ├── to-slug.pipe.ts │ │ ├── truncate.pipe.spec.ts │ │ └── truncate.pipe.ts │ ├── redux-effects │ │ ├── components │ │ │ ├── redux-heroes-add-presenter │ │ │ │ ├── redux-heroes-add-presenter.component.css │ │ │ │ ├── redux-heroes-add-presenter.component.html │ │ │ │ └── redux-heroes-add-presenter.component.ts │ │ │ ├── redux-heroes-container │ │ │ │ ├── redux-heroes-container.component.css │ │ │ │ ├── redux-heroes-container.component.html │ │ │ │ └── redux-heroes-container.component.ts │ │ │ ├── redux-heroes-edit-presenter │ │ │ │ ├── redux-heroes-edit-presenter.component.css │ │ │ │ ├── redux-heroes-edit-presenter.component.html │ │ │ │ └── redux-heroes-edit-presenter.component.ts │ │ │ └── redux-heroes-list-presenter │ │ │ │ ├── redux-heroes-list-presenter.component.css │ │ │ │ ├── redux-heroes-list-presenter.component.html │ │ │ │ └── redux-heroes-list-presenter.component.ts │ │ ├── reducers │ │ │ ├── hero.actions.ts │ │ │ ├── hero.effects.ts │ │ │ ├── hero.reducer.ts │ │ │ ├── hero.store.ts │ │ │ └── index.ts │ │ ├── redux-effects.module.ts │ │ └── services │ │ │ └── hero.service.ts │ ├── redux-ng-rx │ │ ├── components │ │ │ ├── redux-heroes-add-presenter │ │ │ │ ├── redux-heroes-add-presenter.component.css │ │ │ │ ├── redux-heroes-add-presenter.component.html │ │ │ │ └── redux-heroes-add-presenter.component.ts │ │ │ ├── redux-heroes-container │ │ │ │ ├── redux-heroes-container.component.css │ │ │ │ ├── redux-heroes-container.component.html │ │ │ │ └── redux-heroes-container.component.ts │ │ │ ├── redux-heroes-edit-presenter │ │ │ │ ├── redux-heroes-edit-presenter.component.css │ │ │ │ ├── redux-heroes-edit-presenter.component.html │ │ │ │ └── redux-heroes-edit-presenter.component.ts │ │ │ └── redux-heroes-list-presenter │ │ │ │ ├── redux-heroes-list-presenter.component.css │ │ │ │ ├── redux-heroes-list-presenter.component.html │ │ │ │ └── redux-heroes-list-presenter.component.ts │ │ ├── reducers │ │ │ ├── hero.actions.ts │ │ │ ├── hero.reducer.ts │ │ │ ├── hero.store.ts │ │ │ └── index.ts │ │ ├── redux-ng-rx.module.spec.ts │ │ └── redux-ng-rx.module.ts │ ├── redux │ │ ├── components │ │ │ ├── redux-heroes-add-presenter │ │ │ │ ├── redux-heroes-add-presenter.component.css │ │ │ │ ├── redux-heroes-add-presenter.component.html │ │ │ │ └── redux-heroes-add-presenter.component.ts │ │ │ ├── redux-heroes-container │ │ │ │ ├── redux-heroes-container.component.css │ │ │ │ ├── redux-heroes-container.component.html │ │ │ │ └── redux-heroes-container.component.ts │ │ │ ├── redux-heroes-edit-presenter │ │ │ │ ├── redux-heroes-edit-presenter.component.css │ │ │ │ ├── redux-heroes-edit-presenter.component.html │ │ │ │ └── redux-heroes-edit-presenter.component.ts │ │ │ └── redux-heroes-list-presenter │ │ │ │ ├── redux-heroes-list-presenter.component.css │ │ │ │ ├── redux-heroes-list-presenter.component.html │ │ │ │ └── redux-heroes-list-presenter.component.ts │ │ ├── reducers │ │ │ ├── hero.actions.ts │ │ │ ├── hero.reducer.ts │ │ │ └── hero.store.ts │ │ ├── redux.module.spec.ts │ │ ├── redux.module.ts │ │ └── services │ │ │ └── hero-state.service.ts │ ├── selective-preloading-strategy.ts │ ├── services │ │ ├── auth-simple.service.ts │ │ ├── auth.service.ts │ │ ├── crono.service.ts │ │ ├── hero.service.ts │ │ ├── heroe.service.ts │ │ ├── mock-heroe.service.spec.ts │ │ ├── mock-heroe.service.ts │ │ ├── user.service.ts │ │ └── usuario.service.ts │ ├── utils │ │ ├── calculadora │ │ │ ├── calculadora.component.css │ │ │ ├── calculadora.component.html │ │ │ ├── calculadora.component.spec.ts │ │ │ └── calculadora.component.ts │ │ └── utils.module.ts │ └── validators │ │ ├── countriesIbanValidator.ts │ │ └── spanishIbanValidator.ts ├── assets │ ├── .gitkeep │ ├── img │ │ └── chrono.png │ └── users.json ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── no-spa.html ├── polyfills.ts ├── spa.html ├── styles.css ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── typings.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json /.angulardoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "repoId": "df2d65dc-c104-4795-baae-7688f583b6ae", 3 | "lastSync": 0 4 | } -------------------------------------------------------------------------------- /.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 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Readme.md 2 | 3 | La documentación del curso está en [docs/index.md](./docs/index.md) 4 | 5 | Mis datos de contacto: 6 | 7 | - Email: carherco@gmail.com 8 | -------------------------------------------------------------------------------- /docs/angular-material.md: -------------------------------------------------------------------------------- 1 | # Angular Material 2 | 3 | > ng add @angular/material 4 | 5 | https://material.angular.io/guide/getting-started 6 | 7 | 8 | ## Ejercicios 9 | 10 | 1) Poner Angular Material en el componente GaleriaComponent. 11 | 12 | 2) Poner Angular Material en algún CRUD. 13 | 14 | 15 | https://material.angular.io/components/categories 16 | -------------------------------------------------------------------------------- /docs/browser-support.md: -------------------------------------------------------------------------------- 1 | https://angular.io/guide/browser-support 2 | -------------------------------------------------------------------------------- /docs/dynamic-forms.md: -------------------------------------------------------------------------------- 1 | # Formularios dinámicos 2 | 3 | Con la librería Reactive Forms se pueden construir formularios dinámicos cuya configuración provenga, por ejemplo, de la base de datos. 4 | 5 | Hay un ejemplo de como hacerlo en el módulo *dynamic-form*. 6 | 7 | -------------------------------------------------------------------------------- /docs/encuesta.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ¿Qué ha sido lo mejor del curso? 4 | ¿Qué has echado en falta? 5 | ¿Qué cambiarías o harías diferente para mejorar este curso? 6 | ¿Qué quitarías? 7 | Si tuvieras que recomendar este curso a un compañero ¿qué le dirías? 8 | 9 | Lo mejor de la actividad ha sido: 10 | Lo que habría que mejorar es: 11 | Lo que he echado en falta ha sido: 12 | Otras sugerencias o aportaciones: -------------------------------------------------------------------------------- /docs/ides.md: -------------------------------------------------------------------------------- 1 | # Angular IDEs 2 | 3 | Algunos editores que tiene soporte para angular son: 4 | 5 | - Angular IDE 6 | - IntelliJ IDEA 7 | - Visual Studio Code 8 | - Webstorm 9 | 10 | En https://angular.io/guide/language-service nos indican las extensiones/plugins/módulos que hay que instalar en algunos de dichos IDEs para obtener el soporte de Angular. 11 | 12 | En https://angular.io/resources hay un listado de los IDEs que se conocen que soportan Angular, además de otros recursos interesantes. 13 | -------------------------------------------------------------------------------- /docs/img/comparacion_dev_prod.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/comparacion_dev_prod.png -------------------------------------------------------------------------------- /docs/img/estructura-src.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/estructura-src.png -------------------------------------------------------------------------------- /docs/img/estructura.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/estructura.png -------------------------------------------------------------------------------- /docs/img/formcontrol_properties.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/formcontrol_properties.png -------------------------------------------------------------------------------- /docs/img/generate-lib.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/generate-lib.png -------------------------------------------------------------------------------- /docs/img/lib-angularjson.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/lib-angularjson.png -------------------------------------------------------------------------------- /docs/img/lifecycle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/lifecycle.png -------------------------------------------------------------------------------- /docs/img/ngModel_clases.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/ngModel_clases.png -------------------------------------------------------------------------------- /docs/img/projects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/projects.png -------------------------------------------------------------------------------- /docs/img/schedulers-animationFrame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/schedulers-animationFrame.png -------------------------------------------------------------------------------- /docs/img/schedulers-asap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/schedulers-asap.png -------------------------------------------------------------------------------- /docs/img/schedulers-async.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/schedulers-async.png -------------------------------------------------------------------------------- /docs/img/schedulers-inicio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/schedulers-inicio.png -------------------------------------------------------------------------------- /docs/img/schedulers-of.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/schedulers-of.png -------------------------------------------------------------------------------- /docs/img/schedulers-timer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/schedulers-timer.png -------------------------------------------------------------------------------- /docs/img/typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/docs/img/typescript.png -------------------------------------------------------------------------------- /docs/native-script.md: -------------------------------------------------------------------------------- 1 | https://docs.nativescript.org/code-sharing/intro 2 | -------------------------------------------------------------------------------- /docs/ngNativeValidate.md: -------------------------------------------------------------------------------- 1 | # La directiva ngNativeValidate 2 | 3 | Angular añade el atributo novalidate a todos los formularios por defecto. 4 | 5 | Este atributo desactiva la validación nativa de los navegadores. 6 | 7 | Si queremos utilizar la validación nativa en formularios de Angular hay que añadir la directiva de atributo **ngNativeValidate**. 8 | 9 | ```html 10 |
11 | ``` 12 | -------------------------------------------------------------------------------- /docs/old-version.md: -------------------------------------------------------------------------------- 1 | # Instalar una versión antigua 2 | 3 | Para instalar una versión específica del CLI: 4 | 5 | > npm install -g @angular/cli@7.3.10 6 | 7 | Si ya teníamos alguna versión instalada, entonces habrá que borrarla previamente: 8 | 9 | > npm uninstall -g @angular/cli 10 | 11 | > npm cache clean --force 12 | 13 | > npm install -g @angular/cli@7 14 | 15 | Podemos ver las versiones disponibles con este comando: 16 | 17 | > npm view @angular/cli 18 | 19 | Se puede volver a la última versión con: 20 | 21 | > npm install -g @angular/cli@latest 22 | -------------------------------------------------------------------------------- /docs/pendiente.md: -------------------------------------------------------------------------------- 1 | # Pendientes de meter en el curso 2 | 3 | ## Directiva ngNonBindable 4 | 5 | Evita bindear una variable 6 | 7 | ```html 8 |
9 | {{ content }} 10 | 11 | ← This is what {{ content }} rendered 12 | 13 |
14 | ``` 15 | 16 | ## Cambiar el title de la página dinámicamente 17 | 18 | https://angular.io/guide/set-document-title 19 | -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { CursoPage } from "./app.po"; 2 | 3 | describe('curso App', () => { 4 | let page: CursoPage; 5 | 6 | beforeEach(() => { 7 | page = new CursoPage(); 8 | }); 9 | 10 | it('Debe aparecer un h1 con el texto Home', () => { 11 | page.navigateTo(); 12 | expect(page.getH1Text()).toEqual('Home'); 13 | }); 14 | 15 | it('Debe aparecer un h2 con el texto Login', () => { 16 | page.navigateTo(); 17 | page.getLoginLink().click(); 18 | 19 | expect(page.getH2Text()).toEqual('Login'); 20 | 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class CursoPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getH1Text() { 9 | return element(by.css('h1')).getText(); 10 | } 11 | 12 | getLoginLink() { 13 | return element(by.linkText('Login')); 14 | } 15 | 16 | getH2Text() { 17 | return element(by.css('h2')).getText(); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /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 | } 14 | -------------------------------------------------------------------------------- /projects/ejercicio-final/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'. -------------------------------------------------------------------------------- /projects/ejercicio-final/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 | -------------------------------------------------------------------------------- /projects/ejercicio-final/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 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio-final/src/app/app.component.css -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | import { AuthService } from './services/auth.service'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | templateUrl: './app.component.html', 8 | styleUrls: ['./app.component.css'] 9 | }) 10 | export class AppComponent { 11 | title = 'ejercicio-final'; 12 | 13 | constructor(public auth: AuthService){ 14 | 15 | } 16 | 17 | isLogged(): Observable { 18 | return this.auth.isLogged(); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/layout/private-header/private-header.component.css: -------------------------------------------------------------------------------- 1 | span { 2 | margin-left: 20px; 3 | } 4 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/layout/private-header/private-header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | Hola, {{username}} 9 | Logout 10 | 11 | 12 |
13 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/layout/private-menu/private-menu.component.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | margin-left: 20px; 3 | } 4 | 5 | .selected { 6 | color: lightskyblue; 7 | } 8 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/layout/private-menu/private-menu.component.html: -------------------------------------------------------------------------------- 1 | Dashboard 2 | Users 3 | Providers 4 | Customers 5 | Profile 6 | 7 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/layout/private-menu/private-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-private-menu', 5 | templateUrl: './private-menu.component.html', 6 | styleUrls: ['./private-menu.component.css'] 7 | }) 8 | export class PrivateMenuComponent implements OnInit { 9 | 10 | constructor() { 11 | 12 | } 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/layout/public-header/public-header.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio-final/src/app/components/layout/public-header/public-header.component.css -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/layout/public-header/public-header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/layout/public-header/public-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-public-header', 5 | templateUrl: './public-header.component.html', 6 | styleUrls: ['./public-header.component.css'] 7 | }) 8 | export class PublicHeaderComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/layout/public-menu/public-menu.component.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | margin-left: 20px; 3 | } 4 | 5 | .selected { 6 | color: lightskyblue; 7 | } 8 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/layout/public-menu/public-menu.component.html: -------------------------------------------------------------------------------- 1 | Home 2 | Login 3 | Acerca de 4 | 5 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/layout/public-menu/public-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-public-menu', 5 | templateUrl: './public-menu.component.html', 6 | styleUrls: ['./public-menu.component.css'] 7 | }) 8 | export class PublicMenuComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/private/customers/customers-list/customers-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio-final/src/app/components/private/customers/customers-list/customers-list.component.css -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/private/customers/customers-list/customers-list.component.html: -------------------------------------------------------------------------------- 1 |

Customers List

2 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/private/customers/customers-list/customers-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-customers-list', 5 | templateUrl: './customers-list.component.html', 6 | styleUrls: ['./customers-list.component.css'] 7 | }) 8 | export class CustomersListComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/private/dashboard/dashboard.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio-final/src/app/components/private/dashboard/dashboard.component.css -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/private/dashboard/dashboard.component.html: -------------------------------------------------------------------------------- 1 |

Dashboard

2 | 3 |

Welcome {{username}}

4 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/private/profile/profile-edit/profile-edit.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio-final/src/app/components/private/profile/profile-edit/profile-edit.component.css -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/private/profile/profile-edit/profile-edit.component.html: -------------------------------------------------------------------------------- 1 |

Your profile

2 | 3 | Username: 4 | 5 | 6 | 7 | 8 | 9 |

{{ username }}

10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/private/providers/providers-list/providers-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio-final/src/app/components/private/providers/providers-list/providers-list.component.css -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/private/providers/providers-list/providers-list.component.html: -------------------------------------------------------------------------------- 1 |

Providers List

2 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/private/providers/providers-list/providers-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-providers-list', 5 | templateUrl: './providers-list.component.html', 6 | styleUrls: ['./providers-list.component.css'] 7 | }) 8 | export class ProvidersListComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/private/user-crud-basic/user-crud-basic.component.css: -------------------------------------------------------------------------------- 1 | .selected { 2 | background-color: #CFD8DC !important; 3 | color: black; 4 | } 5 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/public/about/about.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio-final/src/app/components/public/about/about.component.css -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/public/about/about.component.html: -------------------------------------------------------------------------------- 1 |

Acerca de

2 | 3 |
{{autor.nombre}} {{autor.apellido}}
4 | 5 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/public/about/about.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Autor } from '../../../model/autor'; 3 | 4 | 5 | @Component({ 6 | selector: 'about', 7 | templateUrl: './about.component.html', 8 | styleUrls: ['./about.component.css'] 9 | }) 10 | export class AboutComponent implements OnInit { 11 | 12 | public autor: Autor; 13 | 14 | constructor() { 15 | this.autor = { 16 | nombre: 'Carlos', 17 | apellido: 'Herrera', 18 | edad: 37 19 | } 20 | } 21 | 22 | ngOnInit() { 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/public/home/home.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio-final/src/app/components/public/home/home.component.css -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/public/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Home

3 | 4 |

Esta es la mejor página del mundo

5 |
6 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/public/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.css'] 7 | }) 8 | export class HomeComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/components/public/login/login.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio-final/src/app/components/public/login/login.component.css -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/model/address.ts: -------------------------------------------------------------------------------- 1 | import { Geo } from "./geo"; 2 | 3 | export class Address { 4 | constructor( 5 | public street?: string, 6 | public suite?: string, 7 | public city?: string, 8 | public zipcode?: string, 9 | public geo?: Geo 10 | ) {} 11 | } 12 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/model/autor.ts: -------------------------------------------------------------------------------- 1 | export interface Autor { 2 | nombre: string; 3 | apellido: string; 4 | edad: number; 5 | } 6 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/model/company.ts: -------------------------------------------------------------------------------- 1 | export class Company { 2 | constructor( 3 | public name?: string, 4 | public catchPhrase?: string, 5 | public bs?: string 6 | ) {} 7 | } 8 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/model/geo.ts: -------------------------------------------------------------------------------- 1 | export class Geo { 2 | constructor(public lat: string, public lng: string) {} 3 | } 4 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/app/model/user.ts: -------------------------------------------------------------------------------- 1 | import { Company } from './company'; 2 | import { Address } from './address'; 3 | 4 | export class User { 5 | constructor( 6 | public id?: number, 7 | public name?: string, 8 | public username?: string, 9 | public email?: string, 10 | public address?: Address, 11 | public phone?: string, 12 | public website?: string, 13 | public company?: Company 14 | ){} 15 | } 16 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio-final/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/ejercicio-final/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | api_url: 'https://jsonplaceholder.typicode.com/' 4 | }; 5 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio-final/src/favicon.ico -------------------------------------------------------------------------------- /projects/ejercicio-final/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 | -------------------------------------------------------------------------------- /projects/ejercicio-final/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/ejercicio-final/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 | -------------------------------------------------------------------------------- /projects/ejercicio-final/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 | -------------------------------------------------------------------------------- /projects/ejercicio-final/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 | -------------------------------------------------------------------------------- /projects/ejercicio01/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 -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio01/src/app/app.component.css -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { AuthService } from './services/auth.service'; 3 | import { Observable } from 'rxjs'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | templateUrl: './app.component.html', 8 | styleUrls: ['./app.component.css'] 9 | }) 10 | export class AppComponent { 11 | title = 'ejercicio01'; 12 | 13 | constructor(public auth: AuthService){ 14 | 15 | } 16 | 17 | isLogged(): Observable { 18 | return this.auth.isLogged(); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/customers/customers-list/customers-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio01/src/app/components/customers/customers-list/customers-list.component.css -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/customers/customers-list/customers-list.component.html: -------------------------------------------------------------------------------- 1 |

Customers List

2 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/customers/customers-list/customers-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-customers-list', 5 | templateUrl: './customers-list.component.html', 6 | styleUrls: ['./customers-list.component.css'] 7 | }) 8 | export class CustomersListComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/dashboard/dashboard.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio01/src/app/components/dashboard/dashboard.component.css -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/dashboard/dashboard.component.html: -------------------------------------------------------------------------------- 1 |

Dashboard

2 | 3 |

Welcome {{username}}

4 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/dashboard/dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { AuthService } from '../../services/auth.service'; 3 | 4 | @Component({ 5 | selector: 'app-dashboard', 6 | templateUrl: './dashboard.component.html', 7 | styleUrls: ['./dashboard.component.css'] 8 | }) 9 | export class DashboardComponent implements OnInit { 10 | 11 | username: string; 12 | 13 | constructor(private authService: AuthService) { 14 | this.username = this.authService.getUsername(); 15 | } 16 | 17 | ngOnInit() { 18 | } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/home/home.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio01/src/app/components/home/home.component.css -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Home

3 | 4 |

Login

5 |
6 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.css'] 7 | }) 8 | export class HomeComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/login/login.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio01/src/app/components/login/login.component.css -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/profile/profile-edit/profile-edit.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio01/src/app/components/profile/profile-edit/profile-edit.component.css -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/profile/profile-edit/profile-edit.component.html: -------------------------------------------------------------------------------- 1 |

Your profile

2 | 3 | Username: 4 | 5 | 6 | 7 | 8 | 9 |

{{ username }}

10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/providers/poviders-list/poviders-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio01/src/app/components/providers/poviders-list/poviders-list.component.css -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/providers/poviders-list/poviders-list.component.html: -------------------------------------------------------------------------------- 1 |

Providers List

2 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/components/providers/poviders-list/poviders-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-poviders-list', 5 | templateUrl: './poviders-list.component.html', 6 | styleUrls: ['./poviders-list.component.css'] 7 | }) 8 | export class PovidersListComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/layout/private-header/private-header.component.css: -------------------------------------------------------------------------------- 1 | span { 2 | margin-left: 20px; 3 | } 4 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/layout/private-header/private-header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | {{ username }} 9 | Logout 10 | 11 | 12 |
13 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/layout/private-menu/private-menu.component.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | margin-left: 20px; 3 | } 4 | 5 | .selected { 6 | color: lightskyblue; 7 | } 8 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/layout/private-menu/private-menu.component.html: -------------------------------------------------------------------------------- 1 | Dashboard 2 | Providers 3 | Customers 4 | Edit profile 5 | 6 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/layout/private-menu/private-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-private-menu', 5 | templateUrl: './private-menu.component.html', 6 | styleUrls: ['./private-menu.component.css'] 7 | }) 8 | export class PrivateMenuComponent implements OnInit { 9 | 10 | constructor() { 11 | 12 | } 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/layout/public-header/public-header.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio01/src/app/layout/public-header/public-header.component.css -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/layout/public-header/public-header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/layout/public-header/public-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-public-header', 5 | templateUrl: './public-header.component.html', 6 | styleUrls: ['./public-header.component.css'] 7 | }) 8 | export class PublicHeaderComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/layout/public-menu/public-menu.component.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | margin-left: 20px; 3 | } 4 | 5 | .selected { 6 | color: lightskyblue; 7 | } 8 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/layout/public-menu/public-menu.component.html: -------------------------------------------------------------------------------- 1 | Home 2 | Login 3 | 4 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/app/layout/public-menu/public-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-public-menu', 5 | templateUrl: './public-menu.component.html', 6 | styleUrls: ['./public-menu.component.css'] 7 | }) 8 | export class PublicMenuComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio01/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/ejercicio01/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/ejercicio01/src/favicon.ico -------------------------------------------------------------------------------- /projects/ejercicio01/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 | -------------------------------------------------------------------------------- /projects/ejercicio01/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/ejercicio01/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 | -------------------------------------------------------------------------------- /projects/ejercicio01/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 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /projects/ejercicio01/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 | -------------------------------------------------------------------------------- /projects/fonk-integration/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'. -------------------------------------------------------------------------------- /projects/fonk-integration/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/fonk-integration/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 | -------------------------------------------------------------------------------- /projects/fonk-integration/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/fonk-integration/src/app/app.component.css -------------------------------------------------------------------------------- /projects/fonk-integration/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { ReactiveFormsModule } from '@angular/forms'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { NgModule } from '@angular/core'; 4 | 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | ReactiveFormsModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /projects/fonk-integration/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/fonk-integration/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/fonk-integration/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/fonk-integration/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/fonk-integration/src/favicon.ico -------------------------------------------------------------------------------- /projects/fonk-integration/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | FonkIntegration 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/fonk-integration/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 | -------------------------------------------------------------------------------- /projects/fonk-integration/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/fonk-integration/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /projects/fonk-integration/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 | -------------------------------------------------------------------------------- /projects/fonk-integration/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 | -------------------------------------------------------------------------------- /projects/huge-form/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'. -------------------------------------------------------------------------------- /projects/huge-form/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/huge-form/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 | -------------------------------------------------------------------------------- /projects/huge-form/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 | -------------------------------------------------------------------------------- /projects/huge-form/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/huge-form/src/app/app.component.css -------------------------------------------------------------------------------- /projects/huge-form/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/huge-form/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 = 'huge-form'; 10 | } 11 | -------------------------------------------------------------------------------- /projects/huge-form/src/app/components/huge-form/huge-form.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/huge-form/src/app/components/huge-form/huge-form.component.css -------------------------------------------------------------------------------- /projects/huge-form/src/app/services/db.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { DbService } from './db.service'; 4 | 5 | describe('DbService', () => { 6 | let service: DbService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(DbService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/huge-form/src/app/services/form.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { FormService } from './form.service'; 4 | 5 | describe('FormService', () => { 6 | let service: FormService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(FormService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/huge-form/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/huge-form/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/huge-form/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/huge-form/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/huge-form/src/favicon.ico -------------------------------------------------------------------------------- /projects/huge-form/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HugeForm 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/huge-form/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 | -------------------------------------------------------------------------------- /projects/huge-form/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/huge-form/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /projects/huge-form/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 | -------------------------------------------------------------------------------- /projects/huge-form/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 | -------------------------------------------------------------------------------- /projects/marbles/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'. -------------------------------------------------------------------------------- /projects/marbles/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 | -------------------------------------------------------------------------------- /projects/marbles/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 | -------------------------------------------------------------------------------- /projects/marbles/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/marbles/src/app/app.component.css -------------------------------------------------------------------------------- /projects/marbles/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

4 | Marble diagrams 5 |

6 |
7 | 8 |
9 |
10 | 11 |
12 |
13 | 14 |
15 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /projects/marbles/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { DiagramModule } from './modules/diagram/diagram.module'; 4 | import { ReactiveFormsModule } from '@angular/forms'; 5 | 6 | import { AppComponent } from './app.component'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | AppComponent 11 | ], 12 | imports: [ 13 | BrowserModule, 14 | DiagramModule, 15 | ReactiveFormsModule 16 | ], 17 | providers: [], 18 | bootstrap: [AppComponent] 19 | }) 20 | export class AppModule { } 21 | -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/diagram/diagram.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/marbles/src/app/modules/diagram/components/diagram/diagram.component.css -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/end/end.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/marbles/src/app/modules/diagram/components/end/end.component.css -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/end/end.component.html: -------------------------------------------------------------------------------- 1 | 3 | -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/end/end.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: '[end]', 5 | templateUrl: './end.component.html', 6 | styleUrls: ['./end.component.css'] 7 | }) 8 | export class EndComponent implements OnInit { 9 | 10 | @Input() x; 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/error/error.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/marbles/src/app/modules/diagram/components/error/error.component.css -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/error/error.component.html: -------------------------------------------------------------------------------- 1 | 5 | 9 | -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/error/error.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: '[error]', 5 | templateUrl: './error.component.html', 6 | styleUrls: ['./error.component.css'] 7 | }) 8 | export class ErrorComponent implements OnInit { 9 | 10 | @Input() x; 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/marble/marble.component.css: -------------------------------------------------------------------------------- 1 | svg:circle { 2 | opacity:1; 3 | fill-opacity:1; 4 | stroke-width:1px; 5 | } 6 | 7 | svg:text { 8 | font-family:sans-serif; 9 | text-align:center; 10 | } 11 | -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/operator-block/operator-block.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/marbles/src/app/modules/diagram/components/operator-block/operator-block.component.css -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/operator-block/operator-block.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/operator-block/operator-block.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-operator-block', 5 | templateUrl: './operator-block.component.html', 6 | styleUrls: ['./operator-block.component.css'], 7 | encapsulation: ViewEncapsulation.None 8 | }) 9 | export class OperatorBlockComponent implements OnInit { 10 | 11 | @Input() y; 12 | constructor() { } 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/operator/operator.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/marbles/src/app/modules/diagram/components/operator/operator.component.css -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/operator/operator.component.html: -------------------------------------------------------------------------------- 1 | 7 | {{operator}} 12 | -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/operator/operator.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: '[operator]', 5 | templateUrl: './operator.component.html', 6 | styleUrls: ['./operator.component.css'] 7 | }) 8 | export class OperatorComponent implements OnInit { 9 | 10 | @Input() operator = ''; 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /projects/marbles/src/app/modules/diagram/components/source-block/source-block.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/marbles/src/app/modules/diagram/components/source-block/source-block.component.css -------------------------------------------------------------------------------- /projects/marbles/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/marbles/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/marbles/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/marbles/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/marbles/src/favicon.ico -------------------------------------------------------------------------------- /projects/marbles/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Marbles 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /projects/marbles/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 | -------------------------------------------------------------------------------- /projects/marbles/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/marbles/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 | -------------------------------------------------------------------------------- /projects/marbles/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 | -------------------------------------------------------------------------------- /projects/marbles/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 | -------------------------------------------------------------------------------- /projects/mylib/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/mylib", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/mylib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mylib", 3 | "version": "0.0.1", 4 | "peerDependencies": { 5 | "@angular/common": "^9.0.0-next.5", 6 | "@angular/core": "^9.0.0-next.5" 7 | } 8 | } -------------------------------------------------------------------------------- /projects/mylib/src/lib/mylib.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'lib-mylib', 5 | template: ` 6 |

7 | mylib works! 8 |

9 | `, 10 | styles: [] 11 | }) 12 | export class MylibComponent implements OnInit { 13 | 14 | constructor() { } 15 | 16 | ngOnInit() { 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /projects/mylib/src/lib/mylib.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { MylibComponent } from './mylib.component'; 3 | 4 | 5 | 6 | @NgModule({ 7 | declarations: [MylibComponent], 8 | imports: [ 9 | ], 10 | exports: [MylibComponent] 11 | }) 12 | export class MylibModule { } 13 | -------------------------------------------------------------------------------- /projects/mylib/src/lib/mylib.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { MylibService } from './mylib.service'; 4 | 5 | describe('MylibService', () => { 6 | let service: MylibService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(MylibService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /projects/mylib/src/lib/mylib.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class MylibService { 7 | 8 | constructor() { } 9 | } 10 | -------------------------------------------------------------------------------- /projects/mylib/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of mylib 3 | */ 4 | 5 | export * from './lib/mylib.service'; 6 | export * from './lib/mylib.component'; 7 | export * from './lib/mylib.module'; 8 | -------------------------------------------------------------------------------- /projects/mylib/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "angularCompilerOptions": { 4 | "enableIvy": false 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /projects/mylib/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 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/mylib/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "lib", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "lib", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/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 -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-funcion/src/app/app.component.css -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { AuthService } from './services/auth.service'; 3 | import { Observable } from 'rxjs'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | templateUrl: './app.component.html', 8 | styleUrls: ['./app.component.css'] 9 | }) 10 | export class AppComponent { 11 | title = 'ejercicio01'; 12 | 13 | constructor(public auth: AuthService){ 14 | 15 | } 16 | 17 | isLogged(): Observable { 18 | return this.auth.isLogged(); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/customers/customers-list/customers-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-funcion/src/app/components/customers/customers-list/customers-list.component.css -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/customers/customers-list/customers-list.component.html: -------------------------------------------------------------------------------- 1 |

Customers List

2 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/customers/customers-list/customers-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-customers-list', 5 | templateUrl: './customers-list.component.html', 6 | styleUrls: ['./customers-list.component.css'] 7 | }) 8 | export class CustomersListComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/dashboard/dashboard.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-funcion/src/app/components/dashboard/dashboard.component.css -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/dashboard/dashboard.component.html: -------------------------------------------------------------------------------- 1 |

Dashboard

2 | 3 |

Welcome {{username}}

4 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/home/home.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-funcion/src/app/components/home/home.component.css -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Home

3 | 4 |

Login

5 |
6 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.css'] 7 | }) 8 | export class HomeComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/login/login.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-funcion/src/app/components/login/login.component.css -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/profile/profile-edit/profile-edit.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-funcion/src/app/components/profile/profile-edit/profile-edit.component.css -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/profile/profile-edit/profile-edit.component.html: -------------------------------------------------------------------------------- 1 |

Your profile

2 | 3 | Username: 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/providers/poviders-list/poviders-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-funcion/src/app/components/providers/poviders-list/poviders-list.component.css -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/providers/poviders-list/poviders-list.component.html: -------------------------------------------------------------------------------- 1 |

Providers List

2 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/components/providers/poviders-list/poviders-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-poviders-list', 5 | templateUrl: './poviders-list.component.html', 6 | styleUrls: ['./poviders-list.component.css'] 7 | }) 8 | export class PovidersListComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/layout/private-header/private-header.component.css: -------------------------------------------------------------------------------- 1 | span { 2 | margin-left: 20px; 3 | } 4 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/layout/private-header/private-header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | {{getUsername()}} 9 | Logout 10 | 11 | 12 |
13 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/layout/private-menu/private-menu.component.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | margin-left: 20px; 3 | } 4 | 5 | .selected { 6 | color: lightskyblue; 7 | } 8 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/layout/private-menu/private-menu.component.html: -------------------------------------------------------------------------------- 1 | Dashboard 2 | Providers 3 | Customers 4 | Edit profile 5 | 6 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/layout/private-menu/private-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-private-menu', 5 | templateUrl: './private-menu.component.html', 6 | styleUrls: ['./private-menu.component.css'] 7 | }) 8 | export class PrivateMenuComponent implements OnInit { 9 | 10 | constructor() { 11 | 12 | } 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/layout/public-header/public-header.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-funcion/src/app/layout/public-header/public-header.component.css -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/layout/public-header/public-header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/layout/public-header/public-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-public-header', 5 | templateUrl: './public-header.component.html', 6 | styleUrls: ['./public-header.component.css'] 7 | }) 8 | export class PublicHeaderComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/layout/public-menu/public-menu.component.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | margin-left: 20px; 3 | } 4 | 5 | .selected { 6 | color: lightskyblue; 7 | } 8 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/layout/public-menu/public-menu.component.html: -------------------------------------------------------------------------------- 1 | Home 2 | Login 3 | 4 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/app/layout/public-menu/public-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-public-menu', 5 | templateUrl: './public-menu.component.html', 6 | styleUrls: ['./public-menu.component.css'] 7 | }) 8 | export class PublicMenuComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-funcion/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-funcion/src/favicon.ico -------------------------------------------------------------------------------- /projects/solucion01-funcion/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 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/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 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/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 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /projects/solucion01-funcion/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 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/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 -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-ngdocheck/src/app/app.component.css -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { AuthService } from './services/auth.service'; 3 | import { Observable } from 'rxjs'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | templateUrl: './app.component.html', 8 | styleUrls: ['./app.component.css'] 9 | }) 10 | export class AppComponent { 11 | title = 'ejercicio01'; 12 | 13 | constructor(public auth: AuthService){ 14 | 15 | } 16 | 17 | isLogged(): Observable { 18 | return this.auth.isLogged(); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/customers/customers-list/customers-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-ngdocheck/src/app/components/customers/customers-list/customers-list.component.css -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/customers/customers-list/customers-list.component.html: -------------------------------------------------------------------------------- 1 |

Customers List

2 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/customers/customers-list/customers-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-customers-list', 5 | templateUrl: './customers-list.component.html', 6 | styleUrls: ['./customers-list.component.css'] 7 | }) 8 | export class CustomersListComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/dashboard/dashboard.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-ngdocheck/src/app/components/dashboard/dashboard.component.css -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/dashboard/dashboard.component.html: -------------------------------------------------------------------------------- 1 |

Dashboard

2 | 3 |

Welcome {{username}}

4 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/home/home.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-ngdocheck/src/app/components/home/home.component.css -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Home

3 | 4 |

Login

5 |
6 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.css'] 7 | }) 8 | export class HomeComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/login/login.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-ngdocheck/src/app/components/login/login.component.css -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/profile/profile-edit/profile-edit.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-ngdocheck/src/app/components/profile/profile-edit/profile-edit.component.css -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/profile/profile-edit/profile-edit.component.html: -------------------------------------------------------------------------------- 1 |

Your profile

2 | 3 | Username: 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/providers/poviders-list/poviders-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-ngdocheck/src/app/components/providers/poviders-list/poviders-list.component.css -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/providers/poviders-list/poviders-list.component.html: -------------------------------------------------------------------------------- 1 |

Providers List

2 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/components/providers/poviders-list/poviders-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-poviders-list', 5 | templateUrl: './poviders-list.component.html', 6 | styleUrls: ['./poviders-list.component.css'] 7 | }) 8 | export class PovidersListComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/layout/private-header/private-header.component.css: -------------------------------------------------------------------------------- 1 | span { 2 | margin-left: 20px; 3 | } 4 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/layout/private-header/private-header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | {{username}} 9 | Logout 10 | 11 | 12 |
13 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/layout/private-menu/private-menu.component.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | margin-left: 20px; 3 | } 4 | 5 | .selected { 6 | color: lightskyblue; 7 | } 8 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/layout/private-menu/private-menu.component.html: -------------------------------------------------------------------------------- 1 | Dashboard 2 | Providers 3 | Customers 4 | Edit profile 5 | 6 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/layout/private-menu/private-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-private-menu', 5 | templateUrl: './private-menu.component.html', 6 | styleUrls: ['./private-menu.component.css'] 7 | }) 8 | export class PrivateMenuComponent implements OnInit { 9 | 10 | constructor() { 11 | 12 | } 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/layout/public-header/public-header.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-ngdocheck/src/app/layout/public-header/public-header.component.css -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/layout/public-header/public-header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/layout/public-header/public-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-public-header', 5 | templateUrl: './public-header.component.html', 6 | styleUrls: ['./public-header.component.css'] 7 | }) 8 | export class PublicHeaderComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/layout/public-menu/public-menu.component.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | margin-left: 20px; 3 | } 4 | 5 | .selected { 6 | color: lightskyblue; 7 | } 8 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/layout/public-menu/public-menu.component.html: -------------------------------------------------------------------------------- 1 | Home 2 | Login 3 | 4 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/app/layout/public-menu/public-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-public-menu', 5 | templateUrl: './public-menu.component.html', 6 | styleUrls: ['./public-menu.component.css'] 7 | }) 8 | export class PublicMenuComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-ngdocheck/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-ngdocheck/src/favicon.ico -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/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 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/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 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/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 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /projects/solucion01-ngdocheck/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 | -------------------------------------------------------------------------------- /projects/solucion01-subject/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 -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-subject/src/app/app.component.css -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { AuthService } from './services/auth.service'; 3 | import { Observable } from 'rxjs'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | templateUrl: './app.component.html', 8 | styleUrls: ['./app.component.css'] 9 | }) 10 | export class AppComponent { 11 | title = 'ejercicio01'; 12 | 13 | constructor(public auth: AuthService){ 14 | 15 | } 16 | 17 | isLogged(): Observable { 18 | return this.auth.isLogged(); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/customers/customers-list/customers-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-subject/src/app/components/customers/customers-list/customers-list.component.css -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/customers/customers-list/customers-list.component.html: -------------------------------------------------------------------------------- 1 |

Customers List

2 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/customers/customers-list/customers-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-customers-list', 5 | templateUrl: './customers-list.component.html', 6 | styleUrls: ['./customers-list.component.css'] 7 | }) 8 | export class CustomersListComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/dashboard/dashboard.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-subject/src/app/components/dashboard/dashboard.component.css -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/dashboard/dashboard.component.html: -------------------------------------------------------------------------------- 1 |

Dashboard

2 | 3 |

Welcome {{username}}

4 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/home/home.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-subject/src/app/components/home/home.component.css -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Home

3 | 4 |

Login

5 |
6 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.css'] 7 | }) 8 | export class HomeComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/login/login.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-subject/src/app/components/login/login.component.css -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/profile/profile-edit/profile-edit.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-subject/src/app/components/profile/profile-edit/profile-edit.component.css -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/profile/profile-edit/profile-edit.component.html: -------------------------------------------------------------------------------- 1 |

Your profile

2 | 3 | Username: 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/providers/poviders-list/poviders-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-subject/src/app/components/providers/poviders-list/poviders-list.component.css -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/providers/poviders-list/poviders-list.component.html: -------------------------------------------------------------------------------- 1 |

Providers List

2 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/components/providers/poviders-list/poviders-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-poviders-list', 5 | templateUrl: './poviders-list.component.html', 6 | styleUrls: ['./poviders-list.component.css'] 7 | }) 8 | export class PovidersListComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/layout/private-header/private-header.component.css: -------------------------------------------------------------------------------- 1 | span { 2 | margin-left: 20px; 3 | } 4 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/layout/private-header/private-header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | {{username}} 9 | Logout 10 | 11 | 12 |
13 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/layout/private-menu/private-menu.component.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | margin-left: 20px; 3 | } 4 | 5 | .selected { 6 | color: lightskyblue; 7 | } 8 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/layout/private-menu/private-menu.component.html: -------------------------------------------------------------------------------- 1 | Dashboard 2 | Providers 3 | Customers 4 | Edit profile 5 | 6 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/layout/private-menu/private-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-private-menu', 5 | templateUrl: './private-menu.component.html', 6 | styleUrls: ['./private-menu.component.css'] 7 | }) 8 | export class PrivateMenuComponent implements OnInit { 9 | 10 | constructor() { 11 | 12 | } 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/layout/public-header/public-header.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-subject/src/app/layout/public-header/public-header.component.css -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/layout/public-header/public-header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/layout/public-header/public-header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-public-header', 5 | templateUrl: './public-header.component.html', 6 | styleUrls: ['./public-header.component.css'] 7 | }) 8 | export class PublicHeaderComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/layout/public-menu/public-menu.component.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | margin-left: 20px; 3 | } 4 | 5 | .selected { 6 | color: lightskyblue; 7 | } 8 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/layout/public-menu/public-menu.component.html: -------------------------------------------------------------------------------- 1 | Home 2 | Login 3 | 4 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/app/layout/public-menu/public-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-public-menu', 5 | templateUrl: './public-menu.component.html', 6 | styleUrls: ['./public-menu.component.css'] 7 | }) 8 | export class PublicMenuComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-subject/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/solucion01-subject/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/projects/solucion01-subject/src/favicon.ico -------------------------------------------------------------------------------- /projects/solucion01-subject/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 | -------------------------------------------------------------------------------- /projects/solucion01-subject/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/solucion01-subject/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 | -------------------------------------------------------------------------------- /projects/solucion01-subject/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 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /projects/solucion01-subject/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 | -------------------------------------------------------------------------------- /src/app/admin/components/admin-home/admin-home.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/admin/components/admin-home/admin-home.component.css -------------------------------------------------------------------------------- /src/app/admin/components/admin-home/admin-home.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 | Home del Admin 5 |

6 | 7 | 13 | -------------------------------------------------------------------------------- /src/app/admin/components/clientes/clientes.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/admin/components/clientes/clientes.component.css -------------------------------------------------------------------------------- /src/app/admin/components/clientes/clientes.component.html: -------------------------------------------------------------------------------- 1 |

2 | clientes works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/admin/components/clientes/clientes.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'exce-clientes', 5 | templateUrl: './clientes.component.html', 6 | styleUrls: ['./clientes.component.css'] 7 | }) 8 | export class ClientesComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/admin/components/proveedores/proveedores.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/admin/components/proveedores/proveedores.component.css -------------------------------------------------------------------------------- /src/app/admin/components/proveedores/proveedores.component.html: -------------------------------------------------------------------------------- 1 |

2 | proveedores works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/admin/components/proveedores/proveedores.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'exce-proveedores', 5 | templateUrl: './proveedores.component.html', 6 | styleUrls: ['./proveedores.component.css'] 7 | }) 8 | export class ProveedoresComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/admin/components/user-add/user-add.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/admin/components/user-add/user-add.component.css -------------------------------------------------------------------------------- /src/app/admin/components/user-add/user-add.component.html: -------------------------------------------------------------------------------- 1 |

2 | user-add works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/admin/components/user-add/user-add.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-user-add', 5 | templateUrl: './user-add.component.html', 6 | styleUrls: ['./user-add.component.css'] 7 | }) 8 | export class UserAddComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/admin/components/user-edit/user-edit.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/admin/components/user-edit/user-edit.component.css -------------------------------------------------------------------------------- /src/app/admin/components/user-edit/user-edit.component.html: -------------------------------------------------------------------------------- 1 | Log out 2 | 3 |

4 | Editar usuario 5 |

6 | 7 | 13 | -------------------------------------------------------------------------------- /src/app/admin/components/user-edit/user-edit.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-user-edit', 5 | templateUrl: './user-edit.component.html', 6 | styleUrls: ['./user-edit.component.css'] 7 | }) 8 | export class UserEditComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/admin/components/user-list/user-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/admin/components/user-list/user-list.component.css -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 100%; 3 | display: flex; 4 | flex-direction: column; 5 | position: absolute; 6 | top: 0; 7 | bottom: 0; 8 | left: 0; 9 | right: 0; 10 | } 11 | 12 | app-nav { 13 | height: 100%; 14 | } 15 | 16 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
6 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | describe('AppComponent', () => { 5 | beforeEach(async(() => { 6 | TestBed.configureTestingModule({ 7 | imports: [ 8 | RouterTestingModule 9 | ], 10 | declarations: [ 11 | AppComponent 12 | ], 13 | }).compileComponents(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { AuthService } from './services/auth.service'; 2 | import { Component } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.css'] 8 | }) 9 | export class AppComponent { 10 | title = 'app'; 11 | 12 | constructor(public auth: AuthService){ 13 | 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/app/components/about/about.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/about/about.component.css -------------------------------------------------------------------------------- /src/app/components/about/about.component.html: -------------------------------------------------------------------------------- 1 |

About

2 | 3 |
Nombre completo: {{miAutor.nombre}} {{miAutor.apellido}}
4 |
Nombre completo: {{ miAutor.nombre + ' ' + miAutor.apellido }}
5 |
Nombre completo: {{ nombreCompleto() }}
6 | 7 | Un input: 8 | Otro input: 9 | -------------------------------------------------------------------------------- /src/app/components/animation-query-stager/animation-query-stager.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/animation-query-stager/animation-query-stager.component.css -------------------------------------------------------------------------------- /src/app/components/animation-query-stager/animation-query-stager.component.html: -------------------------------------------------------------------------------- 1 |

2 | Un párrafo 3 |

4 | 5 |

6 | Otro párrafo 7 |

8 | 9 |

10 | Otro párrafo más 11 |

12 | 13 |

14 | Y un cuarto párrafo 15 |

16 | 17 |

18 | El quinto y último párrafo 19 |

20 | 21 |
22 | Un div 23 |
24 | 25 |
26 | Otro div 27 |
28 | 29 |
30 | Otro div más 31 |
32 | 33 |
34 | Y un cuarto div 35 |
36 | 37 |
38 | El quinto y último div 39 |
40 | 41 | -------------------------------------------------------------------------------- /src/app/components/animation-search/animation-search.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/animation-search/animation-search.component.css -------------------------------------------------------------------------------- /src/app/components/animation-search/animation-search.component.html: -------------------------------------------------------------------------------- 1 |

Búsqueda de héroes con animación

2 | 3 | 4 | 5 | {{heroTotal}} 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
{{hero.name}}{{hero?.email}}{{hero?.phone}}
14 | -------------------------------------------------------------------------------- /src/app/components/animation/animation.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | .open-close-container { 6 | border: 1px solid #dddddd; 7 | margin-top: 1em; 8 | padding: 20px 20px 0px 20px; 9 | color: #000000; 10 | font-weight: bold; 11 | font-size: 20px; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/components/animation/animation.component.html: -------------------------------------------------------------------------------- 1 |
2 |

The box is now {{ isOpen ? 'Open' : 'Closed' }}!

3 |
4 | 5 | 6 |
7 |

The box is now {{ isOpen ? 'Open' : 'Closed' }}!

8 |
9 | 10 | -------------------------------------------------------------------------------- /src/app/components/busqueda/busqueda.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/busqueda/busqueda.component.css -------------------------------------------------------------------------------- /src/app/components/busqueda/busqueda.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Lista de usuarios

3 | 4 | Búsqueda por email: 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
IdNombreEmail
{{usuario.id}}{{usuario.name}}{{usuario.email}}
21 |
-------------------------------------------------------------------------------- /src/app/components/calculadora/calculadora.component.css: -------------------------------------------------------------------------------- 1 | button { 2 | margin: 10px; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/components/child-comp/child-comp.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/child-comp/child-comp.component.css -------------------------------------------------------------------------------- /src/app/components/child-comp/child-comp.component.html: -------------------------------------------------------------------------------- 1 | 2 |

Detalle de {{hero.name}}

3 |
{{hero.id}}
4 |
5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /src/app/components/cold-observables/cold-observables.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/cold-observables/cold-observables.component.css -------------------------------------------------------------------------------- /src/app/components/cold-observables/cold-observables.component.html: -------------------------------------------------------------------------------- 1 |

Observables

2 | 3 | Ver la consola y el código del componente cold-observables. 4 | -------------------------------------------------------------------------------- /src/app/components/crud-basico/crud-basico.component.css: -------------------------------------------------------------------------------- 1 | .selected { 2 | background-color: #CFD8DC !important; 3 | color: black; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/components/custom-controls/custom-controls.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/custom-controls/custom-controls.component.css -------------------------------------------------------------------------------- /src/app/components/custom-controls/custom-controls.component.html: -------------------------------------------------------------------------------- 1 |

Custom controls

2 | 3 |
4 | 5 | 6 | 7 |
8 | 9 | {{form.value | json}} 10 | 11 | {{form.errors | json}} 12 | 13 | {{form.invalid | json}} 14 | -------------------------------------------------------------------------------- /src/app/components/detalle/detalle.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/detalle/detalle.component.css -------------------------------------------------------------------------------- /src/app/components/detalle/detalle.component.html: -------------------------------------------------------------------------------- 1 | 2 |

Detalle del héroe

3 |
4 |

Datos del héroe {{heroe.name}}

5 |
{{heroe.id}}
6 |
7 | 8 | 9 |
10 |
11 | 14 |
15 | 16 | 17 |
-------------------------------------------------------------------------------- /src/app/components/dynamic-components-example/dynamic-components-example.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/dynamic-components-example/dynamic-components-example.component.css -------------------------------------------------------------------------------- /src/app/components/dynamic-components-example/dynamic-components-example.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /src/app/components/dynamic-form-example/dynamic-form-example.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/dynamic-form-example/dynamic-form-example.component.css -------------------------------------------------------------------------------- /src/app/components/dynamic-form-example/dynamic-form-example.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Job Application for Heroes

3 | 4 |
5 | -------------------------------------------------------------------------------- /src/app/components/galeria/galeria.component.css: -------------------------------------------------------------------------------- 1 | #galeria { 2 | margin-left: 20px; 3 | } 4 | 5 | .img_pequena { 6 | margin-left: 20px; 7 | } 8 | 9 | .seleccionada { 10 | border-bottom: 2px solid red; 11 | } 12 | 13 | .button-row button { 14 | margin-right: 8px; 15 | } 16 | 17 | #lista_imagenes { 18 | margin-top: 20px; 19 | } 20 | -------------------------------------------------------------------------------- /src/app/components/hero-form/hero-form.component.css: -------------------------------------------------------------------------------- 1 | input.ng-valid[required], .ng-valid.required { 2 | border-left: 5px solid #42A948; /* green */ 3 | } 4 | 5 | .ng-invalid:not(form) { 6 | border-left: 5px solid #a94442; /* red */ 7 | } 8 | -------------------------------------------------------------------------------- /src/app/components/hero-list/hero-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/hero-list/hero-list.component.css -------------------------------------------------------------------------------- /src/app/components/hero-list/hero-list.component.html: -------------------------------------------------------------------------------- 1 |

Listado de Héroes (con observables)

2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
{{hero.name}}{{hero.email}}{{hero.phone}}
10 | -------------------------------------------------------------------------------- /src/app/components/hero-search/hero-search.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/hero-search/hero-search.component.css -------------------------------------------------------------------------------- /src/app/components/hero-search/hero-search.component.html: -------------------------------------------------------------------------------- 1 |

Búsqueda de héroes (con observables)

2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
{{hero.name}}{{hero?.email}}{{hero?.phone}}
13 | -------------------------------------------------------------------------------- /src/app/components/highlight/highlight.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/highlight/highlight.component.css -------------------------------------------------------------------------------- /src/app/components/highlight/highlight.component.html: -------------------------------------------------------------------------------- 1 |

Directiva personalizada

2 | 3 |

Elige un color

4 |
5 | Green 6 | Yellow 7 | Cyan 8 | Red 9 |
10 |

Pon el ratón aquí

11 | -------------------------------------------------------------------------------- /src/app/components/highlight/highlight.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-highlight', 5 | templateUrl: './highlight.component.html', 6 | styleUrls: ['./highlight.component.css'] 7 | }) 8 | export class HighlightComponent implements OnInit { 9 | 10 | color: string = ''; 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/app/components/home-page/home-page.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/home-page/home-page.component.css -------------------------------------------------------------------------------- /src/app/components/home-page/home-page.component.html: -------------------------------------------------------------------------------- 1 |

Homepage

2 | 3 |

La mejor página web del mundo

4 | 5 | 6 | -------------------------------------------------------------------------------- /src/app/components/home-page/home-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-home-page', 6 | templateUrl: './home-page.component.html', 7 | styleUrls: ['./home-page.component.css'] 8 | }) 9 | export class HomePageComponent implements OnInit { 10 | 11 | constructor(private router: Router) { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | onClick() { 17 | this.router.navigate(['/login']); 18 | } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /src/app/components/home/home.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/home/home.component.css -------------------------------------------------------------------------------- /src/app/components/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Home

3 | 4 |

Login

5 |
6 | -------------------------------------------------------------------------------- /src/app/components/iban-validator-example/iban-validator-example.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/iban-validator-example/iban-validator-example.component.css -------------------------------------------------------------------------------- /src/app/components/impure-pipe/impure-pipe.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/impure-pipe/impure-pipe.component.css -------------------------------------------------------------------------------- /src/app/components/impure-pipe/impure-pipe.component.html: -------------------------------------------------------------------------------- 1 |

Pipes impuras

2 | 3 |

Base: {{ base }}

4 |

Exponente: {{ exponente }}

5 |

Restultado: {{ base | exp:exponente }}

6 | 7 |

Otro número: {{ otroNumero }}

8 | 9 | {{ dataArray | json }} 10 |

{{ person.name }}

11 | 12 |

13 | -------------------------------------------------------------------------------- /src/app/components/key-up/key-up.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/key-up/key-up.component.css -------------------------------------------------------------------------------- /src/app/components/key-up/key-up.component.html: -------------------------------------------------------------------------------- 1 |

2 | key-up works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/components/lifecycle/lifecycle.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/lifecycle/lifecycle.component.css -------------------------------------------------------------------------------- /src/app/components/lifecycle/lifecycle.component.html: -------------------------------------------------------------------------------- 1 |

2 | lifecycle works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/components/login/login.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/login/login.component.css -------------------------------------------------------------------------------- /src/app/components/master/master.component.css: -------------------------------------------------------------------------------- 1 | .seleccionado { 2 | font-size: 20px; 3 | } 4 | 5 | /* 6 | tr:hover { 7 | background-color: green; 8 | } 9 | */ -------------------------------------------------------------------------------- /src/app/components/menu/menu.component.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | margin-left: 20px; 3 | } 4 | 5 | .seleccionado { 6 | color: red; 7 | } -------------------------------------------------------------------------------- /src/app/components/nav/nav.component.css: -------------------------------------------------------------------------------- 1 | .toolbar { 2 | height: 64px; 3 | /* Con fixed y z-index estará siempre encima del contenido. */ 4 | position: fixed; 5 | z-index: 2; 6 | } 7 | 8 | .sidenav-container { 9 | /* Misma altura que la toolbar para que el contenido empiece justo debajo */ 10 | margin-top: 64px; 11 | height: 100%; 12 | } 13 | 14 | .sidenav-content { 15 | padding-left: 20px; 16 | } 17 | 18 | -------------------------------------------------------------------------------- /src/app/components/nested-child/nested-child.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/nested-child/nested-child.component.css -------------------------------------------------------------------------------- /src/app/components/nested-child/nested-child.component.html: -------------------------------------------------------------------------------- 1 |

2 | nested-child works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/components/nested-child/nested-child.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'nested-child', 5 | templateUrl: './nested-child.component.html', 6 | styleUrls: ['./nested-child.component.css'] 7 | }) 8 | export class NestedChildComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/components/nested-child2/nested-child2.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/nested-child2/nested-child2.component.css -------------------------------------------------------------------------------- /src/app/components/nested-child2/nested-child2.component.html: -------------------------------------------------------------------------------- 1 |

2 | nested-child2 works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/components/nested-child2/nested-child2.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'nested-child2', 5 | templateUrl: './nested-child2.component.html', 6 | styleUrls: ['./nested-child2.component.css'] 7 | }) 8 | export class NestedChild2Component implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/components/nested-child3/nested-child3.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/nested-child3/nested-child3.component.css -------------------------------------------------------------------------------- /src/app/components/nested-child3/nested-child3.component.html: -------------------------------------------------------------------------------- 1 |

2 | nested-child3 works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/components/nested-child3/nested-child3.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'nested-child3', 5 | templateUrl: './nested-child3.component.html', 6 | styleUrls: ['./nested-child3.component.css'] 7 | }) 8 | export class NestedChild3Component implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/components/nested/nested.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/nested/nested.component.css -------------------------------------------------------------------------------- /src/app/components/nested/nested.component.html: -------------------------------------------------------------------------------- 1 |

2 | nested works! 3 |

4 | 5 | Child 6 | Child2 7 | Child3 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/app/components/nested/nested.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'nested', 5 | templateUrl: './nested.component.html', 6 | styleUrls: ['./nested.component.css'] 7 | }) 8 | export class NestedComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/components/observables-frios/observables-frios.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/observables-frios/observables-frios.component.css -------------------------------------------------------------------------------- /src/app/components/observables-frios/observables-frios.component.html: -------------------------------------------------------------------------------- 1 |

2 | observables-frios works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/components/otro/otro.component.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: blue; 3 | } -------------------------------------------------------------------------------- /src/app/components/otro/otro.component.html: -------------------------------------------------------------------------------- 1 |

2 | otro works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/components/otro/otro.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'exce-otro', 5 | templateUrl: './otro.component.html', 6 | styleUrls: ['./otro.component.css'] 7 | }) 8 | export class OtroComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/components/parent-comp/parent-comp.component.css: -------------------------------------------------------------------------------- 1 | .selected { 2 | background-color: #CFD8DC !important; 3 | color: white; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/components/pipes/pipes.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/pipes/pipes.component.css -------------------------------------------------------------------------------- /src/app/components/reactive-form/reactive-form.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/reactive-form/reactive-form.component.css -------------------------------------------------------------------------------- /src/app/components/rotate/rotate.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/rotate/rotate.component.css -------------------------------------------------------------------------------- /src/app/components/rotate/rotate.component.html: -------------------------------------------------------------------------------- 1 |

Rotar imágenes con una directiva

2 | 3 | 4 | -------------------------------------------------------------------------------- /src/app/components/rotate/rotate.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-rotate', 5 | templateUrl: './rotate.component.html', 6 | styleUrls: ['./rotate.component.css'] 7 | }) 8 | export class RotateComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/components/search/search.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/search/search.component.css -------------------------------------------------------------------------------- /src/app/components/search/search.component.html: -------------------------------------------------------------------------------- 1 |

Búsqueda de usuarios (con observables)

2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
{{user.name}}{{user?.email}}{{user?.phone}}
13 | -------------------------------------------------------------------------------- /src/app/components/template-form/template-form.component.css: -------------------------------------------------------------------------------- 1 | .ng-valid[required], .ng-valid.required { 2 | border-left: 5px solid #42A948; /* green */ 3 | } 4 | 5 | .ng-invalid:not(form) { 6 | border-left: 5px solid #a94442; /* red */ 7 | } 8 | -------------------------------------------------------------------------------- /src/app/components/template-variables/template-variables.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/template-variables/template-variables.component.css -------------------------------------------------------------------------------- /src/app/components/template-variables/template-variables.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

{{ value }}

5 | -------------------------------------------------------------------------------- /src/app/components/user-crud-basic/user-crud-basic.component.css: -------------------------------------------------------------------------------- 1 | .selected { 2 | background-color: #CFD8DC !important; 3 | color: black; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/components/user-form-reactive/user-form-reactive.component.css: -------------------------------------------------------------------------------- 1 | .ng-valid[required], .ng-valid.required { 2 | border-left: 5px solid #42A948; /* green */ 3 | } 4 | 5 | .ng-invalid:not(form) { 6 | border-left: 5px solid #a94442; /* red */ 7 | } 8 | -------------------------------------------------------------------------------- /src/app/components/user-form/user-form.component.css: -------------------------------------------------------------------------------- 1 | .ng-valid[required], .ng-valid.required { 2 | border-left: 5px solid #42A948; /* green */ 3 | } 4 | 5 | .ng-invalid:not(form) { 6 | border-left: 5px solid #a94442; /* red */ 7 | } 8 | -------------------------------------------------------------------------------- /src/app/components/user-form/user-form.component.ts: -------------------------------------------------------------------------------- 1 | import { User } from 'src/app/model/TypicodeUser'; 2 | import { Component } from '@angular/core'; 3 | import { USERS } from 'src/app/data/users'; 4 | 5 | @Component({ 6 | selector: 'user-form', 7 | templateUrl: './user-form.component.html', 8 | styleUrls: ['./user-form.component.css'] 9 | }) 10 | export class UserFormComponent { 11 | 12 | states = ['CA', 'MD', 'OH', 'VA']; 13 | user: User = USERS[0]; 14 | 15 | constructor() { } 16 | 17 | onSubmit() { 18 | //Hacer lo que sea 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/components/usuarios-crud-esqueleto/usuarios-crud-esqueleto.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/components/usuarios-crud-esqueleto/usuarios-crud-esqueleto.component.css -------------------------------------------------------------------------------- /src/app/components/usuarios-crud-esqueleto/usuarios-crud-esqueleto.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-usuarios-crud-esqueleto', 5 | templateUrl: './usuarios-crud-esqueleto.component.html', 6 | styleUrls: ['./usuarios-crud-esqueleto.component.css'] 7 | }) 8 | export class UsuariosCrudEsqueletoComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/contenedor-presentador/components/heroes-container/heroes-container.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/contenedor-presentador/components/heroes-container/heroes-container.component.css -------------------------------------------------------------------------------- /src/app/contenedor-presentador/components/heroes-edit-presenter/heroes-edit-presenter.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/contenedor-presentador/components/heroes-edit-presenter/heroes-edit-presenter.component.css -------------------------------------------------------------------------------- /src/app/contenedor-presentador/components/heroes-edit-presenter/heroes-edit-presenter.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Detalle del héroe {{ hero?.name }}

3 |
4 | 5 | 8 | 9 | 10 |
11 |
12 | -------------------------------------------------------------------------------- /src/app/contenedor-presentador/components/heroes-list-presenter/heroes-list-presenter.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/contenedor-presentador/components/heroes-list-presenter/heroes-list-presenter.component.css -------------------------------------------------------------------------------- /src/app/contenedor-presentador/components/heroes-new-presenter/heroes-new-presenter.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/contenedor-presentador/components/heroes-new-presenter/heroes-new-presenter.component.css -------------------------------------------------------------------------------- /src/app/contenedor-presentador/components/heroes-new-presenter/heroes-new-presenter.component.html: -------------------------------------------------------------------------------- 1 |

Formulario para añadir

2 |
3 | 4 | 7 | 8 |
9 | -------------------------------------------------------------------------------- /src/app/custom-controls/controls/rating-stars/rating-stars.component.css: -------------------------------------------------------------------------------- 1 | span { 2 | display: inline-block; 3 | width: 25px; 4 | line-height: 25px; 5 | text-align: center; 6 | cursor: pointer; 7 | } 8 | -------------------------------------------------------------------------------- /src/app/custom-controls/controls/rating-stars/rating-stars.component.html: -------------------------------------------------------------------------------- 1 | 3 | ⭐ 4 | · 5 | 6 | -------------------------------------------------------------------------------- /src/app/custom-controls/controls/required-text/required-text.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/custom-controls/controls/required-text/required-text.component.css -------------------------------------------------------------------------------- /src/app/custom-controls/controls/required-text/required-text.component.html: -------------------------------------------------------------------------------- 1 | 5 | 6 |
8 | This field is invalid. 9 |
10 | -------------------------------------------------------------------------------- /src/app/custom-controls/controls/tri-state/tri-state.component.css: -------------------------------------------------------------------------------- 1 | .tri-state-content { 2 | margin-bottom: 5px; 3 | width: 100%; 4 | float:left; 5 | } 6 | 7 | .tri-state-label { 8 | display: block; 9 | width: 100%; 10 | } 11 | 12 | div { 13 | display: block; 14 | } 15 | 16 | .tri-state-option { 17 | width: 30%; 18 | float:left; 19 | } 20 | -------------------------------------------------------------------------------- /src/app/custom-controls/validators/required-text-validator/required-text-validator.component.html: -------------------------------------------------------------------------------- 1 |

2 | required-text works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/data/ciudades.ts: -------------------------------------------------------------------------------- 1 | import { Ciudad } from 'app/model/ciudad'; 2 | 3 | export const CIUDADES: Ciudad[] = [ 4 | { nombre: 'Sagres', pais: 'Portugal', codigo: 'SAG'}, 5 | { nombre: 'Somos', pais: 'España', codigo: 'SOM'}, 6 | { nombre: 'Ericeira', pais: 'Portugal', codigo: 'ERI'}, 7 | { nombre: 'Cadiz', pais: 'España', codigo: 'CAD'}, 8 | { nombre: 'Tarifa', pais: 'España', codigo: 'TAR'}, 9 | { nombre: 'Sidney', pais: 'Australia', codigo: 'SID'}, 10 | { nombre: 'Mundaka', pais: 'Portugal', codigo: 'MUN'}, 11 | { nombre: 'Rabat', pais: 'Marruecos', codigo: 'RAB'}, 12 | ]; 13 | -------------------------------------------------------------------------------- /src/app/data/equipos.ts: -------------------------------------------------------------------------------- 1 | import { Equipo } from './../model/equipo'; 2 | 3 | export const EQUIPOS: Equipo[] = [ 4 | { id: 1, nombre: 'Etiopía' }, 5 | { id: 2, nombre: 'República democrática del Congo' }, 6 | { id: 3, nombre: 'FCB Barcelona' }, 7 | { id: 4, nombre: 'Real Madrid CF' }, 8 | { id: 5, nombre: 'Liverpool' }, 9 | { id: 6, nombre: 'Chelsea' }, 10 | { id: 7, nombre: 'Juventus' }, 11 | { id: 8, nombre: 'PSG' } 12 | ]; 13 | -------------------------------------------------------------------------------- /src/app/data/partidos.ts: -------------------------------------------------------------------------------- 1 | import { EQUIPOS } from './equipos'; 2 | import { Partido } from 'src/app/model/partido'; 3 | 4 | export const PARTIDOS: Partido[] = [ 5 | { id: 1, equipo_local: EQUIPOS[0], equipo_visitante: EQUIPOS[1] }, 6 | { id: 2, equipo_local: EQUIPOS[2], equipo_visitante: EQUIPOS[3] }, 7 | { id: 3, equipo_local: EQUIPOS[4], equipo_visitante: EQUIPOS[5] }, 8 | { id: 4, equipo_local: EQUIPOS[6], equipo_visitante: EQUIPOS[7] }, 9 | ]; 10 | -------------------------------------------------------------------------------- /src/app/deteccion-cambios/components/change-detection-child1/change-detection-child1.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/deteccion-cambios/components/change-detection-child1/change-detection-child1.component.css -------------------------------------------------------------------------------- /src/app/deteccion-cambios/components/change-detection-child1/change-detection-child1.component.html: -------------------------------------------------------------------------------- 1 |

2 | child1 - default strategy - object name: {{object.name}} 3 |

4 | -------------------------------------------------------------------------------- /src/app/deteccion-cambios/components/change-detection-child2/change-detection-child2.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/deteccion-cambios/components/change-detection-child2/change-detection-child2.component.css -------------------------------------------------------------------------------- /src/app/deteccion-cambios/components/change-detection-child2/change-detection-child2.component.html: -------------------------------------------------------------------------------- 1 |

2 | child2 - onPush strategy - object name: {{object.name}} 3 |

4 | -------------------------------------------------------------------------------- /src/app/deteccion-cambios/components/change-detection-child3/change-detection-child3.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/deteccion-cambios/components/change-detection-child3/change-detection-child3.component.css -------------------------------------------------------------------------------- /src/app/deteccion-cambios/components/change-detection-child3/change-detection-child3.component.html: -------------------------------------------------------------------------------- 1 |

2 | child3 - onPush strategy - object name: {{object.name}} 3 |

4 | -------------------------------------------------------------------------------- /src/app/deteccion-cambios/components/change-detection-parent/change-detection-parent.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/deteccion-cambios/components/change-detection-parent/change-detection-parent.component.css -------------------------------------------------------------------------------- /src/app/deteccion-cambios/components/change-detection-parent/change-detection-parent.component.html: -------------------------------------------------------------------------------- 1 |

Change detection

2 | 3 |

{{objectp.name}}

4 |

{{objectc1.name}}

5 |

{{objectc2.name}}

6 |

{{objectc3.name}}

7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/app/directives/rotate.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { RotateDirective } from './rotate.directive'; 2 | 3 | describe('RotateDirective', () => { 4 | 5 | }); 6 | -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ad1/ad1.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/dynamic-components/components/ad1/ad1.component.css -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ad1/ad1.component.html: -------------------------------------------------------------------------------- 1 |

2 | ad1 works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ad1/ad1.component.ts: -------------------------------------------------------------------------------- 1 | import { AdComponent } from 'src/app/dynamic-components/model/AdComponent'; 2 | import { Component, OnInit } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'ad1', 6 | templateUrl: './ad1.component.html', 7 | styleUrls: ['./ad1.component.css'] 8 | }) 9 | export class Ad1Component implements AdComponent { 10 | 11 | data: any 12 | constructor() { } 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ad2/ad2.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/dynamic-components/components/ad2/ad2.component.css -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ad2/ad2.component.html: -------------------------------------------------------------------------------- 1 |

2 | ad2 works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ad2/ad2.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { AdComponent } from '../../model/AdComponent'; 3 | 4 | @Component({ 5 | selector: 'ad2', 6 | templateUrl: './ad2.component.html', 7 | styleUrls: ['./ad2.component.css'] 8 | }) 9 | export class Ad2Component implements AdComponent { 10 | data: any; 11 | 12 | constructor() { } 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ad3/ad3.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/dynamic-components/components/ad3/ad3.component.css -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ad3/ad3.component.html: -------------------------------------------------------------------------------- 1 |

2 | ad3 works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ad3/ad3.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { AdComponent } from '../../model/AdComponent'; 3 | 4 | @Component({ 5 | selector: 'ad3', 6 | templateUrl: './ad3.component.html', 7 | styleUrls: ['./ad3.component.css'] 8 | }) 9 | export class Ad3Component implements AdComponent { 10 | data: any; 11 | 12 | constructor() { } 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ad4/ad4.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/dynamic-components/components/ad4/ad4.component.css -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ad4/ad4.component.html: -------------------------------------------------------------------------------- 1 |

2 | ad4 works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ad4/ad4.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { AdComponent } from '../../model/AdComponent'; 3 | 4 | @Component({ 5 | selector: 'ad4', 6 | templateUrl: './ad4.component.html', 7 | styleUrls: ['./ad4.component.css'] 8 | }) 9 | export class Ad4Component implements AdComponent { 10 | data: any; 11 | 12 | constructor() { } 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ads-loader/ads-loader.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/dynamic-components/components/ads-loader/ads-loader.component.css -------------------------------------------------------------------------------- /src/app/dynamic-components/components/ads-loader/ads-loader.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Advertisements

3 | 4 |
5 | -------------------------------------------------------------------------------- /src/app/dynamic-components/model/AdComponent.ts: -------------------------------------------------------------------------------- 1 | export interface AdComponent { 2 | data: any; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/dynamic-components/model/AdItem.ts: -------------------------------------------------------------------------------- 1 | import { Type } from '@angular/core'; 2 | 3 | export class AdItem { 4 | constructor(public component: Type, public data: any) {} 5 | } 6 | -------------------------------------------------------------------------------- /src/app/dynamic-form/question-checkbox.ts: -------------------------------------------------------------------------------- 1 | import { QuestionBase } from './question-base'; 2 | 3 | export class CheckboxQuestion extends QuestionBase { 4 | override controlType = 'checkbox'; 5 | override type: string; 6 | 7 | constructor(options: any = {}) { 8 | super(options); 9 | this.type = options['type'] || ''; 10 | } 11 | } 12 | 13 | 14 | /* 15 | Copyright 2017 Google Inc. All Rights Reserved. 16 | Use of this source code is governed by an MIT-style license that 17 | can be found in the LICENSE file at http://angular.io/license 18 | */ 19 | -------------------------------------------------------------------------------- /src/app/dynamic-form/question-textbox.ts: -------------------------------------------------------------------------------- 1 | import { QuestionBase } from './question-base'; 2 | 3 | export class TextboxQuestion extends QuestionBase { 4 | override controlType = 'textbox'; 5 | override type: string; 6 | 7 | constructor(options: any = {}) { 8 | super(options); 9 | this.type = options['type'] || ''; 10 | } 11 | } 12 | 13 | 14 | /* 15 | Copyright 2017 Google Inc. All Rights Reserved. 16 | Use of this source code is governed by an MIT-style license that 17 | can be found in the LICENSE file at http://angular.io/license 18 | */ 19 | -------------------------------------------------------------------------------- /src/app/fractal/components/tree/tree.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/fractal/components/tree/tree.component.css -------------------------------------------------------------------------------- /src/app/fractal/components/tree/tree.component.html: -------------------------------------------------------------------------------- 1 |

Árbol fractal

2 | 3 |
4 | -------------------------------------------------------------------------------- /src/app/fractal/fractal.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { TreeComponent } from './components/tree/tree.component'; 4 | import { Routes, RouterModule } from '@angular/router'; 5 | 6 | const routes: Routes = [ 7 | { path: '', component: TreeComponent} 8 | ]; 9 | 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | RouterModule.forChild(routes) 14 | ], 15 | declarations: [TreeComponent] 16 | }) 17 | export class FractalModule { } 18 | -------------------------------------------------------------------------------- /src/app/guards/confimar.guard.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async, inject } from '@angular/core/testing'; 2 | 3 | import { ConfimarGuard } from './confimar.guard'; 4 | 5 | describe('ConfimarGuard', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [ConfimarGuard] 9 | }); 10 | }); 11 | 12 | it('should ...', inject([ConfimarGuard], (guard: ConfimarGuard) => { 13 | expect(guard).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /src/app/guards/prueba.guard.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async, inject } from '@angular/core/testing'; 2 | 3 | import { PruebaGuard } from './prueba.guard'; 4 | 5 | describe('PruebaGuard', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [PruebaGuard] 9 | }); 10 | }); 11 | 12 | it('should ...', inject([PruebaGuard], (guard: PruebaGuard) => { 13 | expect(guard).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /src/app/guards/prueba.guard.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 3 | import { Observable } from 'rxjs'; 4 | 5 | @Injectable({ 6 | providedIn: 'root' 7 | }) 8 | export class PruebaGuard implements CanActivate { 9 | 10 | 11 | canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 12 | return true; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/lazy1/lazy1.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/lazy1/lazy1.component.css -------------------------------------------------------------------------------- /src/app/lazy1/lazy1.component.html: -------------------------------------------------------------------------------- 1 |

2 | lazy1 works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/lazy1/lazy1.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-lazy1', 5 | templateUrl: './lazy1.component.html', 6 | styleUrls: ['./lazy1.component.css'] 7 | }) 8 | export class Lazy1Component implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/lazy1/lazy1.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { Lazy1Component } from './lazy1.component'; 4 | import { Routes, RouterModule } from "@angular/router"; 5 | 6 | const routes: Routes = [ 7 | { path: '', component: Lazy1Component} 8 | ]; 9 | 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | RouterModule.forChild(routes) 14 | ], 15 | declarations: [Lazy1Component] 16 | }) 17 | export class Lazy1Module { } 18 | -------------------------------------------------------------------------------- /src/app/lazy2/lazy2.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/lazy2/lazy2.component.css -------------------------------------------------------------------------------- /src/app/lazy2/lazy2.component.html: -------------------------------------------------------------------------------- 1 |

2 | lazy2 works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/lazy2/lazy2.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-lazy2', 5 | templateUrl: './lazy2.component.html', 6 | styleUrls: ['./lazy2.component.css'] 7 | }) 8 | export class Lazy2Component implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/lazy2/lazy2.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { Lazy2Component } from './lazy2.component'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | CommonModule 8 | ], 9 | declarations: [Lazy2Component] 10 | }) 11 | export class Lazy2Module { } 12 | -------------------------------------------------------------------------------- /src/app/lazy3/lazy3.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/lazy3/lazy3.component.css -------------------------------------------------------------------------------- /src/app/lazy3/lazy3.component.html: -------------------------------------------------------------------------------- 1 |

2 | lazy3 works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/lazy3/lazy3.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-lazy3', 5 | templateUrl: './lazy3.component.html', 6 | styleUrls: ['./lazy3.component.css'] 7 | }) 8 | export class Lazy3Component implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/lazy3/lazy3.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { Lazy3Component } from './lazy3.component'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | CommonModule 8 | ], 9 | declarations: [Lazy3Component] 10 | }) 11 | export class Lazy3Module { } 12 | -------------------------------------------------------------------------------- /src/app/lazy4/lazy4.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/lazy4/lazy4.component.css -------------------------------------------------------------------------------- /src/app/lazy4/lazy4.component.html: -------------------------------------------------------------------------------- 1 |

2 | lazy4 works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/lazy4/lazy4.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-lazy4', 5 | templateUrl: './lazy4.component.html', 6 | styleUrls: ['./lazy4.component.css'] 7 | }) 8 | export class Lazy4Component implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/lazy4/lazy4.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { Lazy4Component } from './lazy4.component'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | CommonModule 8 | ], 9 | declarations: [Lazy4Component] 10 | }) 11 | export class Lazy4Module { } 12 | -------------------------------------------------------------------------------- /src/app/lazy5/lazy5.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/lazy5/lazy5.component.css -------------------------------------------------------------------------------- /src/app/lazy5/lazy5.component.html: -------------------------------------------------------------------------------- 1 |

2 | lazy5 works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/lazy5/lazy5.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-lazy5', 5 | templateUrl: './lazy5.component.html', 6 | styleUrls: ['./lazy5.component.css'] 7 | }) 8 | export class Lazy5Component implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/lazy5/lazy5.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { Lazy5Component } from './lazy5.component'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | CommonModule 8 | ], 9 | declarations: [Lazy5Component] 10 | }) 11 | export class Lazy5Module { } 12 | -------------------------------------------------------------------------------- /src/app/model/ReqresUser.ts: -------------------------------------------------------------------------------- 1 | export class User { 2 | 3 | constructor( 4 | public id: number, 5 | public first_name?: string, 6 | public last_name?: string, 7 | public avatar?: string 8 | ) { } 9 | } 10 | -------------------------------------------------------------------------------- /src/app/model/TypicodeUser.ts: -------------------------------------------------------------------------------- 1 | import { Company } from './company'; 2 | import { Address } from "./address"; 3 | 4 | export class User { 5 | constructor( 6 | public id?: number, 7 | public name?: string, 8 | public username?: string, 9 | public email?: string, 10 | public address?: Address, 11 | public phone?: string, 12 | public website?: string, 13 | public company?: Company 14 | ){} 15 | } 16 | -------------------------------------------------------------------------------- /src/app/model/address.ts: -------------------------------------------------------------------------------- 1 | import { Geo } from "./geo"; 2 | 3 | export class Address { 4 | constructor( 5 | public street?: string, 6 | public suite?: string, 7 | public city?: string, 8 | public zipcode?: string, 9 | public geo?: Geo 10 | ) {} 11 | } 12 | -------------------------------------------------------------------------------- /src/app/model/autor.ts: -------------------------------------------------------------------------------- 1 | export interface Autor { 2 | nombre: string; 3 | apellido: string; 4 | edad: number; 5 | } 6 | -------------------------------------------------------------------------------- /src/app/model/ciudad.ts: -------------------------------------------------------------------------------- 1 | export interface Ciudad { 2 | nombre: string; 3 | pais: string; 4 | codigo: string; 5 | } 6 | -------------------------------------------------------------------------------- /src/app/model/company.ts: -------------------------------------------------------------------------------- 1 | export class Company { 2 | constructor( 3 | public name?: string, 4 | public catchPhrase?: string, 5 | public bs?: string 6 | ) {} 7 | } 8 | -------------------------------------------------------------------------------- /src/app/model/crono.ts: -------------------------------------------------------------------------------- 1 | export interface Crono { 2 | 3 | horas: number, 4 | minutos: number, 5 | segundos: number, 6 | tiempototal: number, //Tiempo total en milisegundos. A partir de este se calculan las horas, minutos y segundos 7 | } 8 | -------------------------------------------------------------------------------- /src/app/model/equipo.ts: -------------------------------------------------------------------------------- 1 | export class Equipo { 2 | 3 | constructor(public id: number, public nombre: string, public tecnico?: string){} 4 | } 5 | -------------------------------------------------------------------------------- /src/app/model/geo.ts: -------------------------------------------------------------------------------- 1 | export class Geo { 2 | constructor(public lat: string, public lng: string) {} 3 | } 4 | -------------------------------------------------------------------------------- /src/app/model/hero.ts: -------------------------------------------------------------------------------- 1 | export class Hero { 2 | 3 | constructor( 4 | public id: number, 5 | public name: string, 6 | public power?: string, 7 | public alterEgo?: string, 8 | public isSecret?: boolean, 9 | public emotion?: 'happy'|'sad'|'confused'|'', 10 | public phone?: string, 11 | public email?: string 12 | ) { } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/model/user.ts: -------------------------------------------------------------------------------- 1 | export class User { 2 | 3 | constructor( 4 | public id: number, 5 | public name: string, 6 | public first_name?: string, 7 | public last_name?: string, 8 | public avatar?: string, 9 | public age?: number 10 | ) { } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/pipes/exponente.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { ExponentePipe } from './exponente.pipe'; 2 | 3 | describe('ExponentePipe', () => { 4 | 5 | let pipe: ExponentePipe; 6 | 7 | beforeEach(() => { 8 | pipe = new ExponentePipe(); 9 | }); 10 | 11 | it('create an instance', () => { 12 | expect(pipe).toBeTruthy(); 13 | }); 14 | 15 | it('Al aplicarla a X devuelve Y', () => { 16 | expect(pipe.transform(3,2)).toBe(9); 17 | expect(pipe.transform(1,7)).toBe(1); 18 | expect(pipe.transform(6,0)).toBe(1); 19 | }); 20 | 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/pipes/exponente.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'exp' 5 | }) 6 | export class ExponentePipe implements PipeTransform { 7 | 8 | transform(valor: number, exponente:number): number { 9 | console.log('método trasnform de la pipe exp'); 10 | return Math.pow(valor,exponente); 11 | } 12 | 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pipes/filter-age.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { FilterAgePipe } from './filter-age.pipe'; 2 | 3 | xdescribe('FilterAgePipe', () => { 4 | it('create an instance', () => { 5 | const pipe = new FilterAgePipe(); 6 | expect(pipe).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /src/app/pipes/filter-age.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { User } from '../model/user'; 3 | 4 | @Pipe({ 5 | name: 'filterAge' 6 | }) 7 | export class FilterAgePipe implements PipeTransform { 8 | 9 | transform(value: User[], minage: number): User[] { 10 | console.log('método trasnform de la pipe filterAge'); 11 | return value.filter( u => u.age! >= minage); 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /src/app/pipes/to-slug.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { ToSlugPipe } from './to-slug.pipe'; 2 | 3 | describe('ToSlugPipe', () => { 4 | it('create an instance', () => { 5 | const pipe = new ToSlugPipe(); 6 | expect(pipe).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /src/app/pipes/truncate.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { TruncatePipe } from './truncate.pipe'; 2 | 3 | describe('TruncatePipe', () => { 4 | it('create an instance', () => { 5 | const pipe = new TruncatePipe(); 6 | expect(pipe).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /src/app/pipes/truncate.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'truncate' 5 | }) 6 | export class TruncatePipe implements PipeTransform { 7 | 8 | transform(value: string, max: number, append = '...'): string { 9 | return value && value.length > max ? `${value.slice(0, max)}${append}` : value; 10 | } 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/redux-effects/components/redux-heroes-add-presenter/redux-heroes-add-presenter.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/redux-effects/components/redux-heroes-add-presenter/redux-heroes-add-presenter.component.css -------------------------------------------------------------------------------- /src/app/redux-effects/components/redux-heroes-add-presenter/redux-heroes-add-presenter.component.html: -------------------------------------------------------------------------------- 1 |

Add Hero to the list

2 |
3 |
4 | 5 | 6 |
7 | 8 |
-------------------------------------------------------------------------------- /src/app/redux-effects/components/redux-heroes-container/redux-heroes-container.component.css: -------------------------------------------------------------------------------- 1 | .selected { 2 | background-color: #CFD8DC !important; 3 | color: white; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/redux-effects/components/redux-heroes-edit-presenter/redux-heroes-edit-presenter.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/redux-effects/components/redux-heroes-edit-presenter/redux-heroes-edit-presenter.component.css -------------------------------------------------------------------------------- /src/app/redux-effects/components/redux-heroes-edit-presenter/redux-heroes-edit-presenter.component.html: -------------------------------------------------------------------------------- 1 |

Detail of {{hero.name}}

2 |
{{hero.id}}
3 |
4 | 5 | 6 |
7 | -------------------------------------------------------------------------------- /src/app/redux-effects/components/redux-heroes-list-presenter/redux-heroes-list-presenter.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/redux-effects/components/redux-heroes-list-presenter/redux-heroes-list-presenter.component.css -------------------------------------------------------------------------------- /src/app/redux-effects/components/redux-heroes-list-presenter/redux-heroes-list-presenter.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Heroes list

3 | 4 | 5 | 6 | 7 | 8 | 9 |
{{hero.id}}{{hero.name}}
10 |
-------------------------------------------------------------------------------- /src/app/redux-effects/reducers/hero.store.ts: -------------------------------------------------------------------------------- 1 | import { Hero } from "src/app/model/Hero"; 2 | 3 | export interface HeroState { 4 | items: Hero[], 5 | lastId: number 6 | } 7 | 8 | -------------------------------------------------------------------------------- /src/app/redux-ng-rx/components/redux-heroes-add-presenter/redux-heroes-add-presenter.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/redux-ng-rx/components/redux-heroes-add-presenter/redux-heroes-add-presenter.component.css -------------------------------------------------------------------------------- /src/app/redux-ng-rx/components/redux-heroes-add-presenter/redux-heroes-add-presenter.component.html: -------------------------------------------------------------------------------- 1 |

Add Hero to the list

2 |
3 |
4 | 5 | 6 |
7 | 8 |
-------------------------------------------------------------------------------- /src/app/redux-ng-rx/components/redux-heroes-container/redux-heroes-container.component.css: -------------------------------------------------------------------------------- 1 | .selected { 2 | background-color: #CFD8DC !important; 3 | color: white; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/redux-ng-rx/components/redux-heroes-edit-presenter/redux-heroes-edit-presenter.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/redux-ng-rx/components/redux-heroes-edit-presenter/redux-heroes-edit-presenter.component.css -------------------------------------------------------------------------------- /src/app/redux-ng-rx/components/redux-heroes-edit-presenter/redux-heroes-edit-presenter.component.html: -------------------------------------------------------------------------------- 1 |

Detail of {{hero.name}}

2 |
{{hero.id}}
3 |
4 | 5 | 6 |
7 | -------------------------------------------------------------------------------- /src/app/redux-ng-rx/components/redux-heroes-list-presenter/redux-heroes-list-presenter.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/redux-ng-rx/components/redux-heroes-list-presenter/redux-heroes-list-presenter.component.css -------------------------------------------------------------------------------- /src/app/redux-ng-rx/components/redux-heroes-list-presenter/redux-heroes-list-presenter.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Heroes list

3 | 4 | 5 | 6 | 7 | 8 | 9 |
{{hero.id}}{{hero.name}}
10 |
-------------------------------------------------------------------------------- /src/app/redux-ng-rx/reducers/hero.store.ts: -------------------------------------------------------------------------------- 1 | import { Hero } from "src/app/model/Hero"; 2 | 3 | export interface HeroState { 4 | items: Hero[], 5 | lastId: number 6 | } 7 | 8 | -------------------------------------------------------------------------------- /src/app/redux-ng-rx/redux-ng-rx.module.spec.ts: -------------------------------------------------------------------------------- 1 | import { ReduxNgRxModule } from './redux-ng-rx.module'; 2 | 3 | describe('ReduxNgRxModule', () => { 4 | let reduxNgRxModule: ReduxNgRxModule; 5 | 6 | beforeEach(() => { 7 | reduxNgRxModule = new ReduxNgRxModule(); 8 | }); 9 | 10 | it('should create an instance', () => { 11 | expect(reduxNgRxModule).toBeTruthy(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/app/redux/components/redux-heroes-add-presenter/redux-heroes-add-presenter.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/redux/components/redux-heroes-add-presenter/redux-heroes-add-presenter.component.css -------------------------------------------------------------------------------- /src/app/redux/components/redux-heroes-add-presenter/redux-heroes-add-presenter.component.html: -------------------------------------------------------------------------------- 1 |

Add Hero to the list

2 |
3 |
4 | 5 | 6 |
7 | 8 |
-------------------------------------------------------------------------------- /src/app/redux/components/redux-heroes-container/redux-heroes-container.component.css: -------------------------------------------------------------------------------- 1 | .selected { 2 | background-color: #CFD8DC !important; 3 | color: white; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/redux/components/redux-heroes-edit-presenter/redux-heroes-edit-presenter.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/redux/components/redux-heroes-edit-presenter/redux-heroes-edit-presenter.component.css -------------------------------------------------------------------------------- /src/app/redux/components/redux-heroes-edit-presenter/redux-heroes-edit-presenter.component.html: -------------------------------------------------------------------------------- 1 |

Detail of {{hero.name}}

2 |
{{hero.id}}
3 |
4 | 5 | 6 |
7 | -------------------------------------------------------------------------------- /src/app/redux/components/redux-heroes-list-presenter/redux-heroes-list-presenter.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/redux/components/redux-heroes-list-presenter/redux-heroes-list-presenter.component.css -------------------------------------------------------------------------------- /src/app/redux/components/redux-heroes-list-presenter/redux-heroes-list-presenter.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Heroes list

3 | 4 | 5 | 6 | 7 | 8 | 9 |
{{hero.id}}{{hero.name}}
10 |
-------------------------------------------------------------------------------- /src/app/redux/reducers/hero.store.ts: -------------------------------------------------------------------------------- 1 | import { Hero } from "src/app/model/Hero"; 2 | 3 | export interface HeroState { 4 | items: Hero[], 5 | lastId: number 6 | } 7 | 8 | -------------------------------------------------------------------------------- /src/app/redux/redux.module.spec.ts: -------------------------------------------------------------------------------- 1 | import { ReduxModule } from './redux.module'; 2 | 3 | describe('ReduxModule', () => { 4 | let reduxModule: ReduxModule; 5 | 6 | beforeEach(() => { 7 | reduxModule = new ReduxModule(); 8 | }); 9 | 10 | it('should create an instance', () => { 11 | expect(reduxModule).toBeTruthy(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/app/services/mock-heroe.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { MockHeroeService } from './mock-heroe.service'; 4 | 5 | describe('MockHeroeService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [MockHeroeService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([MockHeroeService], (service: MockHeroeService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /src/app/services/mock-heroe.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HEROES } from '../data/mock-heroes'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class MockHeroeService { 8 | 9 | constructor() { } 10 | 11 | get() { 12 | return HEROES; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/utils/calculadora/calculadora.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/app/utils/calculadora/calculadora.component.css -------------------------------------------------------------------------------- /src/app/utils/calculadora/calculadora.component.html: -------------------------------------------------------------------------------- 1 |

2 | calculadora works! 3 | 4 |

5 | -------------------------------------------------------------------------------- /src/app/utils/calculadora/calculadora.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'exce-calculadora', 5 | templateUrl: './calculadora.component.html', 6 | styleUrls: ['./calculadora.component.css'] 7 | }) 8 | export class CalculadoraComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/utils/utils.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { CalculadoraComponent } from './calculadora/calculadora.component'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | CommonModule 8 | ], 9 | declarations: [ 10 | CalculadoraComponent 11 | ], 12 | exports: [ 13 | CalculadoraComponent 14 | ] 15 | }) 16 | export class UtilsModule { } 17 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/img/chrono.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/assets/img/chrono.png -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | api_url: 'https://reqres.in/api/' 4 | }; 5 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carherco/curso-angular/41b1e263d658edc08413a00060a39c1a947b574e/src/favicon.ico -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | /* Material themes: deeppurple-amber.css, indigo-pink.css, pink-bluegrey.css, purple-green.css */ 3 | 4 | html, body { height: 100%; } 5 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } 6 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "esnext", 6 | "baseUrl": "", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "baseUrl": "", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | }, 13 | "files": [ 14 | "test.ts", 15 | "polyfills.ts" 16 | ], 17 | "include": [ 18 | "**/*.spec.ts", 19 | "**/*.d.ts" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 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 | --------------------------------------------------------------------------------