A callback method that is invoked immediately after the
default change detector has checked the directive's
data-bound properties for the first time,
and before any of the view or content children have been checked.
It is invoked only once when the directive is instantiated.
Returns void
ngOnDestroy
ngOnDestroy(): void
A callback method that performs custom clean-up, invoked immediately
before a directive, pipe, or service instance is destroyed.
MiniAudio component is a draggable, customizable mini audio player with optional waveform animations.
Selector
app-mini-audio
Standalone
true
Imports
CommonModule
Template
Styles
.modal-container
: Positioning and drag area..card
: The main container styling..background-image
: Styling for an optional background image..name-text
: Styling for name text with customizable color..overlay-web
and.waveform-web
: Contains and styles the waveform animation bars.Inputs
visible
(boolean): Show/hide the component.customStyle
(object): Custom styles for the component.name
(string): Text to display as the name.showWaveform
(boolean): Show/hide waveform animations.overlayPosition
(string): Position of the overlay.barColor
(string): Color of waveform bars.textColor
(string): Color of name text.nameTextStyling
(object): Additional styles for the name text.imageSource
(string): URL of the background image.roundedImage
(boolean): If true, applies rounded corners to the image.imageStyle
(object): Custom styles for the image.Methods
ngOnInit()
: Starts waveform animations ifshowWaveform
is true.ngOnDestroy()
: Clears waveform animation intervals.animateWaveform()
: Sets intervals for each bar's animation.handleMouseDown(event: MouseEvent)
: Starts dragging on mousedown.handleMouseMove(event: MouseEvent)
: Updates position during drag.handleMouseUp()
: Ends dragging on mouseup.Example