CardComponent (duplication de code)

[maxdhn]

Template HTML de CategorieComponent :

      <div class="card m-4">
        <div class="hovereffect">
          <img class="img-responsive border border-dark col" src="assets/img/{{ categorie }}.jpg" alt="" />
          <div class="overlay">
            <h2 class="font-weight-bolder">{{ categorie }}</h2>
            <a class="info" (click)="categorieRest(categorie)" routerLink="profiles/establishments">Show restaurants</a>
          </div>
        </div>

Template HTML de ListEstablishmentComponent :

      <div class="card m-4">
        <div class="hovereffect">
          <img class="img-responsive border border-dark col" src="{{ establishment.medias[0]?.url }}" />

          <div class="overlay">
            <h2 class="font-weight-bolder">{{ establishment.name }}</h2>
            <a class="info btn btn-danger" [routerLink]="['/establishments/details', establishment._id]">See
              restaurant</a>
          </div>
        </div>
      </div>

Le code HMLT est très similaire donc création d'un component !!
Créer un component CardComponent qui mutualise les templates ci dessus.
Ajouter un @Input pour l'url de l'image, un @Input pour le nom, un @Input pour l'id de l’établissement. BONUS utiliser <ng-content> pour le contenu de <h2>.
Utiliser ce component dans ListEstablishmentComponent et CategorieComponent

[MartialBlot]

ok