feat; add multi language support

src/app/components/contact-form/contact-form.html

@@ -5,20 +5,20 @@
         <app-form-field 
             [errorsDictionary]="companyAndNameErrorsDictionary"
             formControlName="name"
-            [label]="(strings.name|upperfirst) + ':'"
-            [placeholder]="strings.contactsName|upperfirst"
+            [label]="(languageManager.strings.name|upperfirst) + ':'"
+            [placeholder]="languageManager.strings.contactsName|upperfirst"
         />
         <app-form-field 
             [errorsDictionary]="companyAndNameErrorsDictionary"
             formControlName="company"
-            [label]="(strings.company|upperfirst) + ':'"
-            [placeholder]="strings.contactsCompany|upperfirst"
+            [label]="(languageManager.strings.company|upperfirst) + ':'"
+            [placeholder]="languageManager.strings.contactsCompany|upperfirst"
         />
         <app-form-field
             [errorsDictionary]="phoneErrorsDictionary"
             formControlName="phone"
-            [label]="(strings.phone|upperfirst) +':'"
-            [placeholder]="strings.contactsPhone|upperfirst"
+            [label]="(languageManager.strings.phone|upperfirst) +':'"
+            [placeholder]="languageManager.strings.contactsPhone|upperfirst"
             type="tel"
         />
     </div>

src/app/components/contact-form/contact-form.ts

@@ -1,7 +1,6 @@
 import { Component, inject, input, output } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FormField } from '../form-field/form-field';
-import { STRINGS_INJECTOR } from '../../app.config';
 import { SquaredBtn } from '../squared-btn/squared-btn';
 import { NameAndCompanyFieldsErrorsDictionary } from '../../errors-dictionaries/name-and-company-field';
 import { PhoneFieldErroresDictionary } from '../../errors-dictionaries/phone-field';
@@ -9,6 +8,7 @@ import { UpperfirstPipe } from '../../pipes/upperfirst-pipe';
 import { ContactDTO } from '../../models/ContactDTO';
 import { ContactFormValue } from '../../types/ContactFormValue.type';
 import { FormGroupContact } from '../../utils/form-group-contact';
+import { LanguageManager } from '../../services/language-manager';
 
 @Component({
   selector: 'app-contact-form',
@@ -20,7 +20,7 @@ export class ContactForm {
   contact = output<ContactDTO>();
   form = input(new FormGroupContact());
   submitText = input('');
-  protected strings = inject(STRINGS_INJECTOR);
+  protected languageManager = inject(LanguageManager);
   protected companyAndNameErrorsDictionary =
     new NameAndCompanyFieldsErrorsDictionary().getDictionary();
   protected phoneErrorsDictionary = new PhoneFieldErroresDictionary().getDictionary();

src/app/components/contact-list-table/contact-list-table.html

@@ -2,10 +2,10 @@
 <table class="contact-list">
     <thead>
         <tr>
-            <th>{{strings.name}}</th>
-            <th>{{strings.company}}</th> 
-            <th>{{strings.phone}}</th> 
-            <th>{{strings.actions}}</th>   
+            <th>{{languageManager.strings.name}}</th>
+            <th>{{languageManager.strings.company}}</th> 
+            <th>{{languageManager.strings.phone}}</th> 
+            <th>{{languageManager.strings.actions}}</th>   
         </tr>
     </thead>
     <tbody>

src/app/components/contact-list-table/contact-list-table.ts

@@ -1,9 +1,9 @@
 import { Component, inject, input } from '@angular/core';
-import { STRINGS_INJECTOR } from '../../app.config';
 import { ContactDTO } from '../../models/ContactDTO';
 import { ContactActionsBar } from '../contact-actions-bar/contact-actions-bar';
 import { ContactService } from '../../services/contact.service';
 import { Router } from '@angular/router';
+import { LanguageManager } from '../../services/language-manager';
 
 @Component({
   selector: 'app-contact-list-table',
@@ -13,7 +13,7 @@ import { Router } from '@angular/router';
 })
 export class ContactListTable {
   contactList = input<ContactDTO[]>([]);
-  protected readonly strings = inject(STRINGS_INJECTOR);
+  protected readonly languageManager = inject(LanguageManager);
   private readonly contactService = inject(ContactService);
   private readonly router = inject(Router);
 

src/app/components/contact-list/contact-list.html

@@ -1,10 +1,10 @@
 <div class="contact-list">
     <div class="contact-list__container">
-        <h2>{{strings.contacts|upperfirst}}</h2>
+        <h2>{{languageManager.strings.contacts|upperfirst}}</h2>
         <app-contact-search-bar (contactSearch)="filter=$event"/>
         <app-counter 
             [count]="(this.contacts$|async)?.length ?? 0"
-            item="{{strings.contacts}}"
+            item="{{languageManager.strings.contacts}}"
         />
         <app-contact-list-table [contactList]="(this.contacts$|async)|contactsFilter:filter"/>
     </div>

src/app/components/contact-list/contact-list.ts

@@ -1,5 +1,4 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { STRINGS_INJECTOR } from '../../app.config';
 import { UpperfirstPipe } from '../../pipes/upperfirst-pipe';
 import { ContactSearchBar } from '../contact-search-bar/contact-search-bar';
 import { ContactListTable } from '../contact-list-table/contact-list-table';
@@ -7,6 +6,7 @@ import { ContactService } from '../../services/contact.service';
 import { AsyncPipe } from '@angular/common';
 import { Counter } from '../counter/counter';
 import { ContactsFilterPipe } from '../../pipes/contacts-filter-pipe';
+import { LanguageManager } from '../../services/language-manager';
 
 @Component({
   selector: 'app-contact-list',
@@ -23,7 +23,7 @@ import { ContactsFilterPipe } from '../../pipes/contacts-filter-pipe';
 })
 export class ContactList implements OnInit {
   private readonly contactService = inject(ContactService);
-  protected readonly strings = inject(STRINGS_INJECTOR);
+  protected readonly languageManager = inject(LanguageManager);
   protected contacts$ = this.contactService.contacts$;
   protected filter = '';
 

src/app/components/contact-search-bar/contact-search-bar.html

@@ -1,5 +1,5 @@
 <input 
     (input)="contactSearch.emit($event.target.value)" 
     class="search-bar shadow"
-    placeholder="{{strings.searchContactPlaceholder}}" 
+    placeholder="{{languageManager.strings.searchContactPlaceholder|upperfirst}}" 
     type="text">

src/app/components/contact-search-bar/contact-search-bar.ts

@@ -1,13 +1,14 @@
 import { Component, inject, output } from '@angular/core';
-import { STRINGS_INJECTOR } from '../../app.config';
+import { LanguageManager } from '../../services/language-manager';
+import { UpperfirstPipe } from '../../pipes/upperfirst-pipe';
 
 @Component({
   selector: 'app-contact-search-bar',
-  imports: [],
+  imports: [UpperfirstPipe],
   templateUrl: './contact-search-bar.html',
   styleUrl: './contact-search-bar.scss',
 })
 export class ContactSearchBar {
-  contactSearch = output<string>()
-  protected readonly strings = inject(STRINGS_INJECTOR);
+  contactSearch = output<string>();
+  protected readonly languageManager = inject(LanguageManager);
 }

src/app/components/notification/notification.html

@@ -1,6 +1,6 @@
 @if(notification$(); as notification) {
     <div class="notification notification--{{notification.type}} notification--fade-in-out">
-        <p>{{ notification.message  }}</p>
+        <p>{{ notification.message|upperfirst  }}</p>
     </div>
 }
 

src/app/components/notification/notification.ts

@@ -1,9 +1,10 @@
 import { Component, inject } from '@angular/core';
 import { Notifier } from '../../services/notifier';
+import { UpperfirstPipe } from '../../pipes/upperfirst-pipe';
 
 @Component({
   selector: 'app-notification',
-  imports: [],
+  imports: [UpperfirstPipe],
   templateUrl: './notification.html',
   styleUrl: './notification.scss',
 })