When it comes to passing a string parameter to my component, I need the flexibility to adjust the parameters of services based on the passed value. Here's how I handle it: In my index.html, I simply call my component and pass the required parameter.
<top [mode]="tree">Loading...</top>
To enable this functionality in my component, I first import Input from angular2/core.
import {Input, Component, OnInit} from 'angular2/core';
Then, within my component's class, I declare an input property for the mode.
@Input() mode: string;
However, when I attempt to access the passed parameter ('tree') using console.log(), I find that it's coming up as undefined.
console.log(this, this.mode);
https://i.stack.imgur.com/mHNPN.jpg
If you're interested in seeing the complete code snippet for the component file:
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {Input, Component, OnInit} from 'angular2/core';
import {ParticipantService} from '../services/participant.service';
import {orderBy} from '../pipes/orderby.pipe';
@Component({
selector: 'top',
templateUrl: 'dev/templates/top.html',
pipes: [orderBy],
providers: [HTTP_PROVIDERS, ParticipantService]
})
export class AppTopComponent implements OnInit {
constructor (private _participantService: ParticipantService) {}
errorMessage: string;
participants: any[];
@Input() mode: string;
ngOnInit() {
console.log(this, this.mode);
this.getParticipants('top3');
var self = this;
setInterval(function() {
self.getParticipants('top3');
}, 3000);
}
getParticipants(public mode: string) {
this._participantService.getParticipants(mode)
.then(
participants => this.participants = participants,
error => this.errorMessage = <any>error
);
}
}