I currently have a navbar set up with the following code:
<mdb-navbar SideClass="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar py-0 navbar-dark lunada-gradient" [containerInside]="false">
Is there a way for me to modify the lunada-gradient property from a different component, specifically the customizer in this case? Here's an example of how it can be done:
<div class="col">
<span class="deep-space-gradient d-block rounded-circle" style="width:20px; height:20px;"
data-bg-color="deep-space-gradient" [ngClass]="{'selected': selectedBgColor === 'deep-space-gradient'}"
(click)="changeNavbarBgColor('deep-space-gradient')">
</span>
</div>
The Customizer Component:
selectedBgColor: string = 'lunada';selectedBgColor: string = 'lunada';
options = {
bgColor: 'lunada-gradient',
layout: 'light'
};
constructor(
private layoutService: LayoutService,
) {
this.layoutSub = layoutService.customizerChangeEmitted$.subscribe(
options => {
if (options) {
if (options.bgColor) {
this.selectedBgColor = options.bgColor;
}
}
}
);
}
changeNavbarBgColor(color) {
this.selectedBgColor = color;
this.options.bgColor = color;
this.layoutService.emitCustomizerChange(this.options);
}
options = {
bgColor: 'lunada-gradient',
layout: 'light'
};
changeNavbarBgColor(color) {
this.selectedBgColor = color;
this.options.bgColor = color;
this.layoutService.emitCustomizerChange(this.options);
}