Question: In my search bar which is on the folder `book.index.blade.php` I would like to do a search on the `name` of my table `authors` or the field `code` of my table `bookcases`.

[![enter image description here](https://i.stack.imgur.com/BvoY5.png)](https://i.stack.imgur.com/BvoY5.png)

So far, I know to do a search on the field `name` of my table `authors`.
My problem is how to do also the request with the field `code` of my table `bookcases` ? I don't know the syntax... 
I am novice. 

```
public function index(Request $req) 
{
    if ($req->search == "") {
          $books = Book::paginate(5);
          return view('admin.books.index', compact('books'));

    } else {

            $validated = $req->validate([
                'search' => 'alpha', 
            ]);

   $books = Book::whereHas('authors', function($query) use($req) {
            $query->where('name', 'like', '%' . $req->search . '%');
        })->paginate(5);
  return view('admin.books.index', compact('books'));
  }

}

```

Answer: 
Your component initialization logic should live in `ngOnInit().` Since your parent component has some asynchronous logic in its own `ngOnInit()` you'll then want to prevent your `app-reserva` component from being created until you have all the data you need.

**paquete-detalle.component.ts**

```
nombre: string = null;
precio: number = null;

ngOnInit() {
const id = this.activatedRoute.snapshot.paramMap.get('id');
  this.fs.getPaqueteObject(id).valueChanges().subscribe(paquete => {
    this.nombre = paquete.nombre;
    this.precio = paquete.precio;
  });
}

```

**paquete-detalle.component.html**

```
{{nombre}} {{precio}} //All good with these values, if they are printed.
<app-reserva *ngIf="precio && nombre" [precio]="precio" [nombre]="nombre"></app-reserva>    

```

**reserva.component.ts** 

```
@Input() precio: number;
@Input() nombre: string;

constructor( private fs: FirebaseService, private fb: FormBuilder, ) {
}

ngOnInit() {
  this.forma = fb.group ({
    nombre: [ this.nombre ],
    precio: [ this.precio ],
  });
  console.log(this.precio, this.nombre);
}

```

[This answer here](https://stackoverflow.com/a/35763811/821918) does a good job explaining the difference between `constructor` and `ngOnInit`.

The reason your child component is still initializing an empty form is because your child component was created before the parent component finished executing the callback in `this.fs.getPaqueteObject(id).valueChanges().subscribe()`. With this approach your `reserva.component.ts` won't be rendered until your parent component finishes getting all the data the child needs.

This is just one approach, you can also look into [OnChanges](https://angular.io/api/core/OnChanges) to make your child component react when the `@Input()` values change or [Resolvers](https://angular.io/api/router/Resolve) to load data into the route before the component loads.
Stackblitz - <https://stackblitz.com/edit/angular-9d3bu4-so-56527061>

Make sure the parent has defined the `precio` and `nombre` that you are passing (via one way binding) when you use `<app-reserva [precio]="precio" [nombre]="nombre"></app-reserva>`

***app.component.ts***

```
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  precio = 24.50;
  nombre = "boots"
}

```

***app.component.html***

```
<app-reserva [precio]="precio" [nombre]="nombre"></app-reserva>

```