Creando Overlays

Clase 7 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

Clase anteriorSiguiente clase

José Flores

student•

Si estas en Angular 17, el import lo haces directamente en navbar.component.ts y agregas en imports el Overlay Module:

import { OverlayModule } from '@angular/cdk/overlay';

@Component({

selector: 'app-navbar',

standalone: true,

templateUrl: './navbar.component.html',

imports: [OverlayModule]

})

export class NavbarComponent {

isOpen = false;

}

Brenda Sutara

student•

uy graaaacias! no sabia a donde ponerlo

Yuberley Guerrero

student•

Si colocan el overlay con las siguiente propiedades, crearan un efecto de foco muy interesante

<ng-template 
	cdkConnectedOverlay
	[cdkConnectedOverlayOrigin]="overlayProfile
	[cdkConnectedOverlayOpen]="isOpened
	[cdkConnectedOverlayHasBackdrop]="true
	(backdropClick)="isOpened = false" 
	(detach)="isOpened = false"
>

<ng-template>

Carlos Dugarte

student•

Muy buen aporte, me gustó. Gracias por compartirlo

Gustavo Medina Limon

student•

Donde puedo ver ese tipo de propiedades? Excelente Aporte.

Miguel Luque

student•

Y todas las soluciones son instalando angular material cosa que no veo que se haga en ningún momento del video.

Geovanni Ròjas Lopez

student•

solo hay que instalar el angular CDK (esta en el segundo video), yo no eh instalado angular material y hasta el momento funciona todo lo que ha mostrado. Igual verifica en package.json si la dependencia "@angular/cdk" se encuentra instalada.

Jose Armando Acevedo Angarita

student•

En el video dos del curso ya a lo ultimo te dice para instalar el CDK

Alejandro Vazquez Vazquez

student•

Para todos los que el menú les aparece en otro lado y no abajo del icono es por que deben mover el import hasta arriba de todo, es una regla de css.

Daniel Meza

student•

Había olvidado cómo se llamaba a lo que hace Nico al colocar el #menuOverlay

Se trata más que nada de una variable local de referencia. Lo que hace es mantener una referencia al elemento en el que fue definida. En este caso, en el botón.

Acá más info a cerca de ello: Información de "Elemento Ref - #"

Milton Estrada

student•

Hay vamos! 😁

Gerardo Garnica Benítez

student•

Para utilizar el CDK de Angular se debe agregar lo siguiente en el CSS global (styles.scss en este caso):

@import '@angular/cdk/overlay-prebuilt.css';

Kaly Zulema Cristobal Alcantara

student•

Me sale un error con la api no me carga.

Brenda Sutara

student•

¿Cómo hago para que no me salga error con el arroba?

Mauricio Yair Chávez Fuentes

student•

Yo intente poniendolo como codigo HTML -> @

Emilio Ian Camacho Mejía

student•

Creando una variable en el ts con esa informacion y en el html la mandas a llamar

Jhonatan Estiven Becerra Pedrozo

student•

Tengo este error:

ERROR in Unknown import type?

oscar rueda

student•

como puedo crear un componente que pueda ser usado dentro del froms, estoy intentando pasarle el formcontrolname pero no acepta eso

<div>
  <label for="first_name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-900">{{applabel}}</label>
  <input [type]="controlType" formControlName="control"  id="first_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-white dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-900 dark:focus:ring-blue-500 dark:focus:border-blue-500" [placeholder]="appPlaceHolder" required>
</div>

Irving Arturo Lemus alemán

student•

a quien no le funcione el @import en el styles.scss puede utilizar el @use

Reinaldo Mendoza

student•

Al fin!!!, CDK por lo que vine al curso

arlingholguin

student•

No me ha funcionado el cdk overlay, me aparece en el orden del div que ponga, no me aprece al lado del avatar. A laguine le pasó utilizo Angular 13

Nicolás Romero

student•

Me estaba pasando lo mismo pero en la version 17, y se solucionó al agregar el siguiente import en el archivo styles.scss: @import '@angular/cdk/overlay-prebuilt.css';

Alejandro Vazquez Vazquez

student•

Muy probablemente pusiste esto asi @tailwind base; @tailwind components; @tailwind utilities; @import "@angular/cdk/overlay-prebuilt.css";

El detalle es que los imports deben de ir hasta arriba de todo siempre, cambialo a esta forma y te debe funcionar

@import "@angular/cdk/overlay-prebuilt.css"; @tailwind base; @tailwind components; @tailwind utilities;

Camilo Del Valle Ledesma

student•

Tengo angular 17 y no he podido tener el Overlay (menú desplegable), me sale este error en consola:

navbar.component.html:53 NG0303: Can't bind to 'cdkConnectedOverlayOpen' since it isn't a known property of 'ng-template' (used in the '_NavbarComponent' component template). 1. If 'ng-template' is an Angular component and it has the 'cdkConnectedOverlayOpen' input, then verify that it is included in the '@Component.imports' of this component. 2. If 'ng-template' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.

Yo no estoy usando módulos por la versión entonces importé directamente en el navbar.component.ts el OverlayModule

Luis Angel Castillo Vega

student•

Yo segui paso a paso y noo entendi nada por que no me sallio

Kevin Bueno

student•

Maravilloso CDK por parte del equipo de Angular, ya lo había usado antes para solucionar algo en especifíco pero ahora estoy aprendiendo más a fondo

Lina Hueso

student•

Para quienes les genero un error como: "Cannot find module '@angular/cdk/overlay' or its corresponding type declarations."

Ejecuta el siguiente comando para instalar el paquete @angular/cdk:

npm install @angular/cdk --save

Miguel Luque

student•

Varios errores y el video no explica que problemas puede uno tener con el CDK, dejo el curso en este punto

Santiago Restrepo Rueda

student•

Seguramente el error que te salió fué este, y me tomo 5 mins solucionarlo. Te dejo el link de stack para que lo puedas solucionar.

https://stackoverflow.com/questions/74616687/error-ts2707-generic-type-%C9%B5%C9%B5directivedeclaration-requires-between-6-and-8-type

Creando Overlays

Introducción

¿Qué es el Angular CDK?

Instalando Angular CDK y TailwindCSS

Maquetando con Tailwind

Maquetando la página de login con Tailwind

Maquetando formularios con Tailwind

Componente de botón reutilizable

Reto: colores y propiedades dinámicas

Componentes interactivos con Angular CDK

Creando Overlays

Múltiples Overlays

Iconos en Angular con Font Awesome

Creando acordeones

Acordeones dinámicos

Drag and drop

Drag and drop con ordenamiento

Drag and drop con transferencia entre columnas

Drag and drop con columnas dinámicas

Modales y listas

Modales y diálogos

Modales recibiendo información

Listas con scroll

Listas con virtual scrolling

Table CDK

Tablas

Estilos en Tablas

Usando un DataSource en Tablas

Tablas con filtros y debounce

Próximos pasos para completar el Clon de Trello

Mejoras en UX y reusabilidad

Toma el Curso de Autenticación con Angular