I'm tackling what seems like a simple task, but I'm struggling to figure it out. My issue is this: How can I successfully pass a variable from @Input to a service in an Angular2 component? (Code has been simplified)
This is my current component setup:
import { Component, Input } from '@angular/core';
import { CMSService } from '../cms.service';
@Component({
selector: 'cmstext',
templateUrl: './cmstext.component.html',
styleUrls: ['./cmstext.component.css']
})
export class CMSTextComponent {
constructor(private cms: CMSService) { }
@Input() id : string;
content = this.cms.getContent(this.id); // since this.id is NULL, content is also NULL
}
Below is the service being used:
import { Injectable } from '@angular/core';
@Injectable()
export class CMSService {
constructor() { }
getContent(textId:string) : string {
this.text = textId; // as textId is NULL, this.text returns NULL
return this.text;
}
}
Here's how my component template is set up:
<p>id: {{id}}</p>
<p>Content: {{content}}</p>
When
<cmstext id="4"></cmstext>id: 4
content:
I'm new to Angular2 and any assistance or recommendations would be greatly appreciated!