30 seconds of angular
1.0.0
Colección curada de fragmentos angulares útiles que puede entender en 30 segundos o menos.
Fragmentos para principiantes
Fragmentos intermedios
Fragmentos avanzados
Las enumines son geniales, pero no son visibles en plantillas angulares de forma predeterminada. Con este pequeño truco puedes hacerlos accesibles.
enum Animals {
DOG ,
CAT ,
DOLPHIN
}
@ Component ( {
...
} )
export class AppComponent {
animalsEnum : typeof Animals = Animals ;
}
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: plantillas enums
Consulte la hoja de trucos Angular o (versión alternativa) que contiene mucha información útil condensada en un solo lugar.
También la lista de verificación Angular contiene es una lista curada de errores comunes cometidos al desarrollar aplicaciones angulares.
https://malcoded.com/angular-heatheet/,https://angular.io/guide/cheatsheet ,https://angular.io/guide/styleguide
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: Hoja de trucos de consejos
Depurar el estado del componente en la consola del navegador ejecutando:
ng . probe ( $0 ) . componentInstance
$0- es el nodo DOM actualmente seleccionado en las herramientas Dev ($1para la anterior y así sucesivamente).
Con Ivy Renderer Engine:
ng . getComponent ( $0 ) https://blog.angularIndeptth.com/everything-you-need-to-know-bout-devingging-angular-applications-d308ed8a51b4
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: consejos buenos para saber
Si está utilizando el valor ViewEncapsulation que es diferente al valor predeterminado, podría ser desalentador establecer el valor manualmente para cada componente.
Afortunadamente, puede configurarlo a nivel mundial al arrancar su aplicación:
platformBrowserDynamic ( ) . bootstrapModule ( AppModule , [
{
// NOTE: Use ViewEncapsulation.None only if you know what you're doing.
defaultEncapsulation : ViewEncapsulation . None
}
] ) ;
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: estilo de configuración
Para actuar sobre deslizamientos, sartenes y pinhces, así como los otros gestos móviles, puede usar hammerjs con HostListener Decorator, o una encuadernación de eventos,
npm install hammerjs@ HostListener ( 'swiperight' )
public swiperight ( ) : void {
// Run code when a user swipes to the right
} Aquí hay muestras sobre cómo usar todas las fijaciones de eventos hammerjs , también puede usar estos eventos con una HostListener :
<!-- pan events -->
< div (pan) =" logEvent($event) " > </ div >
< div (panstart) =" logEvent($event) " > </ div >
< div (panmove) =" logEvent($event) " > </ div >
< div (panend) =" logEvent($event) " > </ div >
< div (pancancel) =" logEvent($event) " > </ div >
< div (panleft) =" logEvent($event) " > </ div >
< div (panright) =" logEvent($event) " > </ div >
< div (panup) =" logEvent($event) " > </ div >
< div (pandown) =" logEvent($event) " > </ div >
<!-- pinch events -->
< div (pinch) =" logEvent($event) " > </ div >
< div (pinchstart) =" logEvent($event) " > </ div >
< div (pinchmove) =" logEvent($event) " > </ div >
< div (pinchend) =" logEvent($event) " > </ div >
< div (pinchcancel) =" logEvent($event) " > </ div >
< div (pinchin) =" logEvent($event) " > </ div >
< div (pinchout) =" logEvent($event) " > </ div >
<!-- press events -->
< div (press) =" logEvent($event) " > </ div >
< div (pressup) =" logEvent($event) " > </ div >
<!-- rotate events -->
< div (rotate) =" logEvent($event) " > </ div >
< div (rotatestart) =" logEvent($event) " > </ div >
< div (rotatemove) =" logEvent($event) " > </ div >
< div (rotateend) =" logEvent($event) " > </ div >
< div (rotatecancel) =" logEvent($event) " > </ div >
<!-- swipe events -->
< div (swipe) =" logEvent($event) " > </ div >
< div (swipeleft) =" logEvent($event) " > </ div >
< div (swiperight) =" logEvent($event) " > </ div >
< div (swipeup) =" logEvent($event) " > </ div >
< div (swipedown) =" logEvent($event) " > </ div >
<!-- tap event -->
< div (tap) =" logEvent($event) " > </ div > https://github.com/angular/angular/blob/master/packages/platform-browser/src/dom/events/hammer_gestures.ts,http://hammerjs.github.io/api/#hammer.manager,https://angular.io/api/platform-browser/HammerGestureConfig
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: Gestos de componentes de consejos buenos para saber
Puede crear un componente ayudante y usarlo en lugar de *ngIf .
@ Component ( {
selector : 'loader' ,
template : `
<ng-content *ngIf="!loading else showLoader"></ng-content>
<ng-template #showLoader>? Wait 10 seconds!</ng-template>
`
} )
class LoaderComponent {
@ Input ( ) loading : boolean ;
}Para el ejemplo de uso:
< loader [loading] =" isLoading " > ? ? ? </ loader >Tenga en cuenta que el contenido se evaluará ansiosamente, por ejemplo, en el fragmento a continuación se creará
destroy-the-worldantes de que comience la carga incluso:
< loader [loading] =" isLoading " > < destroy-the-world > </ destroy-the-world > </ loader > https://medium.com/clarityDesignsystem/ng-content-the-hidden-docs-96a29d70d11b,https://blog.angularindepth.com/https-mediium-com-thomasburleson-animated-ghosts-bfc045a51fba
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: Consejos plantillas de componentes buenos para saber
Con ng-content puede pasar cualquier elemento a un componente. Esto simplifica la creación de componentes reutilizables.
@ Component ( {
selector : 'wrapper' ,
template : `
<div class="wrapper">
<ng-content></ng-content>
</div>
` ,
} )
export class Wrapper { } < wrapper >
< h1 > Hello World! </ h1 >
</ wrapper > https://medium.com/p/96a29d70d11b
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: componentes de consejos buenos para saber
*ngIf también admite la instrucción else .
< div *ngIf =" isLoading; else notLoading " > loading... </ div >
< ng-template #notLoading > not loading </ ng-template >
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: plantillas NGIF
Navegue con parámetros de matriz:
El enrutador navegará a /first;name=foo/details
< a [routerLink] =" ['/', 'first', {name: 'foo'}, 'details'] " >
link with params
</ a > https://stackblitz.com/edit/angular-xvy5pd
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: enrutamiento
En ciertos casos, las propiedades @Input y @Output se pueden nombrar de manera diferente a las entradas y salidas reales.
< div
pagination
paginationShowFirst =" true "
(paginationPageChanged) =" onPageChanged($event) " >
</ div > @ Directive ( { selector : '[pagination]' } )
class PaginationComponent {
@ Input ( 'paginationShowFirst' )
showFirst : boolean = true ;
@ Output ( 'paginationPageChanged' )
pageChanged = new EventEmitter ( ) ;
}Nota: Use esto sabiamente, vea StyleGuide Recomedation
https://angular.io/guide/styleguide#style-05-13
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: plantillas de componentes
El operador de navegación seguro ayuda a prevenir las excepciones de referencia nula en las expresiones de plantilla de componentes. Devuelve el valor de la propiedad del objeto si existe o de lo contrario.
< p > I will work even if student is null or undefined: {{student?.name}} </ p >{{a?.b?.c}} Debajo se compilarán.
(_co.a == null)? null: ((_co.a.b == null)? null: _co.a.b.c));Angular/Angular#791
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: Consejos de manejo de propiedades de objetos buenos para saber
Para evitar las operaciones costosas, podemos ayudar a Angular a rastrear qué elementos agregados o eliminados, es decir, personalizar el algoritmo de seguimiento predeterminado al proporcionar una opción de seguimiento para NGFOROF.
Por lo tanto, puede proporcionar su función de seguimiento personalizada que devolverá un identificador único para cada elemento iterado. Por ejemplo, algún valor clave del elemento. Si este valor clave coincide con el anterior, Angular no detectará cambios.
Trackby toma una función que tiene un índice y args de elementos .
@ Component ( {
selector : 'my-app' ,
template : `
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">{{item.id}}</li>
</ul>
`
} )
export class AppComponent {
trackByFn ( index , item ) {
return item . id ;
}
}Si se da Trackby, Angular Tracks cambia por el valor de retorno de la función.
Ahora, cuando cambia la colección, Angular puede rastrear qué elementos se han agregado o eliminado de acuerdo con el identificador único y crear/destruir los elementos solo cambiados.
https://angular.io/api/common/ngforof,https://angular.io/api/core/trackbyfunction
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: rendimiento de componentes de consejos buenos para saber
Debajo del capó, angular compila las directivas estructurales en elementos de plantilla ng, por ejemplo: por ejemplo:
<!-- This -->
< div *ngFor =" let item of [1,2,3] " >
<!-- Get expanded into this -->
< ng-template ngFor [ngForOf] =" [1,2,3] " let-item =" $implicit " > </ ng-template >El valor pasado a *ngfor Directiva se escribe usando Microsyntax. Puedes aprender sobre eso en los documentos.
También vea una herramienta interactiva que muestra la expansión de Alexey Zuev
https://angular.io/guide/structural-directives#microsyntax,https://alexzuza.github.io/ng-stuctural-directive-esexander/,https://angular.io/guide/structural-directives#inside-ngfor
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: consejo de directiva estructural microsíntax
A veces necesitamos trabajar con cada control es una forma. Así es como se puede hacer:
function flattenControls ( form : AbstractControl ) : AbstractControl [ ] {
let extracted : AbstractControl [ ] = [ form ] ;
if ( form instanceof FormArray || form instanceof FormGroup ) {
const children = Object . values ( form . controls ) . map ( flattenControls ) ;
extracted = extracted . concat ( ... children ) ;
}
return extracted ;
}Para ejemplos de uso:
// returns all dirty abstract controls
flattenControls ( form ) . filter ( ( control ) => control . dirty ) ;
// mark all controls as touched
flattenControls ( form ) . forEach ( ( control ) =>
control . markAsTouched ( { onlySelf : true } ) ) ; https://angular.io/guide/reactive-forms
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: Consejos de formularios reactivos buenos para saber
Es realmente fácil agregar atajos de teclado en la plantilla:
< textarea (keydown.ctrl.enter) =" doSomething() " > </ textarea > < input (keydown.enter) =" ... " >
< input (keydown.a) =" ... " >
< input (keydown.esc) =" ... " >
< input (keydown.shift.esc) =" ... " >
< input (keydown.control) =" ... " >
< input (keydown.alt) =" ... " >
< input (keydown.meta) =" ... " >
< input (keydown.9) =" ... " >
< input (keydown.tab) =" ... " >
< input (keydown.backspace) =" ... " >
< input (keydown.arrowup) =" ... " >
< input (keydown.shift.arrowdown) =" ... " >
< input (keydown.shift.control.z) =" ... " >
< input (keydown.f4) =" ... " > https://alligator.io/angular/binding-keyup-keydown-events
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: consejos buenos para saber
Cada componente angular renderizado está envuelto en un elemento host (que es el mismo que el selector de componentes).
Es posible unir las propiedades y atributos del elemento host usando los decoradores @hostbinding, por ejemplo
import { Component , HostBinding } from '@angular/core' ;
@ Component ( {
selector : 'my-app' ,
template : `
<div>Use the input below to select host background-color:</div>
<input type="color" [(ngModel)]="color">
` ,
styles : [
`:host { display: block; height: 100px; }`
]
} )
export class AppComponent {
@ HostBinding ( 'style.background' ) color = '#ff9900' ;
}
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: componentes
Generalmente obtenemos una instancia de servicio según toda la aplicación. También es posible crear una instancia de servicio por componente o directiva.
@ Component ( {
selector : 'provide' ,
template : '<ng-content></ng-content>' ,
providers : [ Service ]
} )
export class ProvideComponent { } @ Directive ( {
selector : '[provide]' ,
providers : [ Service ]
} )
export class ProvideDirective { } https://angular.io/guide/hierchical-dependency-inyection#component-level-injectors,https://stackblitz.com/edit/angular-cdk-happy-animals
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: Consejos componentes Inyección de dependencia
Es posible agregar oyentes de eventos globales en sus componentes/directivas con HostListener . Angular se encargará de darse de baja una vez que se destruya su directiva.
@ Directive ( {
selector : '[rightClicker]'
} )
export class ShortcutsDirective {
@ HostListener ( 'window:keydown.ArrowRight' )
doImportantThings ( ) {
console . log ( 'You pressed right' ) ;
}
}Puede tener múltiples enlaces:
@ HostListener ( 'window:keydown.ArrowRight' )
@ HostListener ( 'window:keydown.PageDown' )
next ( ) {
console . log ( 'Next' )
}También puede pasar parámetros:
@ HostListener ( 'window:keydown.ArrowRight' , '$event.target' )
next ( target ) {
console . log ( 'Pressed right on this element: ' + target )
}
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: componentes de eventos
A veces necesita obtener acceso al document global.
Para simplificar la prueba de unidades, Angular lo proporciona a través de la inyección de dependencia:
import { DOCUMENT } from '@angular/common' ;
import { Inject } from '@angular/core' ;
@ Component ( {
selector : 'my-app' ,
template : `<h1>Edit me </h1>`
} )
export class AppComponent {
constructor ( @ Inject ( DOCUMENT ) private document : Document ) {
// Word with document.location, or other things here....
}
} https://angular.io/api/common/document
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: inyección de dependencia
Aquí está la forma de notificar al usuario que hay campos con valores no valientes.
markFieldsAsTouched Form GROPROUP o FormArray como argumento.
function markFieldsAsTouched ( form : AbstractControl ) : void {
form . markAsTouched ( { onlySelf : true } ) ;
if ( form instanceof FormArray || form instanceof FormGroup ) {
Object . values ( form . controls ) . forEach ( markFieldsAsTouched ) ;
}
}Es muy útil consultar el método más general que acceda a todos los controles de formulario anidados por parte de TheKiba para trabajar con los controles.
https://angular.io/guide/reactive-forms
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: Consejos de validación de formularios reactivos buenos para saber
EventEmitters utilizados para @Output 's son solo observables con un método EMIT.
Esto significa que puede usar una instancia Observable en su lugar, por ejemplo, podemos conectar los cambios de valor de FormControl directamente:
readonly checkbox = new FormControl ( ) ;
@ Output ( ) readonly change = this . checkbox . valueChanges ;
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: salidas de punta
Es posible tomar una plantilla como @Input para que un componente personalice el renderizado
@ Component ( {
template : `
<nav>
<ng-container *ngTemplateOutlet="template"></ng-container>
</nav>
` ,
} )
export class SiteMenuComponent {
@ Input ( ) template : TemplateRef < any > ;
} < site-menu [template] =" menu1 " > </ site-menu >
< ng-template #menu1 >
< div > < a href =" # " > item1 </ a > </ div >
< div > < a href =" # " > item2 </ a > </ div >
</ ng-template >Nota:
ng-contentdebe usarse para la mayoría de los casos y es más simple y más declarativo. Solo use este enfoque si necesita flexibilidad adicional que no se pueda lograr con Ng-Content.
https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateOutlet
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: plantilla
Por defecto, las tiras angulares todos los espacios en blanco en las plantillas para guardar bytes. Generalmente es seguro.
Para casos raros, cuando necesita preservar espacios, puede usar el atributo especial ngPreserveWhitespaces :
< div ngPreserveWhitespaces >
(___()'`;
/, /`
jgs \"--\
</ div >También puede usar la opción PreserveWhitesPaces en un componente.
https://twitter.com/mgechev/status/1108913389277839360
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: consejo
Si bien la mejor manera de reutilizar su código es crear un componente, también es posible hacerlo en una plantilla.
Para hacer esto, puede usar ng-template junto con la directiva *ngTemplateOutlet .
< p >
< ng-container *ngTemplateOutlet =" fancyGreeting " > </ ng-container >
</ p >
< button >
< ng-container *ngTemplateOutlet =" fancyGreeting " > </ ng-container >
</ button >
< ng-template #fancyGreeting >
Hello < b > {{name}}! </ b >
</ ng-template > https://angular.io/api/common/ngtemplateoutlet ,https://angular.io/guide/structural-directives#the-ng-template
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: plantillas
Si necesita una pipe personalizada, antes de crear una, considere revisar el paquete NGX Pipes que tiene más de 70 tuberías personalizadas ya implementadas.
Aquí hay algunos ejemplos:
< p > {{ date | timeAgo }} </ p >
<!-- Output: "last week" -->
< p > {{ 'foo bar' | ucfirst }} </ p >
<!-- Output: "Foo bar" -->
< p > 3 {{ 'Painting' | makePluralString: 3 }} </ p >
<!-- Output: "3 Paintings" -->
< p > {{ [1, 2, 3, 1, 2, 3] | max }} </ p >
<!-- Output: "3" --> https://github.com/danrevah/ngx-pipes
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: Biblioteca de tuberías de punta
Puede usar enlaces de propiedad avanzados para establecer valores de estilo específicos basados en valores de propiedad de componentes:
< p [style.background-color] =" 'green' " >
I am in green background
</ p >
< p [style.font-size.px] =" isImportant ? '30' : '16' " >
May be important text.
</ p > <!-- Width in pixels -->
< div [style.width.px] =" pxWidth " > </ div >
<!-- Font size in percentage relative to the parent -->
< div [style.font-size.%] =" percentageSize " > ... </ div >
<!-- Height relative to the viewport height -->
< div [style.height.vh] =" vwHeight " > </ div >
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: estilos
Similar a cómo puede BIND de dos vías [(ngModel)] puede Bind Bind Bind Propinity en un componente, por ejemplo [(value)] . Para hacerlo, use el nombre apropiado de entrada/salida:
@ Component ( {
selector : 'super-input' ,
template : `...` ,
} )
export class AppComponent {
@ Input ( ) value : string ;
@ Output ( ) valueChange = new EventEmitter < string > ( ) ;
}Entonces puedes usarlo como:
< super-input [(value)] =" value " > </ super-input >
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: enlace de punta
Es posible ejecutar la tarea asíncrona antes de que la aplicación comience proporcionando una función que devuelva la promesa utilizando APP_INITIALIZER Token.
@ NgModule ( {
providers : [
{
provide : APP_INITIALIZER ,
useValue : functionReturningPromise
multi : true
} ,
} )
export class AppModule { }
https://hackernoon.com/hook-into-angular-inicialization-process-add41a6b7e,https://angular.io/api/core/app_initializer
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: consejo
Para fines de prueba, es posible que desee inyectar window.location Objeto de ubicación en su componente. Puede lograr esto con el mecanismo personalizado InjectionToken proporcionado por Angular.
export const LOCATION_TOKEN = new InjectionToken < Location > ( 'Window location object' ) ;
@ NgModule ( {
providers : [
{ provide : LOCATION_TOKEN , useValue : window . location }
]
} )
export class SharedModule { }
//...
@ Component ( {
} )
export class AppComponent {
constructor (
@ Inject ( LOCATION_TOKEN ) public location : Location
) { }
} https://itnext.io/testing-browser-window-location-in-angular-application-e4e83388508ff,https://angular.io/guide/dependency-inyección
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: prueba de inyección de dependencia
Es posible usar @ViewChild (también @ViewChildren y @ContentChild/Children ) para consultar componentes de diferentes tipos utilizando la inyección de dependencia.
En el siguiente ejemplo, podemos usar @ViewChildren(Base) para obtener instancias de Foo y Bar .
abstract class Base { }
@ Component ( {
selector : 'foo' ,
providers : [ { provide : Base , useExisting : Foo } ]
} )
class Foo extends Base { }
@ Component ( {
selector : 'bar' ,
providers : [ { provide : Base , useExisting : Bar } ]
} )
class Bar extends Base { }
// Now we can require both types of components using Base.
@ Component ( { template : `<foo></foo><bar></bar>` } )
class AppComponent {
@ ViewChildren ( Base ) components : QueryList < Base > ;
} https://www.youtube.com/watch?v=prrgo6f0cjs
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: Inyección de dependencia de los componentes de los consejos buenos para saber
Angular nos permite controlar la forma en que se maneja la precarga del módulo.
Hay 2 estrategias proporcionadas por @Angular/Router : PreloadAllModules y NoPreloading . Este último habilitado por defecto, solo precarga módulos perezosos a pedido.
Podemos anular este comportamiento proporcionando una estrategia de precarga personalizada: en el ejemplo a continuación, precargamos todos los módulos incluidos si la conexión es buena.
import { Observable , of } from 'rxjs' ;
export class CustomPreloading implements PreloadingStrategy {
public preload ( route : Route , load : ( ) => Observable < any > ) : Observable < any > {
return preloadingConnection ( ) ? load ( ) : of ( null ) ;
}
}
const routing : ModuleWithProviders = RouterModule . forRoot ( routes , {
preloadingStrategy : CustomPreloading
} ) ;Tenga en cuenta que el ejemplo anterior no sería muy eficiente para aplicaciones más grandes, ya que precargará todos los módulos.
https://angular.io/api/router/preloadingstrategy,https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb.https://medium.com/@adrianfaci U/Custom-Preloading-Strategy-For-Angular-Modules-B3B5C873681a, https: //corylan.com/blog/custom-peloadinging-and-lazy-loading-strategies-with-angular
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: enrutador
Es posible usar etiquetas SVG en su componente angular, para crear hermosos gráficos y visualizaciones. Hay 3 cosas que debes saber:
attr < circle [attr.cx] =" x " [attr.cy] =" y " > </ circle >// Not: < child-component > </ child-component >
< g child-component > </ g > @ Component ( { selector : '[child-component]' } )@ Component ( {
selector : '[child-component]' ,
template : `<svg:circle></svg:circle>`
} )
Demostración interactiva de este fragmento | ⬆ Volver arriba | Etiquetas: TIP SVG
