No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Creando Overlays

7/24
Recursos

Aportes 13

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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>
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;` `}`

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

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 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. ![](https://static.platzi.com/media/user_upload/image-5f132474-c3e6-4682-a857-34834ab9dd03.jpg)![](https://static.platzi.com/media/user_upload/image-b7ea1dc4-dc69-456a-a46f-dc7d860b363d.jpg)

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';
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
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.”

  • Ejecuta el siguiente comando para instalar el paquete @angular/cdk:
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