AG Grid for Angular Apps

Please sign in to watch this workshop.
Sign in
Bookmark
Rate this content

Comienza con AG Grid Angular Data Grid con un tutorial práctico del equipo principal que te guiará a través de los pasos para crear tu primera cuadrícula, incluyendo cómo configurar la cuadrícula con propiedades simples y componentes personalizados. La edición de la comunidad de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar de inmediato a tus proyectos. También descubrirás cómo cargar datos en la cuadrícula y diferentes formas de agregar representación personalizada a la cuadrícula. Al final del masterclass, habrás creado y personalizado una cuadrícula de datos AG Grid Angular.


Contenido:

- comenzando e instalando AG Grid

- configurando ordenamiento, filtrado, paginación

- cargando datos en la cuadrícula

- la API de la cuadrícula

- agregar tus propios componentes a la cuadrícula para representación y edición

- capacidades de la edición de la comunidad gratuita de AG Grid

This workshop has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

Para comenzar con AG Grid en Angular, primero crea una nueva aplicación usando Angular CLI con 'ng new MyApp'. Luego, instala los paquetes AG Grid Community y AG Grid Angular. Finalmente, añade el módulo AG Grid en tu módulo Angular para importar todas las características.

Después de crear tu aplicación Angular, debes instalar los paquetes AG Grid Community y AG Grid Angular. Luego, importa el módulo AG Grid en tu módulo Angular y usa el componente ag-grid-angular en tus componentes Angular.

AG Grid viene con varios temas, como AgThemeAlpine. Puedes vincular un tema a tu cuadrícula y establecer su estilo. También es posible cambiar dinámicamente a un tema oscuro actualizando el archivo CSS correspondiente.

AG Grid ofrece características avanzadas como filtrado avanzado, clasificación, exportación de datos, visualización de transmisiones en vivo y gráficos. Estas características son especialmente útiles en entornos que requieren alto rendimiento y actualizaciones en tiempo real.

AG Grid admite Angular hasta la versión 8 y garantiza compatibilidad y soporte incluso para las versiones más recientes, como Angular 14 mencionado en el contexto.

AG Grid permite manejar grandes conjuntos de datos utilizando características como la paginación, el filtrado eficiente y la posibilidad de interactuar con datos a través de APIs de backend, facilitando la gestión de grandes volúmenes de datos de manera eficiente.

Sí, puedes personalizar las celdas en AG Grid utilizando componentes Angular personalizados como renderizadores de celda, lo que te permite integrar funcionalidades complejas y personalizadas directamente en las celdas de la cuadrícula.

AG Grid es una cuadrícula de JavaScript que se utiliza para trabajar con tablas y características asociadas como clasificación, filtrado, y más. Es ampliamente utilizado en entornos financieros, aunque su uso no se limita a estos.

Stephen Cooper
Stephen Cooper
116 min
04 Jul, 2022

Comments

Sign in or register to post your comment.
Sign in to access video transcription and chapter summary.

Watch more workshops on topic

Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
Workshop
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Construye un potente DataGrid en pocas horas con Ag Grid
React Summit US 2023React Summit US 2023
96 min
Construye un potente DataGrid en pocas horas con Ag Grid
Top Content
Workshop
Mike Ryan
Mike Ryan
¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo empezar con AG Grid, cómo podemos habilitar la ordenación y el filtrado de datos en la cuadrícula, la representación de celdas y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto e impulsar la innovación. En esta masterclass, verás lo fácil que es empezar con AG Grid.
Prerrequisitos: React y JavaScript básicos
Nivel de la masterclass: Principiante
Construye un Datagrid Poderoso con AG Grid
React Summit 2024React Summit 2024
168 min
Construye un Datagrid Poderoso con AG Grid
Top Content
Workshop
Brian Love
Brian Love
¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo comenzar con AG Grid, cómo podemos habilitar la ordenación y filtrado de datos en la cuadrícula, la representación de celdas, y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
Microfrontends con Module Federation y Angular
JSNation Live 2021JSNation Live 2021
113 min
Microfrontends con Module Federation y Angular
Workshop
Manfred Steyer
Manfred Steyer
Cada vez más empresas eligen Microfrontends. Sin embargo, no son fáciles de implementar. Afortunadamente, Module Federation introducido con webpack 5 ha iniciado un cambio crucial de dirección.
En este masterclass interactivo, aprenderás de Manfred Steyer, Angular GDE y Colaborador de Confianza en el equipo de Angular, cómo planificar e implementar arquitecturas de Microfrontend con Angular y el nuevo Module Federation de webpack. Hablaremos sobre compartir bibliotecas y conceptos avanzados como manejar desajustes de versión, Module Federation dinámico e integración en monorepos.
Después de los ejercicios individuales, tendrás un estudio de caso que podrás utilizar como plantilla para tus proyectos. Este masterclass te ayuda a evaluar las opciones individuales para tus proyectos.
Prerrequisitos:Debes tener algo de experiencia con Angular.
Masterclass de Codificación en Vivo para Configurar la Monitorización de Errores con Rollbar
TypeScript Congress 2023TypeScript Congress 2023
48 min
Masterclass de Codificación en Vivo para Configurar la Monitorización de Errores con Rollbar
Workshop
Nico Krüger
Nico Krüger
Durante esta sesión aprenderás cómo crear una nueva cuenta de Rollbar e integrar el SDK de Rollbar con tu aplicación para monitorizar errores en tiempo real y responder y solucionar esos errores. También cubriremos cómo personalizar los datos de carga útil enviados a Rollbar para ampliar tus capacidades de monitorización.

Agenda:- Crear una cuenta de Rollbar (Cuenta gratuita)- Integra tu aplicación con el SDK de Rollbar- Enviar errores gestionados y no gestionados a Rollbar- Añadir datos de carga útil personalizados a tu configuración.
Construyendo una API GraphQL sin servidor para cualquier fuente de datos con StepZen
GraphQL Galaxy 2021GraphQL Galaxy 2021
75 min
Construyendo una API GraphQL sin servidor para cualquier fuente de datos con StepZen
Workshop
Roy Derks
Roy Derks
¿Quieres empezar a construir un servidor GraphQL pero no tienes idea de por dónde empezar? Cada desarrollador (frontend) pide una API GraphQL pero a menudo carece del conocimiento backend para crear una que sea eficiente. Existen muchas formas diferentes de crear el servidor GraphQL perfecto, desde el enfoque de esquema primero hasta el enfoque de código primero o incluso soluciones generadas automáticamente.

En este masterclass interactivo, aprenderás a construir una API GraphQL sin servidor utilizando StepZen. Con StepZen, puedes crear un GraphQL para cualquier fuente de datos (SQL, NoSQL y REST) e incluso otras APIs GraphQL en cuestión de minutos. Incluso puedes manejar casos de uso más complicados como la autenticación y el despliegue. Con un poco de código, podrás combinar diferentes fuentes de datos en una API totalmente eficiente que podrás utilizar en tus aplicaciones desde el primer día.

Tabla de contenidos:
- ¿Qué es StepZen?
- Conexión a una fuente de datos (SQL, NoSQL y REST)
- Uso de directivas personalizadas
- Manejo de flujos de secuencia
- Despliegue

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
JSNation 2022JSNation 2022
19 min
El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
Top Content
Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.
Momento Angular
JSNation 2023JSNation 2023
22 min
Momento Angular
Angular has experienced significant growth and is the second most popular framework after React. The latest release of Angular, called Angular Ivy, went through a major refactoring in 2021. Angular's reactivity model has been improved with the introduction of signals, which enable better integration with RxJS and support advanced reactivity patterns. Angular has made optimizations for performance, including improvements in load speed and lazy loading. The Angular team acknowledges the innovations in other frameworks and highlights the impact of introducing TypeScript in enabling the project's success.
Apache Kafka Explicado Simplemente Con Ejemplos de TypeScript
JSNation 2023JSNation 2023
27 min
Apache Kafka Explicado Simplemente Con Ejemplos de TypeScript
Top Content
Apache Kafka is a distributed, scalable, and high-throughput event streaming platform that plays a key role in event-driven architecture. It allows for the division of monolithic applications into independent microservices for scalability and maintainability. Producers and consumers are the key components in Kafka, allowing for a decoupled system. Kafka's replication and persistent storage capabilities set it apart from alternatives like Redis and RabbitMQ. Kafka provides easy access to real-time data and simplifies real-time data handling.
Manejo Seguro de Datos Dinámicos con TypeScript
Node Congress 2021Node Congress 2021
29 min
Manejo Seguro de Datos Dinámicos con TypeScript
Top Content
This Talk discusses the safe handling of dynamic data with TypeScript using JSON Schema and TypeBox. Fastify, a web framework, allows developers to validate incoming data using JSON schema, providing type safety and error handling. TypeBox is a powerful library that allows developers to define JSON schemas and derive static types in TypeScript. The combination of JSON schema, TypeBox, and Fastify provides powerful tools for type safety and validation of dynamic data.
El Arte de la Programación Funcional
React Summit 2022React Summit 2022
26 min
El Arte de la Programación Funcional
Functional programming is a beautiful paradigm that allows us to understand programs and how entities behave and interact. It has nice characteristics like predictability, which makes testing and debugging easier. We explore how functional programming handles side effects and generative art. We learn about drawing patterns and grids with recursive functions, handling state in functional programming, and creating fashion using functional programming techniques. We also discuss handling randomness in functional programming and how to introduce organic variation and randomness to art while maintaining predictability.
Modelado de Contenido para Desarrolladores de React
React Summit 2022React Summit 2022
7 min
Modelado de Contenido para Desarrolladores de React
Haushal, a Developer Advocate at Contentful, discusses content modeling and its importance in providing a great user experience. He uses his Cookbook web app as an example to explain how he structures and organizes content. The overall content model emphasizes reusability and considerations for content governance and platform selection. Content modeling is an iterative process, and Haushal provides resources for further learning and development.