New with angular, I need some explanation about binding

[pastel bridge]

Hello Folks ! I am new with Angular and I am a bit confused about binding.

So I saw that it serve to link parent/ Children property to share to the children the properties via signals/ @Input, right ?

but I am a bit confused. On my tutorial the dev create an object in TS to define the properties of a "Monster" Object.

a playing-card is the "children" component as the app is the parent component

app --> Playing-card

the future purpose is to create severals differents Playing-card. (Each one a different Monster)

• so Monster properties are typed in Monster.model.ts (an extern file in app folder)
• in Playing-cards.ts the Monster object is instantiated in the component class
• in app.ts

export class App {
  monster1!: Monster;

  constructor(){
    this.monster1 = new Monster();
    this.monster1.name = "Pik"
    this.monster1.hp = 40;
    this.monster1.figureCaption = "N°004"
  }

and in app.html:

<div id="card-list">
    <app-playing-card/>
    <app-playing-card [monster] = "monster1"/>
</div>```


So I guess after in order to create several cards a JSON will be used and we just need to use a for loop in the app.html or in the constructor of the app class.

But I am not sure to understand everything:

- What is the binding definition with the [] around the property in the app html ?

- I am a bit confused with the TS why should we instantiated in the app constructor a monster1 ?

- how is working the compilation  as I declare an App class with a constructor ? the constructor allow to create the monster each time App is instantiated but when should App be instantiate ? when the DOM is generated ?
I miss the point.

Why in playingCard.ts so my card component I have to instantiate also a new Monster ?

```ts
export class PlayingCard {
  @Input() monster : Monster = new Monster();
}```

Thanks in advance for your feedback.

Sorry it's a bit the mess... 😅

[lilac ocean]

Your tutorial seems outdated (it still uses @Input) and doesn't seem to use best practices. I strongly encourage you to read something more up-to-date and reliable, like the official Angular documentation.

[golden ruin]

app is the startup component. You can see it as bootstrap in app.config.ts.
app needs to display Playing-card, so it creates an instance of the Playing-card component.
Like any object, the constructor is called upon creation.
And the monster1 variable is constructed.

monster1 is constructed in app and passed as an input parameter of the child component PlayingCard)

This way, playyingCard displays the card it receives.
The parent can send it any card that follows the Monster model.

You can create a Monster model Array by hand or retrieve a Monster model Array via an http request.

[pastel bridge]

It date from 1 year ago. I will read the documentation too thanks

[pastel bridge]

Thanks for your answer. I am not front of my computer so I will check tomorrow morning what you said. Thanks a lot

[pastel bridge]

Ok so Monster 1 is created via the App'sconstructor and shared in Playing card component via input in app.html.

[pastel bridge]

I watched just right now the documentation and saw the signal method. I guess he will talk about it in my tutorial because he spelled the "signals" and "input" before". So I guess it's not bad to see the previously method. In case I work on legacy code by exemple.

and I guess in fact you declare all the dynamic activity of the component in it's own class in component.ts

[golden ruin]

"shared in Playing card component via input in app.html."

app.html (here you are in app.html

 <app-playing-card 
      [monster] = "monster1"     :: HERE   YOU PASS MONSTER1 TO PLAYING CARD
  />

and playing card receveid monster1 via @input(), it's easy
it is a parent-child communication

[pastel bridge]

ok so [] is like to say "This property's value will be given by the parent" and then you pass the parent's variable name as the value ?

[lilac ocean]

You don't pass a parent's variable name. You pass an Angular expression, which must be of the appropriate type. In Angular expressions, variables (such as monster1) refer to properties of the current component. But you could have something like

monsters = {
  big: new Monster(),
  small: [
    new Monster(),
    new Monster()
  ]
}

and use, in your template:

Big monster: <app-playing-card [monster]="monsters.big" />
First small monster: <app-playing-card [monster]="monsters.small[0]" />
Second small monster: <app-playing-card [monster]="monsters.small[1]" />