Creando Overlays
Clase 7 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
José Flores
student•
hace 2 años
Brenda Sutara
student•
hace 2 años
Clase 7 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
José Flores
Brenda Sutara
Yuberley Guerrero
Carlos Dugarte
Gustavo Medina Limon
Miguel Luque
Geovanni Ròjas Lopez
Jose Armando Acevedo Angarita
Alejandro Vazquez Vazquez
Daniel Meza
Milton Estrada
Gerardo Garnica Benítez
Kaly Zulema Cristobal Alcantara
Brenda Sutara
Mauricio Yair Chávez Fuentes
Emilio Ian Camacho Mejía
Jhonatan Estiven Becerra Pedrozo
oscar rueda
Irving Arturo Lemus alemán
Reinaldo Mendoza
Arlin Holguin
Nicolás Romero
Alejandro Vazquez Vazquez
Camilo Del Valle Ledesma
Luis Angel Castillo Vega
Kevin Bueno
Lina Hueso
Miguel Luque
Santiago Restrepo Rueda
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;
}
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.