Answer:1 [IN PROGRESS] #1312
Answer:1 [IN PROGRESS] #1312
Conversation
github-actions
bot
added
1
| customClass="bg-light-green" /> | ||
| customClass="bg-light-green"> | ||
| <img ngSrc="assets/img/student.webp" width="200" height="200" /> | ||
| </app-card> |
There was a problem hiding this comment.
the goal is to handle all the logic in the parent. You should not input the store. Very bad practise to have a service as an input.
your html structure should look like:
<app-card // handle input and output>
// project image
<ng-template [cardRow]="students()" let-student>
<app-list-item (delete)="">
// project content
</app-list-item>
</ng-template>
</app-card>
```There was a problem hiding this comment.
@tomalaforge Qu'est-ce que [cardRow]=students() ? Est-ce un input ? A part les variables locales, je ne vois pas d'autres attributs possibles sur un ng-template....
|
|
||
| students = this.store.students; | ||
| cardType = CardType.STUDENT; | ||
| deleteItem = output<Event>(); |
There was a problem hiding this comment.
Q: why do you have an output in your parent?
| <img ngSrc="assets/img/student.webp" width="200" height="200" /> | ||
| } | ||
|
|
||
| <ng-content select="img"></ng-content> |
| <section> | ||
| @for (item of list(); track item) { | ||
| <app-list-item | ||
| (deleteItem)="onDeleteItem($event)" |
There was a problem hiding this comment.
learn how to use a templateOutlet
| private teacherStore = inject(TeacherStore); | ||
| private studentStore = inject(StudentStore); | ||
| private injector = inject(Injector); |
There was a problem hiding this comment.
Q: why do you need the injector
| private teacherStore = inject(TeacherStore); | ||
| private studentStore = inject(StudentStore); | ||
| private injector = inject(Injector); | ||
|
|
||
| readonly list = input<any[] | null>(null); | ||
| readonly type = input.required<CardType>(); | ||
| readonly customClass = input(''); | ||
|
|
||
| CardType = CardType; |
| private teacherStore = inject(TeacherStore); | ||
| private studentStore = inject(StudentStore); | ||
| private injector = inject(Injector); | ||
|
|
||
| readonly list = input<any[] | null>(null); |
There was a problem hiding this comment.
type your data as much as possible
| onDeleteItem(id: number) { | ||
| console.log('id', id); | ||
| // Comment invoquer le store de chaque card sans faire de boucle ? | ||
| // Je passe le StudentStore en input mais n'arrive pas à l'invoquer |
There was a problem hiding this comment.
you have the answer, don't pass it as an input 😉
|
|
||
| .bg-light-green { | ||
| background-color: rgba(0, 250, 0, 0.1); | ||
| } |
There was a problem hiding this comment.
you should not put anything in the global stylesheet. It will get too big.
Try to put everything at component level.
|
That's a good start, and I like the fact that you are trying to find the solution without looking at the other solution. This is how you will understand what you do and you will get better. You should look at how to use good luck Looking forward your second try 💪 |
Answer:1
Utilisation de , input() et output().
Déplacement des styles css dans le fichier global styles.scss (est-ce bon ?)
Problème:
Comment invoquer le store de chaque card sans utiliser de conditions dans CardComponent?