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.
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<string>() // OutputEmitterRef<string>
setNewName(newName: string) {
this.clicked.emit(newName);
}
}
# Ejemplo de "event binding"
<button
(click)="onClicked()"
>
click me
</button>
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:
<div #el></div>
<my-component />
})
export class TestComponent {
// query for a single result by a string predicate
divEl = viewChild<ElementRef>('el') // Signal<ElementRef|undefined>
// query for a single result by a type predicate
cmp = viewChild(MyComponent); // Signal<MyComponent|undefined>
}
# Ejemplo de viewChild
@Component({
template: `
<div #el></div>
<my-component />
`
})
export class TestComponent {
// query for a single result by a string predicate
divEl = viewChild<ElementRef>('el') // Signal<ElementRef|undefined>
// query for a single result by a type predicate
cmp = viewChild(MyComponent); // Signal<MyComponent|undefined>
}
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.
Es el elemento <ng-content> 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: `
<div class="card-shadow">
<ng-content />
</div>
`,
})
export class CustomCard {/* ... */}
# Ejemplo de Content Projection
// Component source
@Component({
selector: 'custom-card',
template: `
<div class="card-shadow">
<ng-content />
</div>
`,
})
export class CustomCard {/* ... */}
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) { /* ... */ }
/* ... */
}