2

I am trying to use an input that i sent by appcomponent to my select component.

I need to use the value in my class. The problem that it hasn't been identified on my class but when i put it in the template i can see it.

For example in this component:

import {Component, Input} from 'angular2/core';
@Component({
selector: 'test',
template: "<h4>test 1 {{test_input}}</h4>   <br>" 
})
export class TestComponent {
private test_test;

@Input() test_input: string;
}

I need to use test_input for example to modify it.

Improve this question

4 Answers 4

Reset to default
2

The input isn't set before ngOnInit() is called. Move your code to this method 

export class TestComponent {
  private test_test;

  @Input() test_input: string;

  ngOnInit() {
    console.log(this.test_input);
  }
}

and it will do what you expect.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

it's good but the problem that i need to change it everytime the typeahead change and the onInit works only on initialising the component so i need to find a solution to detect the change on the other component and reload the second component
You can either use a setter as demonstrated by @MarkRajcok or the ngOnChanges() lifecycle method demonstrated by @micronyks.
i wasn't so clear i will put the code maybe it will explain what isaid
In that case you might want to add an @Output() someEvent, then you can subscribe to someEvent events like <test (someEvent)="doSomething()">. Not sure though if this is what you want.
i added an answer i hope i explain better the problem
|
1

i need to use test_input for example to modify it

If you need to modify the value whenever a value change is propagated to the TestComponent, use a setter:

@Input() set test_input(newValue: string) { ... }

This is discussed in the Component Interaction cookbook, the Intercept input property changes with a setter example.

Improve this answer

Comments

1

You can even check current and previous value of test_testvariable.

export class TestComponent {

  @Input() test_test:string;

  ngOnChanges(...args: any[]) {
        console.log('onChange fired');
        console.log(args[0].test_test.currentValue);
        console.log(args[0].test_test.previousValue)
  }

  ngOnInit() {
    console.log(this.test_input);
  }
}
Improve this answer

Comments

1

this is my ngselect component 

@Component({
selector: 'select-test',
template: `<ng-select [allow-clear]="true"
            [items]="items"
            [disabled]="disabled"
            (data)="refreshValue($event)"
            (selected)="selected($event)"
            (removed)="removed($event)"
            (typed)="typed($event)"
            [placeholder]="'No city selected'"></ng-select> {{dslam}}`,
directives: [Select, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox]
})
export class SelectComponent {
private value: any = {};
//private items:Array<string> = [];
@Output() selected_value = new EventEmitter();
@Input() dslam: any;
private _disabledV:string = '0';
private disabled:boolean = false;
private items: Array<string> = [];
constructor(){
  this.items = this.dslam;
}

so what i need is to put my input "dslam" which is an array into "items" everytime i change it with my typeahead (which i have the input dslam) the problem that when i change it i can see that it changes but i didn't find the solution to change my array on my select i hope i was clear

Improve this answer

1 Comment

Please don't write follow-ups as answer. Please edit your question and add this to your question and delete this answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.