I've exhaustively researched and attempted all available options to no avail. Specifically, I have a button designed to switch between light and dark modes by toggling a boolean value passed to the parent component to alter the background color of the webpage. Here's what I'm working on:
Child
This is the HTML file:
<mat-toolbar class="mat-elevation-z5" color="primary">
<h1 class="first">firstName</h1><h1 class="second">SecondName</h1>
<button class="dark-mode" *ngIf="isLight" matTooltip="Bit too bright?" matTooltipPosition="before" (click)="changeMode()"><mat-icon>brightness_low</mat-icon></button>
<button class="light-mode" *ngIf="isDark" matTooltip="Bit too dark?" matTooltipPosition="before" (click)="changeMode()"><mat-icon>brightness_high</mat-icon></button>
</mat-toolbar>
This is the TypeScript (.ts) file:
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
@Output() isDarkMode = new EventEmitter<boolean>();
isLight: boolean;
isDark: boolean;
ngOnInit() {
this.isDark = false;
this.isLight = true;
}
changeMode(){
if(this.isDark) {
this.isDarkMode.emit(false);
this.isLight = true;
this.isDark = false;
} else {
this.isDarkMode.emit(true);
this.isLight = false;
this.isDark = true;
}
}
}
Parent
<main (isDarkMode)="isDarkMode($event)"></main>
This is the TypeScript (.ts) file for the parent:
import { Component, EventEmitter } from '@angular/core';
import * as jQuery from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
isDarkMode(event: boolean) {
console.log(event);
}
}
The issue I'm facing is that my console.log statement isn't being displayed, suggesting that the event isn't being emitted as expected?
Any assistance would be greatly appreciated. I don't believe I'm overlooking anything obvious...
Thanks