Видео

Hola @JensonStopa para ocultar el directorio y las dimensiones debes hacerlo en la configuración de la terminal en el tab ventana y deschequear la opción Directorio o documento de trabajo y la opción Dimensiones

@jemc300x muchísimas gracias de nuevo

Hola @ArkTemplarioMaster ok en un rato subo el vídeo explicativo, mantente atento.

Hola @ArkTemplarioMaster aquí te dejo el video donde explico como hacer una columna ordenable ruclips.net/video/yGx0Nud7d1Q/видео.html

@@lilcrist hola, si tengo un chance este fin de semana voy a hacer un vídeo explicativo de cómo hacer éso.

​@@jemc300x por favo, te lo agradeceria mucho, estoy en mi proyecto de titulo y tengo poca experiencia con Angular 18, sin embargo tu video me ayudo mucho a solucionar el tema de las tablas, muy agradecido

@lilchist aquí esta el video donde explico como agregar columna de acciones ruclips.net/video/N7P4YcNG4UE/видео.html

@@SergioGonzalez-ng2bz hola Sergio si, justo éso lo explico en éste video ruclips.net/video/jOUfuHfUayw/видео.htmlsi=6zqb1WSnRYCjb_XM

@jemc300x muchas gracias

Hola @josecarlosleonnima1605 aquí te explico como hacer eso ruclips.net/video/oXAyhjn7sKo/видео.html

@@jemc300x osea me refiero en que cada columna tenga su filtro

@@josecarlosleonnima1605 el en vídeo también explico como hacer éso.

Hola @JohnErikcObandoRamirez ok veré sí lo hago para éste fin de semana.

Hola @JohnErikcObandoRamirez aquí explico como usar los pipes ruclips.net/video/aVWnYAPhFns/видео.html

Ok me lo apunto.

Hola @josecarlosleonnima1605 aquí explico como agregar ancho en las columnas ruclips.net/video/_ONGNNAp4SA/видео.html

hola @hein6990 si estan teniendo problemas con plugin de vscode, puede ser que el path no esta configurado. para ello abran vscode, abrir la barra de comandos (cmd+shift+P) y escribir el comando Shell Command: Install 'code' command in PATH

Hola @luisormeno9101 los campos del datasource se muestran siempre y cuando esten en las columnas a mostrar, así que sí tú datasource tiene un array de objetos y cada objeto tiene 10 propiedades y tú array de columnas solo está apuntado a 5 propiedades las otras 5 no se mostrarán. En cuanto a la otra interrogante, voy a analizar ése caso de uso para ver la manera más práctica de aplicarlo.

Hola @sergiocarrasco2096 tal cómo está ahorita se puede usar en Angular 18, pero sí, en lo que tenga un tiempo voy a pasarla a standalone components.

Ok muchas gracias estaré atento

Excelente! compártelo para otros devs le saquen provecho también.

Hola @victorhoyos7641, gracias por comentar y que bueno que te guste el video. Con respecto a tu pregunta, por 60 campos te refieres a 60 columnas? si cada columna tiene textos muy largos ahora mismo se me ocurre lo siguiente, establecer una longitud máxima de caracteres por columna y luego al hacer click en cada columna mostrar todo el contenido en la fila que se expande. Si no logras hacerlo me avisas para explicártelo en un video.

Hola @justavzz7163, me alegra que ye guste el video. A qué te refieres exactamente? porque la implementación en un caso real de un formulario no seria distinta a lo que muestro en el video de conectar el componente reutilizable con el formulario, lo además seria lo típico de trabajar con formulario reactivos, aplicar validaciones, consumir una api, etc..!!!

@@jemc300x Muchas gracias por responder me referia a hacer un formulario usando esos INPUTS reutilizables y con un boton de guardado , que al darle click me traiga por ejemplo en un console.log el valor del formulario , muchas gracias por tus videos , espero lo puedas hacer y muchas gracias !

@@justavzz7163 ahh ok justo eso ya lo hice en este otro video donde ademas explico como crear una directiva para restringir caracteres especiales ruclips.net/video/inJ-230_pE8/видео.htmlsi=p30BWi8K5AS2UG0a

Excelente que bueno que te haya servido, ésa es la idea.

Hola @jejecs que bueno que te gusten los vídeos compártelo para que otros también se beneficien. Con respecto a tú pregunta tal como lo veo tienes 2 opciones: 1- Mover la acción de expandir las filas a un botón en específico. O 2- En cada botón de acción en el evento click antes de llamar al método correspondiente colocar $event.stopImmediatePropagation(); Pienso que algunas de esas dos opciones deberían funcionarte.

Hola @jejecs en ése caso es necesario en resumidas palabras hacer dos cosas: 1- Tienes que pasarle la cantidad total de registros al MatPaginator en una propiedad llamada length 2- Escuchar el evento page del MatPaginator para que hagas las peticiones a tu API con el número de página y el tamaño de página seleccionado.

Hola, por supuesto que es viable. No hay un vídeo con todas las opciones porque las he ido creando a medida que me las han ido pidiendo.

Que bueno que te haya servido para tú caso de uso, compártelo para que otros también se beneficien 😄👍

Hola @kevinantonio8083 con lo que explico en éste video se puede hacer éso ya tienes más del 90% hecho, sólo necesitas cambiar el MatSelect por los MatChips y hacer unos pequeños ajustes para que se adapte a lo que necesitas.

Hola @willianp853 esas tablas no exportan a CSV para hacerlo tendrías que hacer el algoritmo tu mismo y adaptarlo a la estructura del JSON que usas para mostrar en la tabla, en este link te explican como hacerlo medium.com/nerd-for-tech/import-and-export-data-in-csv-in-angular-3c004f502d39

Hola @kevinantonio8083, tal como esta ahorita la puedes usar en cualquier componente standalone sin problema, solo debes importar el TableModule.ts en los imports de cualquier componente standalone. Sin embargo, para convertirla en un componente standalone solo debes en el table.component.ts hacer algo como esto: @Component({ selector: 'app-table', templateUrl: './table.component.html', styleUrls: ['./table.component.scss'], standalone: true, imports: [ CommonModule, MatTableModule, ColumnValuePipe ], }) y eliminar el TableModulo.ts y el pipe column-value.pipe.ts debería quedar algo como esto: @Pipe({ name: 'columnValue', standalone: true })

Hola @leonardovillareal3871 gracias por comentar que bueno que te guste el contenido. Con respecto a tu pregunta seria algo cómo en el listado de columnsToFilters agregar un objeto tipo: { placeholder: 'Filter by columns', column: 'COL', options: ['name','category','description'] } Y en el método getCustomFilterPredicate 1:16:01 agregar una nueva condición tipo if(key === 'ALL'){ for... } else if(key === 'COL') { Parecido al for de abajo sólo debes ajustarlo para que utilices el currentFilterValue para obtener la key de la column que quieres buscar. } else { For... }

@@jemc300xMuchas gracias por tu respuesta Enrique y gracias por compartir tu conocimiento.

Hola @willianp853 que bueno que te guste el vídeo, si estás utilizando la clase MatTableDatasource en éste video ruclips.net/video/yfD4aYF2gG0/видео.htmlsi=uITZ0d9XRgAUJNrM explicó cómo hacer un filtro customizado con el método filterPredicate

Hola @willianp853 que bueno que te guste el vídeo, si estás utilizando la clase MatTableDatasource en éste video ruclips.net/video/yfD4aYF2gG0/видео.htmlsi=uITZ0d9XRgAUJNrM explicó cómo hacer un filtro customizado con el método filterPredicate

Hola @abruschini que bueno que te guste el vídeo, aquí te explico cómo agregar columnas de acción ruclips.net/video/fwSpn75UhDk/видео.htmlsi=XZqJ7K3BxpPydx9b

Hola @yusetmercado4233 Ésa sería una opción sí sólo se quiere cerrar el formulario, pero si necesitas hacer alguna validación antes de cerrar el formulario recomiendo la que enseño en el vídeo, igualmente todo va a depender de cada caso de uso. 😀👍

Hola @diegovinasco6575 aún no lo he probado pero en teoría debería funcionar sin ningún problema.

Gracias por comentar

<ng-container *ngFor="let column of tableColumns" [matColumnDef]="column.def"> <th mat-header-cell *matHeaderCellDef>{{column.label}}</th> <td mat-cell *matCellDef="let row"> <ng-container *ngIf="column.template; else textColumn"> <ng-container *ngTemplateOutlet="column.template; context:{ $implicit : row }"></ng-container> </ng-container> <ng-template #textColumn>{{ row | columnValue: column }}</ng-template> </td> </ng-container> Lo vengo haciendo asi, pero no me funciona

Probe de esta manera, dentro del componente tabla: <ng-container *ngIf="column.dataKey && column.isButton; else textColumn" class="button-cell"> <button mat-icon-button (click)="column.buttonAction(row)"> <mat-icon>{{ column.iconButton }}</mat-icon> </button> </ng-container> en el model, agregue los siguientes 3 campos: isButton?: boolean; // Indica si esta columna es un botón buttonAction?: Function; // Función de acción del botón (si es un botón) iconButton?: string; el problema es que no me dejaba aplicarle esas condicionales, o mas bien no supe como hacerlo

Hola @reiserrr3668 pasando la columna mediante un template debería funcionar, te aseguraste que en el template estás recibiendo el row? Sí le pasas un Pipe json se muestra el contenido de row?

Hola @user-gf3gc3lm4s gracias por comentar y me alegra que este contenido te sea de ayuda. Con respecto a tu pregunta: Opción A): Te refieres a que puedas elegir filtrar por columna de tal manera que el contenido del mat-input sea para buscar dentro de una columna en especifico que puedas seleccionar desde un mat-select? Opción B): Te refieres a que puedes tener dentro de un mat-select un listado de opciones que se pueden repetir dentro de cada una de las filas de la tabla y que al momento de seleccionar una opción en la tabla solo te muestre todas las coincidencias que encuentre, y luego lo que escribas en el mat-input se utilice para filtrar solo al resultado que actualmente se muestra en la tabla?

@@jemc300x Gracias por responder, me refiero a: el selector fitre por ejemplo la columna de categoria, eigiendo "X"categoria y que el input filtre la columna de nombre sumando al selector. digamos un ejemplo, en la categoria de inalambricos hay 1200 registros y solo quiero los dispositivos en los que su nombre coincida con rgb (mouse-rgb; teclado-rgb...etc)

Hola ​@@JoseMiguelSilvaCastro-z9u aquí tienes el vídeo donde explico cómo hacer lo que me preguntas ruclips.net/video/yfD4aYF2gG0/видео.htmlsi=940q5NVgiN8eSpSQ

Hola @oscarivan4388 que bueno que te haya gustado el vídeo, gracias por comentar 😃👍. Tengo una duda en cuanto a tú pregunta, dices que tanto el formGroup y template este en el mismo componente del diálogo?🤔 O, qué el template este en el componente del diálogo y el formGroup en el componente padre que llama al diálogo? Sí es está última no le veo mucho sentido porque las idea es que desde el componente padre se pueda enviar un template que tenga el formGroup al componente del diálogo.

creo que es mas bien como la primera, el caso es que tengo varios dialog similares con un formulario que solo cambia en un input dependiendo el tipo. por ejemplo tengo uno llamado gendar que tiene el input fecha y el input observacion y tengo otro dialog llamado devolver que en el formulario solo esta el input observacion, entonces, la idea es que cuando llame al dialog y este sea desde el btn devolver entonces oculete el input fecha y solo muestre el de observacion. ¿Es eso posible? gracias por responder. @@jemc300x

Hola @luisalfredoricopabardales6345 que bueno que te haya gustado el video. Para el caso que estas planteando se me ocurre que cada objeto que conforma ése array que estas enviando, debe de tener una propidad que indique si se ha seleccionado y ese propiedad la enlazo al checkbox. Si necesitas que te lo explique en video me avisas.

@@jemc300x hola estimado genial con tus tutoriales si puedes hacerlo en video seria genial

Hola @luisalfredoricopabardales6345 aquí esta el video con la explicación de cómo hacerlo ruclips.net/video/y1Ao4BPQTUM/видео.html espero haber respondido tu pregunta.

Hola @erikgranda7384 gracias por tu comentario pero ya tengo un video con esa feature 😅 aquí lo puedes ver ruclips.net/video/3uO-yByk5mQ/видео.html si después de verlo no se ajusta a lo que necesitas me avisas y en lo que tenga el tiempo te respondo con un video 😃👍

Que bueno @margaritaalvarezgonzalez230, ésa es la idea que sirvan de ayuda tanto para los que saben cómo para los que están aprendiendo, compártelo con otros para que también se beneficien 😀👍

@@jemc300x Sí, muchas gracias! Ya lo he compartido porque el contenido de tu canal es de mucha ayuda. Saludos!!😄

Excelente ésa es la idea, compártelo para qué ayuden a otros también. 😀👍

Hola @ROCKET9193 gracias por comentar y que bueno que te guste este tipo de contenido. En lo que tenga un chance hago un video explicando cómo hacer justamente eso que quieres. Mantente atento.

Hola @ronaldoantezana3178 no me he topado con ese caso de uso, la verdad esta retador porque hay que hacer varias validaciones, ademas recuerda que para que en el modo edición aparezca el valor que actualmente tienes debe de estar en la lista de opciones a desplegar. Hay que hacer un refactor para utilizar template y poder hacer un algoritmo bien complejo que maneje todas esas validaciones desde el componente padre. Si no estas muy apurado con eso, intentare este fin de semana sacar un tiempo y hacer vídeo explicando como resolver ese problema.

Hola @ronaldoantezana3178 aquí explico cómo hacer lo que necesitas ruclips.net/video/6iLmXgfO3kg/видео.html

Hola @rrubensmeirelles si los estilos que quieres aplicarle a la tabla están en el componente padre entonces el componente padre debería tener en el decorador @Component({..., encapsulation: ViewEncapsulation.None }) (Pero ten cuidado con eso porque los estilos del padre se harán globales y podría afectar a los estilos de otros componentes), yo recomiendo mejor colocar los estilos que quieres aplicar a la tabla en el archivo styles.scss.

Muchas gracias por tus palabras, que bueno que el contenido te sea útil 😀👍