Skip to content

Commit f8e63ec

Browse files
carhercocarherco
committed
tema de @input y @Ouptut cambiado de sitio y renombrado de las carpetas acorde al cambio
1 parent b247003 commit f8e63ec

File tree

493 files changed

+574
-249274
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

493 files changed

+574
-249274
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
11
.DS_Store
2+
3+
.vscode/
4+
.idea/
5+
.angulardoc.json

‎04-frameworks/02-angular/01-list-users/.browserslistrc renamed to ‎04-frameworks/02-angular/01-components/.browserslistrc

File renamed without changes.

‎04-frameworks/02-angular/01-list-users/.gitignore renamed to ‎04-frameworks/02-angular/01-components/.gitignore

File renamed without changes.

‎04-frameworks/02-angular/01-list-users/README.md renamed to ‎04-frameworks/02-angular/01-components/README.md

File renamed without changes.

‎04-frameworks/02-angular/01-components/angular.json

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"lemoncode-master-angular": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/lemoncode-master-angular",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": "src/polyfills.ts",
20+
"tsConfig": "tsconfig.app.json",
21+
"assets": [
22+
"src/favicon.ico",
23+
"src/assets"
24+
],
25+
"styles": [
26+
"src/styles.css"
27+
],
28+
"scripts": [],
29+
"vendorChunk": true,
30+
"extractLicenses": false,
31+
"buildOptimizer": false,
32+
"sourceMap": true,
33+
"optimization": false,
34+
"namedChunks": true
35+
},
36+
"configurations": {
37+
"production": {
38+
"fileReplacements": [
39+
{
40+
"replace": "src/environments/environment.ts",
41+
"with": "src/environments/environment.prod.ts"
42+
}
43+
],
44+
"optimization": true,
45+
"outputHashing": "all",
46+
"sourceMap": false,
47+
"namedChunks": false,
48+
"extractLicenses": true,
49+
"vendorChunk": false,
50+
"buildOptimizer": true,
51+
"budgets": [
52+
{
53+
"type": "initial",
54+
"maximumWarning": "2mb",
55+
"maximumError": "5mb"
56+
},
57+
{
58+
"type": "anyComponentStyle",
59+
"maximumWarning": "6kb",
60+
"maximumError": "10kb"
61+
}
62+
]
63+
}
64+
},
65+
"defaultConfiguration": ""
66+
},
67+
"serve": {
68+
"builder": "@angular-devkit/build-angular:dev-server",
69+
"options": {
70+
"browserTarget": "lemoncode-master-angular:build"
71+
},
72+
"configurations": {
73+
"production": {
74+
"browserTarget": "lemoncode-master-angular:build:production"
75+
}
76+
}
77+
},
78+
"extract-i18n": {
79+
"builder": "@angular-devkit/build-angular:extract-i18n",
80+
"options": {
81+
"browserTarget": "lemoncode-master-angular:build"
82+
}
83+
},
84+
"test": {
85+
"builder": "@angular-devkit/build-angular:karma",
86+
"options": {
87+
"main": "src/test.ts",
88+
"polyfills": "src/polyfills.ts",
89+
"tsConfig": "tsconfig.spec.json",
90+
"karmaConfig": "karma.conf.js",
91+
"assets": [
92+
"src/favicon.ico",
93+
"src/assets"
94+
],
95+
"styles": [
96+
"src/styles.css"
97+
],
98+
"scripts": []
99+
}
100+
},
101+
"e2e": {
102+
"builder": "@angular-devkit/build-angular:protractor",
103+
"options": {
104+
"protractorConfig": "e2e/protractor.conf.js",
105+
"devServerTarget": "lemoncode-master-angular:serve"
106+
},
107+
"configurations": {
108+
"production": {
109+
"devServerTarget": "lemoncode-master-angular:serve:production"
110+
}
111+
}
112+
}
113+
}
114+
}
115+
}
116+
}

‎04-frameworks/02-angular/01-list-users/e2e/protractor.conf.js renamed to ‎04-frameworks/02-angular/01-components/e2e/protractor.conf.js

File renamed without changes.

‎04-frameworks/02-angular/01-list-users/e2e/src/app.e2e-spec.ts renamed to ‎04-frameworks/02-angular/01-components/e2e/src/app.e2e-spec.ts

File renamed without changes.

‎04-frameworks/02-angular/01-list-users/e2e/src/app.po.ts renamed to ‎04-frameworks/02-angular/01-components/e2e/src/app.po.ts

File renamed without changes.

‎04-frameworks/02-angular/01-components/e2e/tsconfig.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"extends": "../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "../out-tsc/e2e",
5+
"module": "commonjs",
6+
"target": "es2018",
7+
"types": [
8+
"jasmine",
9+
"jasminewd2",
10+
"node"
11+
]
12+
}
13+
}

‎04-frameworks/02-angular/01-list-users/karma.conf.js renamed to ‎04-frameworks/02-angular/01-components/karma.conf.js

File renamed without changes.

‎04-frameworks/02-angular/01-components/readme_es.md

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
# 01 Creación de componentes
2+
3+
Todo framework de front debe permitir la creación de componentes personalizados y reutilizables.
4+
5+
En esta sección vamos a ver cómo implementa angular los componentes web con el mismo ejemplo que vimos en la session de WebComponents siguiendo la misma ruta de crear el componente, crear atributos custom, crear eventos custom y encapsular los estilos.
6+
7+
## Resumen
8+
9+
Este ejemplo toma como punto de partida el código base y crearemos el mismo componente creado en la sesión de WebComponents.
10+
11+
Qué vamos a aprender en este ejemplo:
12+
13+
- Crear un componente
14+
- Crear atributos custom al componente con el decorador @Input
15+
- Crear eventos custom con el decorador @Output
16+
- Encapsulación de estilos
17+
18+
Pasos:
19+
20+
## Paso a Paso
21+
22+
- Primero copiamos el código base, y hacemos un _npm install_
23+
24+
```bash
25+
npm install
26+
```
27+
28+
- Encendemos la aplicación:
29+
30+
```bash
31+
ng serve
32+
```
33+
34+
- Creamos un componente _search_ dentro de un directorio todavía inexistente llamado _utils_
35+
36+
```bash
37+
ng g c utils/search
38+
```
39+
40+
- Incluimos el componente en la página de nuestra aplicación
41+
42+
Abrimos el fichero .ts del componente recién creado (_src/app/utils/search.component.ts_) y nos fijamos en cuál es su selector. (_app-search_).
43+
44+
Abrimos el fichero app.component.html y ponemos el tag donde queramos que aparezca nuestro componente.
45+
46+
_src/app/app.component.html_
47+
48+
```diff
49+
<h1>Hola Mundo</h1>
50+
51+
<app-menu></app-menu>
52+
53+
+ <app-search></app-search>
54+
```
55+
56+
En la pantalla se verá el contenido por defecto del componente Search:
57+
58+
> app search works!
59+
60+
Colocamos el html del componente en el fichero _search.component.html_ y el css del componente en el fichero _search.component.scss_
61+
62+
¡Y listo!. El componente debería verse en la pantalla.
63+
64+
### Creación de atributos custom
65+
66+
- Usamos el decorador @Input para crear tantos atributos custom como queramos
67+
68+
```ts
69+
import { Component, OnInit, Input } from '@angular/core';
70+
71+
@Component({
72+
selector: 'app-search',
73+
templateUrl: './search.component.html',
74+
styleUrls: ['./search.component.scss']
75+
})
76+
export class SearchComponent implements OnInit {
77+
78+
@Input() ph = 'Buscar...';
79+
@Input() label = 'Buscar: ';
80+
// ...
81+
```
82+
83+
Los bindeamos en el html del componente
84+
85+
```html
86+
<p>{{ label }}</p>
87+
88+
<div class="container">
89+
<input type="text" [placeholder]="ph" [value]="name" class="field" />
90+
<div class="icons-container">
91+
<div class="icon-search"></div>
92+
</div>
93+
</div>
94+
```
95+
96+
Y listo, ya podemos utilizar los atributos
97+
98+
```html
99+
<h1>Hola Mundo</h1>
100+
101+
<app-menu></app-menu>
102+
103+
<app-search ph="Search..." [label]="labelText"</app-search>
104+
```
105+
106+
### Creación de eventos custom
107+
108+
- Usamos el decorador @Output para crear tantos eventos custom como queramos
109+
110+
```ts
111+
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
112+
113+
@Component({
114+
selector: 'app-search',
115+
templateUrl: './search.component.html',
116+
styleUrls: ['./search.component.scss']
117+
})
118+
export class SearchComponent implements OnInit {
119+
120+
@Input() ph = 'Buscar...';
121+
@Input() label = 'Buscar: ';
122+
name = 'Carlos';
123+
124+
@Output() clickEnLupa: EventEmitter<string> = new EventEmitter();
125+
@Output() otroEvento = new EventEmitter();
126+
```
127+
128+
El decorador @Output provoca que la etiqueta app-search disponga de un evento llamado clickEnLupa y otro evento llamado otroEvento a los que el padre podrá poner listeners.
129+
130+
```html
131+
<h1>Hola Mundo</h1>
132+
133+
<app-menu></app-menu>
134+
135+
<app-search ph="Search..." [label]="labelText" (clickEnLupa)="escribeLog($event)"></app-search>
136+
```
137+
138+
Solamente queda que el componente Search dispare eventos clickEnLupa y otroEvento cuando crea oportuno, mandando en dicho evento información asociada a los mismos.
139+
140+
Por ejemplo, al hacer click en la lupa del componente Search podemos poner un listener en dicho componente:
141+
142+
```html
143+
<p>{{ label }}</p>
144+
145+
<div class="container">
146+
<input type="text" [placeholder]="ph" [value]="name" class="field" />
147+
<div class="icons-container">
148+
<div class="icon-search" (click)="changeName()"></div>
149+
</div>
150+
</div>
151+
```
152+
153+
Y que el listener del componente dispare el evento _clickEnLupa_ mandando como información asociada el value del input.
154+
155+
```ts
156+
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
157+
158+
@Component({
159+
selector: 'app-search',
160+
templateUrl: './search.component.html',
161+
styleUrls: ['./search.component.scss']
162+
})
163+
export class SearchComponent implements OnInit {
164+
// ...
165+
@Output() clickEnLupa: EventEmitter<string> = new EventEmitter();
166+
167+
// ...
168+
169+
changeName() {
170+
this.name = 'Francisco';
171+
this.clickEnLupa.emit(this.name);
172+
}
173+
}
174+
```
175+
176+
### Encapsulación de los estilos
177+
178+
Angular encapsula por defecto los estilos, con lo que no tenemos que preocuparnos de ello. No obstante se pueden configurar 3 formas de encapsulación:
179+
180+
- Encapsulación por defecto (Emulated)
181+
- Encapsulación nativa (ShadowDom)
182+
- Sin encapsulación (None)
183+
184+
https://angular.io/guide/view-encapsulation

0 commit comments

Comments
 (0)