Angular

Descargar como txt, pdf o txt
Descargar como txt, pdf o txt
Está en la página 1de 7

BUILD para produccion:

ng build --configuration production

CARPETAS

La carpeta shared es usada para tener componentes reutilizables como el footer, el


navbar, sidebar

SKIP TEST y estilo en linea (o sea que no genere el componente CSS)

ng g c shared/sidebar --skip-tests -s

RUTAS:
[routerLinkActiveOptions]="{exact:true}" >>>>> Este atributo se configura SOLAMENTE
en el principal o ruta vacía (routerLink="") para que SOLAMENTE se agregue la clase
active si la ruta es EXACTAMENTE igual a vacia. Si no agrego esta opcion quedaria
SIEMPRE marcada la casilla

OBSERVABLE
Para que se ejecute un observable tiene que tener como mínimo un suscribe, sino no
se ejecuta.

@Input()

Este decorador sirve para pasar parametros de un componente padre a un componente


hijo. Por ejemplo tengo personajes en el componente padre (un array de personajes)
y en el tag del componente padre se tiene que pasar la info asi:

ts del hijo:
@Input('data') personajesHijo: Personaje[] = []

html padre:
<app-personajes [data]="personajes"></app-personajes>
En el [data] se guarda el array personajes, los [] quiere decir que se está pasando
informacion a otro lado, al hijo. El ="personajes" es el parámetro declarado en el
padre que voy a pasar

Si externamente no quiero que tenga el nombre de data, sino que quiero usar la
misma palabra personajes entonces el input se usa asi:
@Input() personajes: Personaje[] = []

y en el padre asi:
<app-personajes [personajes]="personajes"></app-personajes>

ACTUALIZAR ANGULAR
-------------------

Si se actualiza Angular Global (pasos):


npm uninstall -g angular-cli
npm install -g @angular/cli@latest

va a quedar instalado de forma global a la ultima version pero si necesito usar en


mi proyecto actual (local) la ultima version voy a ver que quedo la anterior. Para
eso me posiciono en la carpeta de mi proyecto y ejecuto la siguiente linea:
npm i --save--dev @angular/cli@latest

ANGULAR 2023 - Anotaciones:

@input:
--------

El @INPUT() se usa en el componente HIJO para recibir la data del PADRE. Para
ejemplificar el ejercicio es el 02-base en el componente main-page.component.ts.
Como este es el PADRE vamos a ir al main-page.component.html y en el TAG de dbz-
list se le agrega un corchete con la propiedad DEL HIJO (characterList) y se iguala
al valor del PADRE (characters).

esto esta en main-page.component.html


<dbz-list [characterList]="characters"></dbz-list>

characterList: Propiedad del hijo que recibe el dato


characters: propiedad del padre que se va a pasar. Tiene que estar escrito TAL CUAL
esta en el padre

characterList esta en main-page.component.ts y se manda al hijo list.component.ts


quien lo recibe desde @input()

ngClass:
--------

El ngClass sirve para poner condicionales en el HTML y dependiendo la condicion se


aplique o no un estilo. Se escribe de la siguiente forma:

[ngClass]="{'list-group-item-dark': isLast, 'list-group-item-primary': isEven}"

donde se aplica al <ul> donde esta la clase list-group-item-dark si el valor es el


ultimo (isLast) y la clase list-group-item-primary si el elemento es PAR (isEven).
Estos datos son tomados de la sentencia ngFor que esta arriba.
Ejemplo tomado del ejercicio 02-bases del archivo list.component.html

Corchetes:
[]
cualquier TAG de html que tenga corchetes quiere decir que Angular toma el control
y se iguala a una expresion de JS, de esa forma se le asigna al tag o elemento HTML
el atributo de JS al que se iguala. Ejemplo:
[class] = "'list-group-item-dark'"

Caja de bananas o two way data binding (ngModel):


-------------------------------------------------
Estamos asociando al mismo tiempo un evento y atributo a un elemento.
con parentesis () asociamos eventos, con [] asociamos atributos y con [()]
asociamos ambos.

Se usa asi:
[(ngModel)]="binding"

Se debe agregar para que funcione el modulo FormsModule desde @angular/forms:


import { FormsModule } from '@angular/forms';

Si es en un formulario se debe agregar el atributo name con el nombre de la


propiedad del objeto en el archivo .ts
El ejemplo se puede ver en el archivo de la clase 02-base character.component.html
y character.component.ts

ngSubmit:
---------

Dispara metodos en formularios al presionar el boton con el atributo submit o


apretar ENTER.

@Output():
----------

El output emite valores para que se reciban desde otro componente. En el ejemplo de
02-bases character.component.ts necesito mandar el valor que se ingresa por
formulario (que se guarda momentaneamente en character al actualizarse por medio de
la caja banana o ngModel) al componente main-page.component.ts donde esta el objeto
characters con todos los valores para poder armar el listado en list.component.html

Lo que hace es crear un observable que otro componente puede suscribir para
escuchar cambios. Esto se logra con el EventEmitter que junto al Output se debe
importar del @angular/core.
La forma de usarlo es por ejemplo:

@Output()
public onNewCharacter: EventEmitter<Character> = new EventEmitter();

Si se deja asi la variable que emite es onNewCharacter. Si se desea cambiar el


nombre de la variable (visible al componente que lo requiere) se debe especificar
el nombre entre los parentesis del Output, esto es opcional y quedaria:

@Output(eventoEmitido)
public onNewCharacter: EventEmitter<Character> = new EventEmitter();

Entonces el componente que lo requiere va a escuchar a eventoEmitido

USANDO OUTPUT. Este es el componente que RECIBE el evento (main-


page.component.html), el que lo escucha y toma. Para esto vamos a tener que
escuchar el evento con (), entonces escuchamos al evento creado con OUTPUT en el
componente character.component.ts que se llama onNewCharacter y cuando emita vamos
a disparar el metodo oneNewCharacterRecibido y le va a pasar el evento entre
paréntesis () que se especifica SIEMPRE como $event. El método
oneNewCharacterRecibido dentro de main-page.component.ts lo recibe y trabaja

El lugar a donde se usa es el el TAG del componente que EMITE el valor:

<dbz-add-character (onNewCharacter)="oneNewCharacterRecibido($event)"></dbz-add-
character>

Pasos OUTPUT tarea:


1- crear evento con output en quien EMITE el evento (list.component.ts)
@Output()
public onDeleteId: EventEmitter<number> = new EventEmitter();

2- crear funcion en list.component.ts que sirva para EMITIR el valor al tocarse el


boton:
onDeleteCharacter(index:number):void{

this.onDeleteId.emit(index)
}

El boton en el list.component.html queda asi


<button class="btn btn-danger" (click)="onDeleteCharacter(i)">X</button>

3- En el componente QUE RECIBE el EVENT main-page.component.ts crear la funcion que


va a hacer la accion que quiero con ese evento recibido (el elemento recibido es
ese indice que necesito para hacer el splice sobre la lista):
onDeleteCharacter(index:number){
this.characters.splice(index, 1);
}

4- Configurar en el main-page.component.html la conexion entre el método del main-


page que RECIBE y el método de list que EMITE. Esto se hace sobre el TAG del
elemento que EMITE
(<dbz-list (onDeleteId)="onDeleteCharacter($event)"></dbz-list>):

GENERAR BUILD A PRODUCCION:


--------------------------

Para generar el build a produccion desde consola ejecutamos (en la carpeta del
proyecto):

ng build

Luego instalar para probar localmente el http-server:


npm install --global http-server

Despues ejecutar (estando parado en la carpeta del build):


http-server -o

GitHub Pages:
-------------

Los pasos aca son copiar el archivo generado por ng build (que esta en
carpetaProyecto/dist/bases y copiar bases a la carpetaProyecto. Una vez ahi cambiar
el nombre de build por docs y subirlo a git con push. Luego en Git ir a Setings
(estando en la carpeta del proyecto) y click en la parte izquierda que dice Pages.
Una vez ahi buscar BRANCH y desplegar el menu que dice NONE para elegir MASTER,
luego DOCS en la de al lado. Despues click en SAVE. Esto va a empezar a generar el
build para ver el sitio desde una URL que nos da al finalizar pero NO VA A
FUNCIONAR porque la ruta relativa esta mal.
Para solucionar esto tenemos que ir a VS Code, en la carpeta DOCS vamos a
index.html y tenemos este TAG:
<base href="/">

Tenemos que cambiarlo asi:


<base href="./">

Volvemos a ejecutar
git add.
git commit -m "comentario que quiera"
git push -u origin master

Ahora git va a detectar cambios, vuelve a generar el build y ya va a funcionar.

Forma de automatizar el <base href="/">:


----------------------------------------
Se puede automatizar agregando la siguiente linea en el archivo package.json

"build:href": "ng build --base-href ./",

Despues ejecutar npm run build:href


Esto genera la carpeta dist de nuevo con el href necesario para git pero para crear
de forma automatizada tambien la carpeta docs:

npm i del-cli --save-dev

Luego agrego en package.json esta linea:


"delete:docs": "del docs"

y ejecuto npm run delete:docs


De esa forma borra dicha carpeta

Luego instalo npm i copyfiles

agregar esta linea: "copy:dist": "copyfiles dist/bases/* ./docs -f"

luego ejecutamos npm run copy:dist

Finalmente para no hacer paso por paso puedo crear un nuevo script combinando todo:

"build:github": "npm run dele:docs && npm run build:href && npm run copy:dist",

al ejecutar npm run build:github ya crea todo.

Parte de archivo de package.json

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:href": "ng build --base-href ./",
"build:github": "npm run delete:docs && npm run build:href && npm run
copy:dist",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"delete:docs": "del docs",
"copy:dist": "copyfiles dist/bases/* ./docs -f"
},

@ViewChild:
-----------

<input type="text" class="form-control" placeholder="Buscar gifs..."


(keyup.enter)="searchTag()" #txtTagInput>

En este ejemplo el #txtTagInput es una referencia local de ese input en particular


haciendo referencia SOLO a ese input para no confundir con otro.

El ViewChild pide un selector (nombre del elemento que quiero tomar) haciendo
referencia al #txtTagInput sin el # para extraer el dato que necesito.

Ejemplo:
@ViewChild('txtTagInput')
public tagInput!: ElementRef<HTMLInputElement>;

Aca declaro el @ViewChild encima de la propiedad tagInput y le paso el selector del


cual quiero tomar los datos.
A la propiedad le tengo que declarar el tipo ElementRef con el tipo
HTMLInputElement que es el dato que voy a capturar (el caracter ! es el
nonulloperator para decirle que siempre va a tener un valor.

searchTag(){
const newTag = this.tagInput.nativeElement.value;
console.log({newTag});
}

Para hacer lo mismo SIN USAR VIEWCHILD seria asi

<input type="text" class="form-control" placeholder="Buscar gifs..."


(keyup.enter)="searchTag(txtTagInput.value)"

searchTag(newTag:string){
console.log({newTag});
}

El ViewChild nos sirve para poder tomar 1 REFERENCIA LOCAL mientras que el
ViewChildren toma TODOS los input, regresa un arreglo de todos los elementos que se
toma, el ViewChild SOLO UNO.

(ESTO ESTA EN SEARCH-BOX-COMPONENT.TS EN 03-gifs-app


RUTAS:
Se define el app-routing.module.ts en el directorio principal de nuestra aplicacion
(dentro de la carpeta app). La estructura es la siguiente:

import { NgModule } from '@angular/core';


import { RouterModule, Routes } from '@angular/router';
import { HomePageComponent } from './shared/pages/home-page/home-page.component';
import { AboutPageComponent } from './shared/pages/about-page/about-
page.component';

const routes: Routes = [


{
path: 'home',
component: HomePageComponent
},
{
path: 'about',
component: AboutPageComponent
},
{
path: '**',
redirectTo: 'home'
}
];

@NgModule({
imports: [
RouterModule.forRoot()
]
})
export class AppRoutingModule { }

Es un módulo convencional pero tiene ciertas características

Generar un modulo con una ruta:


ng g m <nombre_modulo> --routing

También podría gustarte