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;
}
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>
Y todas las soluciones son instalando angular material cosa que no veo que se haga en ningún momento del video.
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? 
Tengo este error:
ERROR in Unknown import type?
José Flores
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
uy graaaacias! no sabia a donde ponerlo
Yuberley Guerrero
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
Muy buen aporte, me gustó. Gracias por compartirlo
Gustavo Medina Limon
Donde puedo ver ese tipo de propiedades? Excelente Aporte.
Miguel Luque
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
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
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.
Daniel Meza
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
Hay vamos! 😁
Gerardo Garnica Benítez
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
Me sale un error con la api no me carga.
Brenda Sutara
¿Cómo hago para que no me salga error con el arroba?
Mauricio Yair Chávez Fuentes
Yo intente poniendolo como codigo HTML -> @
Emilio Ian Camacho Mejía
Creando una variable en el ts con esa informacion y en el html la mandas a llamar
Jhonatan Estiven Becerra Pedrozo
Tengo este error:
ERROR in Unknown import type?
oscar rueda
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
a quien no le funcione el @import en el styles.scss puede utilizar el @use
Reinaldo Mendoza
Al fin!!!, CDK por lo que vine al curso
Arlin Holguin
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
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
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
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
Yo segui paso a paso y noo entendi nada por que no me sallio
Kevin Bueno
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
Para quienes les genero un error como: "Cannot find module '@angular/cdk/overlay' or its corresponding type declarations."
npm install @angular/cdk --save
Miguel Luque
Varios errores y el video no explica que problemas puede uno tener con el CDK, dejo el curso en este punto
Santiago Restrepo Rueda
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.