Attempting to verify the functionality of my button by logging a message on the developer console. However, upon clicking the button, the text does not appear in the console.
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-button',
standalone: true,
imports: [CommonModule],
templateUrl: './button.component.html',
styleUrl: './button.component.css',
})
export class ButtonComponent {
@Input() text!: string;
@Input() color!: string;
@Output() btnClick = new EventEmitter();
onClick() {
this.btnClick.emit();
}
}
<button
[ngStyle]="{ 'background-color': color }"
class="btn"
(click)="(onClick)"
>
{{ text }}
</button>
<header>
<h1>{{ title }}</h1>
<app-button
color="green"
text="Add"
(btnClick)="toggleAddTask()"
></app-button>
</header>
import { Component } from '@angular/core';
import { ButtonComponent } from '../button/button.component';
@Component({
selector: 'app-header',
standalone: true,
templateUrl: './header.component.html',
styleUrl: './header.component.css',
imports: [ButtonComponent],
})
export class HeaderComponent {
title: string = 'Task Tracker';
toggleAddTask() {
console.log('Toggleee Toggleee');
}
}
Striving to confirm the operability of my button through console output verification.