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.
Optional
accentOptional
alignOptional
alignOptional
alignOptional
alignmentOptional
all?: stringOptional
animation?: stringOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
appearance?: stringOptional
aspectOptional
backdropOptional
backfaceOptional
background?: stringOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
baselineOptional
baselineOptional
blockOptional
border?: stringOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
bottom?: stringOptional
boxOptional
boxOptional
breakOptional
breakOptional
breakOptional
captionOptional
caretOptional
clear?: stringOptional
clip?: stringOptional
clipOptional
clipOptional
color?: stringOptional
colorOptional
colorOptional
colorOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columns?: stringOptional
contain?: stringOptional
containOptional
containOptional
containOptional
containOptional
containOptional
container?: stringOptional
containerOptional
containerOptional
content?: stringOptional
contentOptional
counterOptional
counterOptional
counterOptional
cssOptional
cssOptional
cursor?: stringOptional
cx?: stringOptional
cy?: stringOptional
d?: stringOptional
direction?: stringOptional
display?: stringOptional
dominantOptional
emptyOptional
fill?: stringOptional
fillOptional
fillOptional
filter?: stringOptional
flex?: stringOptional
flexOptional
flexOptional
flexOptional
flexOptional
flexOptional
flexOptional
float?: stringOptional
floodOptional
floodOptional
font?: stringOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
forcedOptional
gap?: stringOptional
grid?: stringOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
height?: stringOptional
hyphenateOptional
hyphens?: stringOptional
imageOptional
imageOptional
inlineOptional
inset?: stringOptional
insetOptional
insetOptional
insetOptional
insetOptional
insetOptional
insetOptional
isolation?: stringOptional
justifyOptional
justifyOptional
justifyOptional
left?: stringOptional
Readonly
length?: numberOptional
letterOptional
lightingOptional
lineOptional
lineOptional
listOptional
listOptional
listOptional
listOptional
margin?: stringOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marker?: stringOptional
markerOptional
markerOptional
markerOptional
mask?: stringOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
mathOptional
mathOptional
maxOptional
maxOptional
maxOptional
maxOptional
minOptional
minOptional
minOptional
minOptional
mixOptional
objectOptional
objectOptional
offset?: stringOptional
offsetOptional
offsetOptional
offsetOptional
offsetOptional
offsetOptional
opacity?: stringOptional
order?: stringOptional
orphans?: stringOptional
outline?: stringOptional
outlineOptional
outlineOptional
outlineOptional
outlineOptional
overflow?: stringOptional
overflowOptional
overflowOptional
overflowOptional
overflowX?: stringOptional
overflowY?: stringOptional
overscrollOptional
overscrollOptional
overscrollOptional
overscrollOptional
overscrollOptional
padding?: stringOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
page?: stringOptional
pageOptional
pageOptional
pageOptional
paintOptional
Readonly
parentOptional
perspective?: stringOptional
perspectiveOptional
placeOptional
placeOptional
placeOptional
pointerOptional
position?: stringOptional
printOptional
quotes?: stringOptional
r?: stringOptional
resize?: stringOptional
right?: stringOptional
rotate?: stringOptional
rowOptional
rubyOptional
rx?: stringOptional
ry?: stringOptional
scale?: stringOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollbarOptional
scrollbarOptional
scrollbarOptional
shapeOptional
shapeOptional
shapeOptional
shapeOptional
stopOptional
stopOptional
stroke?: stringOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
tabOptional
tableOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
top?: stringOptional
touchOptional
transform?: stringOptional
transformOptional
transformOptional
transformOptional
transition?: stringOptional
transitionOptional
transitionOptional
transitionOptional
transitionOptional
transitionOptional
translate?: stringOptional
unicodeOptional
userOptional
vectorOptional
verticalOptional
visibility?: stringOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
whiteOptional
whiteOptional
widows?: stringOptional
width?: stringOptional
willOptional
wordOptional
wordOptional
wordOptional
writingOptional
x?: stringOptional
y?: stringOptional
zOptional
zoom?: stringOptional
accentOptional
alignOptional
alignOptional
alignOptional
alignmentOptional
all?: stringOptional
animation?: stringOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
appearance?: stringOptional
aspectOptional
backdropOptional
backfaceOptional
background?: stringOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
baselineOptional
baselineOptional
blockOptional
border?: stringOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
boxOptional
boxOptional
breakOptional
breakOptional
breakOptional
captionOptional
caretOptional
clear?: stringOptional
clip?: stringOptional
clipOptional
clipOptional
color?: stringOptional
colorOptional
colorOptional
colorOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columns?: stringOptional
contain?: stringOptional
containOptional
containOptional
containOptional
containOptional
containOptional
container?: stringOptional
containerOptional
containerOptional
content?: stringOptional
contentOptional
counterOptional
counterOptional
counterOptional
cssOptional
cssOptional
cursor?: stringOptional
cx?: stringOptional
cy?: stringOptional
d?: stringOptional
direction?: stringOptional
display?: stringOptional
dominantOptional
emptyOptional
fill?: stringOptional
fillOptional
fillOptional
filter?: stringOptional
flex?: stringOptional
flexOptional
flexOptional
flexOptional
flexOptional
flexOptional
flexOptional
float?: stringOptional
floodOptional
floodOptional
font?: stringOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
forcedOptional
gap?: stringOptional
grid?: stringOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
height?: stringOptional
hyphenateOptional
hyphens?: stringOptional
imageOptional
imageOptional
inlineOptional
inset?: stringOptional
insetOptional
insetOptional
insetOptional
insetOptional
insetOptional
insetOptional
isolation?: stringOptional
justifyOptional
justifyOptional
justifyOptional
Readonly
length?: numberOptional
letterOptional
lightingOptional
lineOptional
lineOptional
listOptional
listOptional
listOptional
listOptional
margin?: stringOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marker?: stringOptional
markerOptional
markerOptional
markerOptional
mask?: stringOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
mathOptional
mathOptional
maxOptional
maxOptional
maxOptional
minOptional
minOptional
minOptional
minOptional
mixOptional
objectOptional
objectOptional
offset?: stringOptional
offsetOptional
offsetOptional
offsetOptional
offsetOptional
offsetOptional
opacity?: stringOptional
order?: stringOptional
orphans?: stringOptional
outline?: stringOptional
outlineOptional
outlineOptional
outlineOptional
outlineOptional
overflow?: stringOptional
overflowOptional
overflowOptional
overflowOptional
overflowX?: stringOptional
overscrollOptional
overscrollOptional
overscrollOptional
overscrollOptional
overscrollOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
page?: stringOptional
pageOptional
pageOptional
pageOptional
paintOptional
Readonly
parentOptional
perspective?: stringOptional
perspectiveOptional
placeOptional
placeOptional
placeOptional
pointerOptional
position?: stringOptional
printOptional
quotes?: stringOptional
r?: stringOptional
resize?: stringOptional
rotate?: stringOptional
rowOptional
rubyOptional
rx?: stringOptional
ry?: stringOptional
scale?: stringOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollbarOptional
scrollbarOptional
scrollbarOptional
shapeOptional
shapeOptional
shapeOptional
shapeOptional
stopOptional
stopOptional
stroke?: stringOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
tabOptional
tableOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
touchOptional
transform?: stringOptional
transformOptional
transformOptional
transformOptional
transition?: stringOptional
transitionOptional
transitionOptional
transitionOptional
transitionOptional
transitionOptional
translate?: stringOptional
unicodeOptional
userOptional
vectorOptional
verticalOptional
visibility?: stringOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
whiteOptional
whiteOptional
widows?: stringOptional
willOptional
wordOptional
wordOptional
wordOptional
writingOptional
x?: stringOptional
y?: stringOptional
zOptional
zoom?: stringOptional
overlayOptional
contentOptional
custom
MediaSettingsModal - Modal for selecting audio/video devices and virtual backgrounds
Component
Description
Provides device selection controls for camera, microphone, and audio output. Includes camera switching (front/back), device dropdown selectors, and virtual background access.
Supports three levels of customization:
Key Features:
Example
Basic Usage:
Example
Style Customization:
Example
Custom Template Override:
Selector
app-media-settings-modal
Standalone
true
Imports
CommonModule, FontAwesomeModule, FormsModule
Input
isMediaSettingsModalVisible - Whether the modal is currently visible. Default:
false
Input
onMediaSettingsClose - Callback function to close the modal. Default:
() => {}
Input
switchCameraOnPress - Function to switch front/back camera. Default:
switchVideoAltService.switchVideoAlt
Input
switchVideoOnPress - Function to switch video input device. Default:
switchVideoService.switchVideo
Input
switchAudioOnPress - Function to switch audio input device. Default:
switchAudioService.switchAudio
Input
parameters - Object containing videoInputs, audioInputs, default devices, and update functions. Default:
{}
Input
position - Modal position on screen ('topRight', 'center', etc.). Default:
'topRight'
Input
backgroundColor - Background color of the modal content. Default:
'#83c0e9'
Input
overlayStyle - Custom CSS styles for the modal overlay backdrop. Default:
undefined
Input
contentStyle - Custom CSS styles for the modal content container. Default:
undefined
Input
customTemplate - Custom TemplateRef to completely replace default modal template. Default:
undefined
Method
ngOnInit - Initializes component, sets up default services, and ensures default device selections
Method
ngOnChanges - Updates modal settings when visibility or parameters change
Method
setupDefaultServices - Configures default device switching services if not provided
Method
updateParameters - Refreshes parameters from getUpdatedAllParams
Method
ensureDefaultSelections - Sets default selected devices if none selected
Method
initializeModalSettings - Initializes selected device states
Method
handleSwitchCamera - Handles front/back camera toggle
Method
handleVideoSwitch - Handles video device selection change
Method
handleAudioSwitch - Handles audio device selection change
Method
handleModalClose - Closes modal via onMediaSettingsClose callback
Method
showVirtual - Opens virtual background modal
Method
getCombinedOverlayStyle - Merges default and custom overlay styles
Method
getCombinedContentStyle - Merges default and custom content styles
Method
modalContentStyle - Returns computed content styles with positioning