I've been diving into Traversy Media's Angular crash course recently. However, I've hit a roadblock that I just can't seem to get past. The problem arises when trying to style the button using a specific method. Every time I save and pass these changes onto the local server, an error prevents me from progressing further. Even after deleting and reloading, the issue persists, forcing me to restart the entire project.
File Header: header.component.html
<header>
<h1>{{ title }}</h1>
<app-button color="green" text="Add"></app-button>
</header>
File Requiring Changes: button.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-button',
templateUrl: './button.component.html',
styleUrls: ['./button.component.css']
})
export class ButtonComponent implements OnInit {
/* Adding these breaks the program */
@Input() text: string;
@Input() color: string;
constructor() { }
ngOnInit(): void {
}
}
It seems like there's a crucial element that I'm overlooking. In VS Code, the issue is supposedly near the comment section. Just to clarify, those comments aren't present in the actual code – they're simply placeholders to indicate where the inputs should be placed.
It almost feels as if the color and text properties are nonexistent or undefined.