
Security News
rv Is a New Rust-Powered Ruby Version Manager Inspired by Python's uv
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
@impactdk/overlay
Advanced tools
A module to easily add open and manage overlays with injected components in your Angular application
A module to create and manage overlays.
Simply import the OverlayModule from "@impactdk/overlay" in your AppModule. Any component that needs to be injected into the overlay needs to be placed into the entryComponents of a given module.
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { OverlayModule } from '@impact/overlay';
import { SidebarComponent } from './sidebar/sidebar.component';
@NgModule({
imports: [BrowserModule, OverlayModule],
declarations: [AppComponent, SidebarComponent],
bootstrap: [AppComponent],
providers: [],
entryComponents: [SidebarComponent]
})
export class AppModule {}
In order for the overlay to have the proper styles you must import
@impactdk/overlay/base into your main style file.
@import "~@impactdk/overlay/base";
This is only needed if you dont use material theme already as it is included in the core.
To open an overlay simply inject the overlay service into your component and trigger the open method on the class and pass in the component you want to inject.
this.overlay.open(SidebarComponent);
In order to send data to the component that was opened simply pass in the config object with the parameter "data" with what ever data you want to share.
this.overlay.open(SidebarComponent, {data: { menuItems: [] }});
You can then use this data within the injected component by using the IMPACT_OVERLAY_DATA injection token
export class SidebarComponent implements OnInit {
constructor(
public overlayRef: ImpactOverlayRef,
@Inject(IMPACT_OVERLAY_DATA) public data: any
) {}
ngOnInit() {
console.log(this.data);
}
}
By default the overlay will close automaticly when the backdrop is pressed. If you want to manually close the overlay simply invoke the close method on the overlayRef
export class SidebarComponent implements OnInit {
constructor(
public overlayRef: ImpactOverlayRef,
@Inject(IMPACT_OVERLAY_DATA) public data: any
) {}
closeSidebar() {
this.overlayRef.close()
}
}
In order to animate in, simply use the Angular Animations library to create a :enter animation.
Animating out however is not as easy as a cause of the limitations within the CDK.
First you must add the following properties to your component.
export class SidebarComponent {
animationState: 'void' | 'enter' | 'leave' = 'enter';
animationStateChanged = new EventEmitter<AnimationEvent>();
...
}
After that you must implement the following methods in your component.
export class SidebarComponent {
...
onAnimationStart(event: AnimationEvent) {
this.animationStateChanged.emit(event);
}
onAnimationDone(event: AnimationEvent) {
this.animationStateChanged.emit(event);
}
startExitAnimation() {
this.animationState = 'leave';
}
...
}
And finally you must implement the animation triggers for start and done on the element you trigger your animations on like this.
<section [@slideContent]="animationState"
(@slideContent.start)="onAnimationStart($event)"
(@slideContent.done)="onAnimationDone($event)">
</section>
At this time the service supports several config settings.
export interface ImpactOverlayConfig {
panelClass?: string | string[]; // Class around the panel wrapping the injected components (default: '')
fullHeight?: boolean; // Decides if a panel should be full height or dependent on the component size (default: false)
hasBackdrop?: boolean; // True/False if you want a backdrop or not (default: true)
scrollBlock?: boolean; // True/False if you want the backdrop to block scroll (default: true)
backdropClass?: string; // Add a class to the backdrop (default: ''cdk-overlay-dark-backdrop)
positionVertical?: {
placement: 'bottom' | 'top' | 'center'; // Decides the vertical position of the component within the backdrop (default: 'center')
offset?: string; // Offset can be in any given css unit. (default: '0px')
},
positionHorizontal?: {
placement: 'left' | 'right' | 'center'; // Decides the horizontal position of the component within the backdrop (default: 'center')
offset?: string; // Offset can be in any given css unit. (default: '0px')
}
data?: any; // Any data that should be injected into the component (default: {})
}
FAQs
A module to easily add open and manage overlays with injected components in your Angular application
We found that @impactdk/overlay demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.