The properties of components you create can only be used in this component inside, such as:

export class RecipeListComponent implements OnInit { recipes: Recipe[] = [ new Recipe(‘A Test Recipe’, ‘This is simple a test’, ‘https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg’), new Recipe(‘A Test Recipe’, ‘This is simple a test’, ‘https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg’) ]; constructor() { }
ngOnInit(): void { }
}

in the html file, you can use recipes property, however, you can not use data property binding in the selector “app-recipe-list” in its parent component, such as <app-recipe-list [recipes] = “xxx”></app-recipe-list>, because the properties only can be used inside this component.

In order to use it in its parent component, you have to tell angular this property could do data banding by using @input() decorator in front of recipes property, such as

export class RecipeListComponent implements OnInit { @Input() recipes: Recipe[] = [ new Recipe(‘A Test Recipe’, ‘This is simple a test’, ‘https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg’), new Recipe(‘A Test Recipe’, ‘This is simple a test’, ‘https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg’) ]; constructor() { }
ngOnInit(): void { }
}

Right now, you can use property binding in its parent component, however, you have to use the exactly property name in this component, that means you have to use [recipes] to bind the data. If you don’t want to use the same name in this component, you can assign alias name to it in the decorator @Input(‘alias name’) recipes, and then you can bind the data using the new property name in its parent component. such as<app-recipe-list [myRecipes] = “xxx”></app-recipe-list>

export class RecipeListComponent implements OnInit { @Input(‘myRecipes’) recipes: Recipe[] = [ new Recipe(‘A Test Recipe’, ‘This is simple a test’, ‘https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg’), new Recipe(‘A Test Recipe’, ‘This is simple a test’, ‘https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg’) ]; constructor() { }
ngOnInit(): void { }
}

If you want to transfer data from child component to parent component, you have to define child property name with @Output() decorator and also EventEmitter instance, such as:

@Output() serverAdded = new EventEmitter<what type of data need to emit>() (such as: this.serverAdded.emit({key1: values1, key2: values,…});); also you need to use emit() function to emit data that will be listened by parent component

And then in parent component, you can use event data binding to get the data emitted from child component, such as:

<app-server (serverAdded)=’fuc($event)’></app-server>

Through call a function to get the data ($even carriers the data from child component)