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....
There was a problem hiding this comment.
En effet, ne fait pas attention a cela pour le moment,
Tu pourras l'implémenter si tu veux aller plus loin dans angular ensuite mais c'est plus avancé. c'est une directive pour typer student.
|
|
||
| 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
| export class CardComponent implements OnInit { | ||
| 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
| readonly type = input.required<CardType>(); | ||
| readonly customClass = input(''); | ||
|
|
||
| CardType = CardType; |
| 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 💪 |
There was a problem hiding this comment.
@tomalaforge J'ai enfin terminé le challenge, mais j'ai suivi la réponse d'Arthur Lannelucq sur YouTube, sinon j'aurai tourné en rond et il faut que je passe à un autre challenge. Je vais bien sûr revoir le code afin de bien comprendre le concept, qui en soit n'est pas compliqué. Il faut forger pour devenir forgeron. Ce challenge n'était pas si facile que ça rétrospectivement.
|
@allan1989 Super travail et c'est tres bien que tu ne regardes pas les solutions avant d'essayer et en effet, ce challenge n'est pas tres facile. Faudrait que le change de catégorie. |
|
et n'hésite pas si tu as des questions. Je peux y répondre. |
This reverts commit 8b837ce. Code pushed on wrong branch :wq :wq
|
This pull request is stale because it has been open for 15 days with no activity. |
|
This pull request was closed because it has been inactive for 5 days since being marked as stale. |
2 participants
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?