Angular Bootstrap Carousel Multi Cards Dynamique Binding NgModel

Bonjour à tous,

Je débute en Angular, et je souhaiterais réaliser une application d'adoption de chatons qui permet de:

•Créer des chatons, via un formulaire, avec un nom, une race, une date de naissance, un lien vers une image pour la photo (les chatons sont ajoutés à la collection globale, quand ils sont créés); les trois infos sont obligatoires.

•Adopter un chaton, via un bouton adopter. Quand un chaton est adopté, il est ajouté à la liste des chatons de l'utilisateur. Etant donné que cette appli est un POC, on n'a pas besoin de faire de la rétention de données. Donc, même si quand on refresh, ça disparaît, ce n'est pas grave.

•L'action submit du formulaire qui ajoute le chaton à la collection

•L'action adopter qui retire le chaton de la collection globale et le place dans la collection de l'utilisateur

J'ai donc un composant père commun:
- app-racine
Ainsi que 3 composants fils:
- app-create-kitten ==> pour créer de nouveaux chatons
- app-list-kitten ==> la liste des chatons disponibles pour être adopter
- app-user-kitten ==> les chatons de l'utilisateur (un seul utilisateur, pas de BDD ni de connexion)

Mon but: Faire un carousel multi cards dynamique dans app-list-kitten et un autre dans app-user-kitten pour afficher respectivement la liste des chatons disponibles et ceux de l'utilisateur.
Mes problèmes:
- je n'arrive pas à afficher plusieurs cards dans le carousel.
- le binding (dynamique) ne semble pas marcher
- le bouton 'Adopt' est inactif dans la card (app-list-kitten) (si je fait une simple card en dur, le bouton fonctionne et la fonction sendAdoptedKittenToParent est bien appelée lors du submit)


J'ai déjà fait une bonne partie, voici le lien github avec mon projet complet:

https://github.com/praline40/Angular05_Kittens


En vous remerciant ! ;)