crimson egret
Hi,
I am pretty new to web development, I have no idea if I am doing something wrong here.
In the video you can see that the text is getting rendered onto the new components filling up the div, even though if I check the html, it doesn't show there.
The first image is how I am sending the text into the textarea component (its the html of the card component)
The second image is the html of that textarea
vivid vale
What is being rendered is the placeholder you put on the textarea
which is a feature of html input elements
technically the placeholder is in the dom, but it's "hidden".
it's in the shadow dom where all the internal elements are
crimson egret
What is being rendered is the placeholder you put on the textarea
No the placeholder saying "Your own description here" is fine
What I mean is that the "hello" is being rendered when I refill the div with new card components
But when I look at it with the inspector it does not say "hello" inside the textarea tag
vivid vale
ah my bad. 
then you need to provide a bit more context how the cards are used in your components
can you show the part where you (probably) have the @for loop?
crimson egret
Oh yes yes for sure
vivid vale
what do you use for the trackBy?
crimson egret
I dont know what track is, I do not think I have used it
vivid vale
can you change the $index to spell and see if that already fixes it?
crimson egret
vivid vale
also, what does the dataService.getDataOfSpell(...) do?
calling functions in the html is generally a bad idea (for change detection reasons)
that should probably be done inside of the spell-card component so it doesn't re-execute the function each time the CD runs
crimson egret
I will have to give it a read haha 😅
crimson egret
also, what does the `dataService.getDataOfSpell(...)` do?
calling functions in t...
its calling to the service I have for getting the info from localstorage
vivid vale
I will have to give it a read haha 😅
basically what you can archieve with the track parameter, if the same data object moves from pos 1 to pos 2 in the list, angular doesn't need to recreate the html and just moves the html around
so if your data has some unique id, that would be something you can use
if you don't have that, the next best option is the object itself (what you do now), so it tracks by the object reference (object identity)
crimson egret
Oh so by tracking $index it was just doing that in the same position
vivid vale
yeah, it thinks the item didn't really change so some weird stuff was going on^^
vivid vale
its calling to the service I have for getting the info from localstorage
that's not too terrible then (compared to if it was doing http requests)
but i'd still encourage you do refactor that logic into the card component
you're already passing the spell in there anyways
so you probably have a spell = input.required<Spell>()
and could just add a personalData = computed(() => this.dataService.getDataOfSpell(this.spell()))
that way if the component is reused, it doesn't re-execute the function cause nothing changed
crimson egret
Yeah I am using @Input(), I imagine is the same?
vivid vale
is this an old application? if it isn't, use signal inputs
the decorators are still supported but are not the way to go anymore
you have worse type safety and are relying on lifecycle hooks to catch changes
crimson egret
Oh awesome thanks, I will check it out as well and change the decorators
vivid vale
may i ask where you got the @Input from?
crimson egret
I think I have been using the old documentation sometimes
vivid vale
oh, yeah. don't do that 
crimson egret
Hahaha yeah
I found certain stuff more explained in the old one, probably that
Well I will check it out too
vivid vale
if you see issues with the current docs there is this channel https://discord.com/channels/748677963142135818/762717176142495814
to mention missing pieces or just create a github issue
crimson egret
Awesome
I think I just didnt understand something
And I did in the old one but I dont remember what exactly atm
Oh I see is computed something you do with signals
vivid vale
yeah
i know reading docs is very dry and boring, but i'd highly recommend at least going through the essentials https://angular.dev/essentials
so you know what is available and then if you need more info go to the in-depth guides
not knowing something even exists is always the worst when learning a new language/framework 
crimson egret
Yeah I can see that now hahah
Thanks for the help, I will see if I can close this post as resolved
vivid vale
sure, no problem!
crimson egret
