Angular 6: use the value of an @Input within an ngOnInit

Question

I'd like to retrieve the value of the model car by using an input, but I'm not sure of how it works. Here's what I've tried.

@Input() model : Car
car: Car;

    ngOnInit() {
        this.car= this.carService.getcar(model.id);
      }

Unfortunetaly model is always empty.How can I do?

EDIT: Parent HTML

 <app-model
        [model]="car">
  </app-model>

PARENT ts file

ngOnInit{
  this.shopService.get()
        .pipe(
          take(1),
          finalize(() => {
                    })
              )
         .subscribe(result => {
              this.car = result;
              });
          })
        )
 }

Answer 1

您必须使用@Input() （带有方括号）

Answer 2

In HTML of another component

<app-detail-component [model]="{id: 1, name: 'Carname'}"></app-detail-component>

In the .ts file of your described component (I assumed the name of the Component is DetailComponent.ts)

@Input() model: Car;
car: Car;

ngOnInit() {
     this.car= this.carService.getcar(model.id);
}

Link to official documentation: https://angular.io/guide/component-interaction

Answer 3

model is empty because variable car in parent component is assigned after ngOnInit is invoked in the child component. You need to call a method of carService in ngOnChanges , not ngOnInit .

@Input() model: Car
car: Car;

ngOnChanges() {
  this.car = this.carService.getcar(model.id);
}