Angular
Angular
Angular
CARPETAS
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()
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
-------------------
@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).
ngClass:
--------
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'"
Se usa asi:
[(ngModel)]="binding"
ngSubmit:
---------
@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();
@Output(eventoEmitido)
public onNewCharacter: EventEmitter<Character> = new EventEmitter();
<dbz-add-character (onNewCharacter)="oneNewCharacterRecibido($event)"></dbz-add-
character>
this.onDeleteId.emit(index)
}
Para generar el build a produccion desde consola ejecutamos (en la carpeta del
proyecto):
ng build
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="/">
Volvemos a ejecutar
git add.
git commit -m "comentario que quiera"
git push -u origin master
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",
"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:
-----------
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>;
searchTag(){
const newTag = this.tagInput.nativeElement.value;
console.log({newTag});
}
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.
@NgModule({
imports: [
RouterModule.forRoot()
]
})
export class AppRoutingModule { }