https://github.com/facundo-moran/calculadora-basica
Cálculadora básica
https://github.com/facundo-moran/calculadora-basica
angular web zoneless
Last synced: 4 months ago
JSON representation
Cálculadora básica
- Host: GitHub
- URL: https://github.com/facundo-moran/calculadora-basica
- Owner: facundo-moran
- Created: 2024-09-08T00:34:24.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-16T02:01:47.000Z (about 1 year ago)
- Last Synced: 2025-06-04T17:20:01.529Z (5 months ago)
- Topics: angular, web, zoneless
- Language: TypeScript
- Homepage: https://mrn-calculadora-basica.netlify.app
- Size: 206 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Calculadora Básica
## Durante el desarrollo de esta aplicación utilice los siguientes conceptos
### Signal
---
Como se explica en la documentación oficial una señal es una envoltura para un valor primitivo o complejo que notificará, a los interesados en el valor, cuando el mismo cambie y pueden ser de solo lectura como modificables.
### Output() - outputs de componentes basado en función
---
La funcion output() que nos permite emitir valores hacia componentes padres.
Los contenedores padres pueden obtener los valores emitidos usando la sintaxis "event binding".
```
import {Component, output} from '@angular/core';
@Component({...})
export class MyComp {
clicked = output() // OutputEmitterRef
setNewName(newName: string) {
this.clicked.emit(newName);
}
}
```
```
# Ejemplo de "event binding"
click me
```
### ViewChild - View Queries as signals
---
Como su nombre indica, nos permiten realizar consultas o búsquedas dentro de las vistas (templates html) en busca de un único elemento, cuyo valor será envuelto en una señal o en caso de no encontrarlo undefined.
```
@Component({
template:
})
export class TestComponent {
// query for a single result by a string predicate
divEl = viewChild('el') // Signal
// query for a single result by a type predicate
cmp = viewChild(MyComponent); // Signal
}
```
```
# Ejemplo de viewChild
@Component({
template: `
`
})
export class TestComponent {
// query for a single result by a string predicate
divEl = viewChild('el') // Signal
// query for a single result by a type predicate
cmp = viewChild(MyComponent); // Signal
}
```
### ViewChildren - View Queries as signals
---
Como su nombre indica, nos permiten realizar consultas o búsquedas dentro de las vistas (templates html) en busca de todos los elementos, cuyo valor será envuelto en una señal de solo lectura o en caso de no encontrarlo undefined.
### Ng-content - Content Projection
---
Es el elemento de Angular que nos permite indicar dentro de un componente, el lugar en donde se va a proyectar o renderizar el contenido que especifiquemos.
```
// Component source
@Component({
selector: 'custom-card',
template: `
`,
})
export class CustomCard {/* ... */}
```
```
# Ejemplo de Content Projection
// Component source
@Component({
selector: 'custom-card',
template: `
`,
})
export class CustomCard {/* ... */}
```
### Host - Binding to the host element
---
El elemento host de un componente es el elemento del DOM que hace match con su selector. El contenido del template html del componente siempre se renderiza dentro dentro de su elemento host.
Un componente tiene el poder de enlazar propiedades, atributos y eventos a su elemento host haciendo uso de la propiedad host dentro del decorador @Component.
```
@Component({
...,
host: {
'role': 'slider',
'[attr.aria-valuenow]': 'value',
'[tabIndex]': 'disabled ? -1 : 0',
'(keydown)': 'updateValue($event)',
},
})
export class CustomSlider {
value: number = 0;
disabled: boolean = false;
updateValue(event: KeyboardEvent) { /* ... */ }
/* ... */
}
```
---
### Referencias
- [Función output](https://angular.dev/guide/components/output-fn)
- [Consulta de elementos como señal](https://angular.dev/guide/signals/queries#viewchild)
- [Proyección de contenido](https://angular.dev/guide/components/content-projection)
- [Propiedad host](https://angular.dev/guide/components/host-elements#the-hostbinding-and-hostlistener-decorators)