Angular 2. Pass parameter to a component

Question

I would like to pass a string parameter to my component. Depending on passing parameter i will pass different parameters for services in my component. I do next: In index.html call my component, passing parameter.

<top [mode]="tree">Loading...</top>

In my component i include Input from angular2/core

import {Input, Component, OnInit} from 'angular2/core';

In my component`s class i declare an input

@Input() mode: string;

And with console.log() i try to catch my passing parameter of 'tree', but it`s undefined.

console.log(this, this.mode);

The full code of a 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
            );
    }

}

Don't do these things in your root component. Its purpose is just to hold the app, not to be used as a component itself. Start from the first child component and you'll avoid all those ugly workarounds. — Eric Martinez, Feb 22 '16 at 12:37

score 6 · Answer 1 · edited May 23 '17 at 11:46

6

When you use [...], the value you provide corresponds to an expression that can be evaluated.

So tree must be something that exists in the parent component and correspond to a string.

If you want to use the string tree, use this:

<top mode="tree">Loading...</top>

You can notice that such parameters can't be used for root component. See this question for more details:

Angular 2 input parameters on root directive

edited May 23 '17 at 11:46

Community

1
1

answered Feb 22 '16 at 12:11

Thierry Templier

198,364
44
396
360

Don't you want to use: [mode]="treee" – nicolas.leblanc Nov 21 '16 at 20:26

score 2 · Answer 2 · answered Feb 22 '16 at 12:18

2

As a workaround for the limitation Thierry explained you can use

constructor(private _participantService: ParticipantService, 
    elRef:ElementRef) {
  this.mode=elRef.nativeElement.getAttribute('mode');
}

answered Feb 22 '16 at 12:18

Günter Zöchbauer

623,577
216
2,003
1,567

score 1 · Answer 3 · answered Sep 07 '17 at 13:50

you need to wait until template is bound to DOM. in order to do this, you have to implement AfterViewInit

    export class AppTopComponent implements AfterViewInit{

    public ngAfterViewInit() {
        console.log(this, this.mode);
        this.getParticipants('top3');
        var self = this;
        setInterval(function() {
            self.getParticipants('top3');
        }, 3000);
    }
   }

Angular 2. Pass parameter to a component

3 Answers3