form and radio button

src/app/shared/components/selectors/language-selector/language-selector.component.html

@@ -15,6 +15,8 @@
 			{{ 'LANGUAGES.' + currentLang.toUpperCase() | translate }}
 		</span>
 	</button>
+
+	<form action="#/administration/step/{{ pollService.step_current }}">
 		<p-dialog
 			[modal]="true"
 			[(visible)]="display_lang_dialog"
@@ -48,17 +50,29 @@
 				</h1>
 
 				<div class="list-of-langs">
-				<button
+					<div *ngFor="let language of availableLanguages" (click)="language_to_apply = language">
+						<label
+							[attr.for]="'#lang_' + language"
 							class="lang-element button"
-					[ngClass]="{ 'is-primary': language_to_apply === language, 'is-current': language === currentLang }"
-					*ngFor="let language of availableLanguages"
-					value="{{ language }}"
-					(click)="language_to_apply = language"
+							[ngClass]="{
+								'is-primary': language_to_apply === language,
+								'is-current': language === currentLang
+							}"
 						>
-					<!--				{{ language }} - -->
+							<input
+								class="pull-left"
+								type="radio"
+								value="{{ language }}"
+								name="lang_to_apply"
+								lang="{{ language }}"
+								[(ngModel)]="language_to_apply"
+								[attr.id]="'#lang_' + language"
+								(click)="language_to_apply = language"
+							/>
 							{{ language }} -
 							{{ 'LANGUAGES.' + language.toUpperCase() | translate }}
-				</button>
+						</label>
+					</div>
 				</div>
 			</ng-template>
 
@@ -73,4 +87,5 @@
 				</div>
 			</ng-template>
 		</p-dialog>
+	</form>
 </div>

src/app/shared/components/selectors/language-selector/language-selector.component.scss

@@ -39,9 +39,14 @@
 	border: 0;
 	border-radius: 2rem;
 	padding: 0.5rem 0.25rem;
+	padding-right: 1rem;
 
 	&:hover {
-		background: $d-neutral;
+		background: $primary_color;
+		color: $white;
+	}
+	input {
+		height: 1.5rem;
 	}
 }
 

src/app/shared/components/selectors/language-selector/language-selector.component.ts

@@ -17,7 +17,7 @@ export class LanguageSelectorComponent implements OnInit {
 	public availableLanguages: any = ['FR', 'EN', 'ES'];
 	language: string;
 	language_to_apply: string;
-	display_lang_dialog: boolean = false;
+	display_lang_dialog: boolean = true;
 
 	constructor(
 		private languageService: LanguageService,