role.component.html

<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
    <div class="piece-attach piece-attach-left-top"></div>
    <div class="piece-attach piece-attach-right"></div>
    <div class="piece-attach piece-attach-left-bottom"></div>

    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
        <mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
    </div>

    <div class="piece-form">
        <div class="piece-form-title">Rôle 1</div>
        <div class="piece-form-intitule">
            <label for="intitule">Intitulé</label>
            <input name="intitule" type="text" placeholder="Développeur/euse web"/>   
        </div>
        <div class="piece-form-name">
            <label for="name">Nom de la quête</label>
            <input name="name" type="text" placeholder="Intégration de site web"/>   
        </div>
        <div class="piece-form-objective">
            <label for="objective">Objectif(s) pédagoqique(s)</label>
            <textarea name="objective" placeholder="- Connaître la structure d'un document HTML&#10;- Savoir intégrer et mettre en forme des images à une page web"></textarea>  
        </div>
        <div class="piece-form-reward">
            <label for="reward">Récompenses</label>
            <textarea name="reward" placeholder="- Gain en compétences en web&#10;- Termine l'objectif pédagoqique &quot;connaître la structure d'un document HTML&quot;&#10;- Débloque la quête &quot;un CMS (wordpress) pour l'association du village&quot;"></textarea>  
        </div> 
    </div>
</div>