Using components Angular using TypeScript

Question

Situation:

• I have a "main page" where we can see books that are in stocks.
• "Main page" and blue box in the picture are the same component.
• I also have a component called "search".

Wanted result:

• I would like to use the "Search" comp. (green box) inside "main page".
• I'd like to allow for the user to input information in the search box and display the result in the "main page" (Blue box).

Question:

How would one approach this situation? I've read a little about some type pf parent/child solution - but I dont feel as I quite understand how that would work in my case.

PS. If anyone feels as the question is not accurate enough - you may change it!

Answer 1

1. You should add an output for the search component

@Output() search: string;

2. You should bind it to the search component template

<app-search (search)="searchStr = $event"></app-search>

3. You should use searchStr to filter the list (this you can write a function to it - for example by name)

get displayList() {
    return this.list.reduce((sum, value) => {
        if (value.name.substring().indexof(this.searchStr.substring()) > -1) {
            sum.push(value);
        }
        return sum;
    }, []);
}

4. Now display the list

<ul>
    <li *ngFor="let item of displayList">{{ item.name }}</li>
</ul>

Hope this help