1

I have an Angular CLI component that contains an array of strings "searchResult":

export class ParentComponent implements OnInit {

  mockArray: string[] = [];
  searchString: string = '';
  searchResult: string[] = [];

  constructor(private service: SomeService) {
  }

  ngOnInit(): void {
    this.mockArray = this.service.getArray();
  }

  onKeyDown() {
    if (this.searchString.length > 2) {
      this.searchResult = this.mockArray.filter(symptom =>
        symptom.includes(this.searchString)
      )
    }
  }
}

In this component, I re-assign the result of the filter method executed on another string-array to the searchResult. In its html template, I want to pass it down to a child component:

<child-component searchResult="{{searchResult}}"></child-component>

And in the child component, I receive the variable via an @Input() declaration:

export class ChildComponent {

  @Input() searchResult: string[] = [];

}

However, on ng serve, I receive an error regarding the line in the html template of the parent componment:

error TS2322: Type 'string' is not assignable to type 'string[]'

I receive this error despite both variable being an array of strings and not just a string.

Edit: I just found out, for some reason the filter method returns a string of all the items passing the condition, instead of an array of these items. However, the original array "mockarray" that I call filter() on looks like this:

  [
    'elevated midi-chlorian count',
    'low self-esteem',
    'urge to flip a table',
    'headache',
    'sore feet',
    'loss of smell',
    'hearing voices',
    'pain in sole of the feet',
    'breathlessness',
    'shortness of breath',
    'difficulty breathing',
    'respiratory distress',
    'pain in knee',
    'stiff finger joints',
    'back pain'
  ];
1
  • 1
    <child-component [searchResult]="searchResult"></child-component> is how you pass data Commented Sep 28, 2021 at 10:26

2 Answers 2

1

Try using Attribute Bindinng insted of string interpolation:

<child-component [searchResult]="searchResult"></child-component>
Sign up to request clarification or add additional context in comments.

Comments

0

You should pass searchResult to child-component like below

<child-component [searchResult]="searchResult"></child-component>

I think it's better to read the ng doc too

https://angular.io/guide/inputs-outputs

Comments

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.