changer la langue entre fr et en quand on clique sur l'icone de traduction

src/app/app.component.html

@@ -4,14 +4,18 @@
             <span class="logo_first">Frama</span>
             <span class="logo_second">date</span>
         </h1>
-
+        <div class="legend">proposé par <span class="legend_first">Frama</span><span class="legend_second">soft</span></div>
     </a>
     <div id="translate_example">
-        <img src="assets/img/icone-langue.svg" alt="location icon">
+        <div class="wrapper">
-        <img src="assets/img/icone-menu.svg" alt="menu icon">
+            <img src="assets/img/icone-langue.svg" alt="location icon" class="lang_icon">
-        <div class="lang-choices">
+            <img src="assets/img/icone-menu.svg" alt="menu icon" class="menu_icon">
-            <button class="btn btn-info" (click)="switchLanguage('en')">en</button>
+            <select name="language" class="Language-" (change)="switchLanguage($event.target.value)">
-            <button class="btn btn-info" (click)="switchLanguage('fr')">fr</button>
+                <option value="d" default class="select_language">{{"Language" | translate}}</option>
+                <option value="en" >English</option>
+                <option value="fr" >Français</option>
+            </select>
+            <span class="menu_label">Menu</span>
         </div>
         <h1 i18n>{{"Title"|translate}}</h1>
         <div>

src/assets/i18n/en.json

@@ -1,4 +1,5 @@
 {
+    "Language": "Language",
     "Title": "Translation example",
     "Intro": "Hello I am {{name}}, I am {{age}} years old.",
     "home": {

src/assets/i18n/fr.json

@@ -1,5 +1,6 @@
 {
-    "Title": "Example de traduction",
+    "Language": "Langue",
+    "Title": "Exemple de traduction",
     "Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans.",
     "home": {
         "title": "le titre de la home"

src/assets/scss/default.scss

@@ -9,3 +9,20 @@ html {
 .text-right {
   text-align: right;
 }
+
+.Language- {
+  padding-right: 2em;
+  font-family: SourceSansPro;
+  font-size: 11px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: var(--black);
+  border: none;
+}
+
+.select_language {
+  display: none;
+}

src/assets/scss/molecules/_logo.scss

@@ -10,3 +10,55 @@
 .logo_second {
   color: $logo_color_2;
 }
+.wrapper {
+  display: grid;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80px;
+  margin-top: 1rem;
+}
+
+.lang_icon {
+  grid-column: 1;
+  grid-row: 1;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.menu_icon {
+  grid-column: 2;
+  grid-row: 1;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.lang_label {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.menu_label {
+  grid-column: 2;
+  grid-row: 2;
+  font-family: SourceSansPro;
+  font-size: 11px;
+  padding-top: 10px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.legend_first {
+  color: $legend_color;
+  padding-right: 0rem;
+  padding-left: 0rem;
+}
+
+.legend_second {
+ color: $legend_color_2;
+ padding-right: 0rem;
+ padding-left: 0rem;
+}
+
+.legend {
+  font-size: 10px;
+}

src/assets/scss/variables.scss

@@ -20,6 +20,8 @@ $secondary_color: $lavender-pink;
 $font_color: $black;
 $logo_color: $dark-lavender;
 $logo_color_2: $camo;
+$legend_color: $dark-lavender;
+$legend_color_2: $dusty-orange;
 $choice_select_border_color: $cool-grey;
 $hover-color:$warm-grey;
 $clicked-color:$wisteria;