Angular removing an @Input decorator from code

Question

I'm writing code for a class on Angular, and cannot understand why pulling the @Input decorator from my component is causing the entire application not to load.

import { Component, OnInit, Input } from '@angular/core';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';

import { Params, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';


@Component({
  selector: 'app-dishdetail',
  templateUrl: './dishdetail.component.html',
  styleUrls: ['./dishdetail.component.scss']
})
export class DishdetailComponent implements OnInit {

  @Input()
  dish: Dish;

  constructor(private dishservice: DishService,
    private route: ActivatedRoute,
    private location: Location) { }

  ngOnInit() {
    let id = +this.route.snapshot.params['id'];
    this.dish = this.dishservice.getDish(id);
  }

}

The input component isn't used anywhere else in the application, and as far as I can tell its not that strongly related even to this component, so can anyone explain why it is that when I remove that decorator, it breaks my program?

Is there no parent component using the input? As in trying to pass the dish in when it uses the app-dishdetail selector? — Tony_89, Jun 06 '18 at 21:51
Possible duplicate of [Angular2 RC5: Can't bind to 'Property X' since it isn't a known property of 'Child Component'](https://stackoverflow.com/questions/38960141/angular2-rc5-cant-bind-to-property-x-since-it-isnt-a-known-property-of-chi) — P.S., Jun 06 '18 at 21:54
Possible duplicate of [How can I debug my JavaScript code?](https://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — baao, Jun 06 '18 at 21:55
No need to edit your title or question to announce that it's solved (that's what accepted answers are for). I rolled back your edit, accordingly. — David Makogon, Jun 08 '18 at 17:51

score 2 · Accepted Answer · answered Jun 06 '18 at 21:52

2

If you would just open your browser's console, you would see the big fat error message, saying something like

Can't bind to 'dish' since it isn't a known property of 'app-dishdetail'

Additionally, the error message tells you exactly where you try to bind to dish.

answered Jun 06 '18 at 21:52

baao

71,625
17
143
203

Thanks. I got so hung up on using the cli errors, I didnt think to look at the developer console. There was a parameter being bound with the click event elsewhere (which was removed) that didn't have a place to get its parameter. When I removed that line from the separate component, it solved the problem. Thanks for the help – Gregers Walker Jun 08 '18 at 17:22

Angular removing an @Input decorator from code

1 Answers1