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.
The values passed by Input() are not available in the constructor since they are not yet passed to the child.
Consider building your form in the ngOnInit() method and you should be good to go !