I've been experimenting with Angular2 and recently created a component called appmenu using angular cli.
The code in appmenu.html looks like this:
<ul>
<li (click)="menuitem1()">Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
Now, I want to retrieve the value of testvariable in app.component.html. However, I'm unsure about what needs to be done in my app.component.ts.
Here is the content of appmenu.ts: import { Component, OnInit } from '@angular/core';
import { Injectable } from '@angular/core';
@Component({
providers: [AppMenuService], // ERROR OCCURS HERE
selector: 'app-appmenu',
templateUrl: './appmenu.component.html',
styleUrls: ['./appmenu.component.css']
})
export class AppmenuComponent implements OnInit {
public testvariable = "1st";
public data: any;
// constructor(private sharedData: AppMenuService) { }
ngOnInit() {
// this.data = this.sharedData.data;
// console.log(this.data);
}
menuitem1(){
console.log("Menu item 1 clicked");
}
}
Additionally, here is the code for appmenu.service.ts:import { Injectable } from '@angular/core';
@Injectable()
export class AppMenuService{
public data: any;
constructor() {
this.data = 'Lorem ipsum dolor sit.';
}
}
A problem arises in appmenu.component.ts where it references providers: [AppMenuService]. The error message says it cannot find the name AppMenuService.