Creando Overlays
Contenido del curso
Maquetando con Tailwind
Componentes interactivos con Angular CDK
Drag and drop
Modales y listas
Table CDK
Próximos pasos para completar el Clon de Trello
Creando Overlays
Contenido del curso
Creando Overlays
José Flores
Estudiante
Brenda Sutara
Estudiante
Yuberley Guerrero
Estudiante
Carlos Dugarte
Estudiante
Gustavo Medina Limon
Estudiante
Miguel Luque
Estudiante
Geovanni Ròjas Lopez
Estudiante
Jose Armando Acevedo Angarita
Estudiante
Alejandro Vazquez Vazquez
Estudiante
Daniel Meza
Estudiante
Milton Estrada
Estudiante
Gerardo Garnica Benítez
Estudiante
Kaly Zulema Cristobal Alcantara
EstudianteBrenda Sutara
Estudiante
Mauricio Yair Chávez Fuentes
Estudiante
Emilio Ian Camacho Mejía
Estudiante
Jhonatan Estiven Becerra Pedrozo
Estudiante
oscar rueda
Estudiante
Irving Arturo Lemus alemán
Estudiante
Reinaldo Mendoza
Estudiante
Arlin Holguin
Estudiante
Nicolás Romero
EstudianteAlejandro Vazquez Vazquez
Estudiante
Camilo Del Valle Ledesma
Estudiante
Luis Angel Castillo Vega
Estudiante
Kevin Bueno
Estudiante
Lina Hueso
EstudianteMiguel Luque
Estudiante
Santiago Restrepo Rueda
EstudianteSi 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;
}
uy graaaacias! no sabia a donde ponerlo
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>
Muy buen aporte, me gustó. Gracias por compartirlo
Donde puedo ver ese tipo de propiedades? Excelente Aporte.
Y todas las soluciones son instalando angular material cosa que no veo que se haga en ningún momento del video.
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.
En el video dos del curso ya a lo ultimo te dice para instalar el CDK
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.
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 - #"
Hay vamos! 😁
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';
Me sale un error con la api no me carga.
¿Cómo hago para que no me salga error con el arroba?
Yo intente poniendolo como codigo HTML -> @
Creando una variable en el ts con esa informacion y en el html la mandas a llamar
Tengo este error:
ERROR in Unknown import type?
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>
a quien no le funcione el @import en el styles.scss puede utilizar el @use
Al fin!!!, CDK por lo que vine al curso
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
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';
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;
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
Yo segui paso a paso y noo entendi nada por que no me sallio
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
Para quienes les genero un error como: "Cannot find module '@angular/cdk/overlay' or its corresponding type declarations."
npm install @angular/cdk --save
Varios errores y el video no explica que problemas puede uno tener con el CDK, dejo el curso en este punto
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.