add: definition generation

required logic to combine related data for the word in activated route subscription

src/app/components/main/definition/definition.component.html

@@ -1,9 +1,35 @@
 <ng-container *ngIf="word$ | async as word">
-    <div *ngFor="let word of word$|async">
-        <ul>
-            <li *ngFor="let item of word.anlamlarListe">
-                <p>{{ item.anlam }}</p>
-            </li>
-        </ul>
+    <div class="container definition" *ngFor="let word of (word$|async); let wordIndex = index">
+        <h1>
+            {{word.madde}}
+        </h1>
+        <p>
+            <i *ngIf="word.cogul_mu === '1'">
+                Çokluk,
+            </i>
+            <span *ngIf="word.telaffuz">
+                ({{word.telaffuz}}),
+            </span>
+            <span>
+                {{word.lisan}}
+            </span>
+        </p>
+        <ng-container *ngFor="let anlam of anlamList[wordIndex]; let i = index">
+            <p>
+                {{anlam}}
+                <i *ngIf="word.ozel_mi === '1'">
+                    özel
+                </i>
+            </p>
+            <p>{{ word.anlamlarListe[i].anlam }}</p>
+            <ng-container *ngIf="word.anlamlarListe[i].orneklerListe">
+                <q>
+                    {{word.anlamlarListe[i].orneklerListe[0].ornek}}
+                </q>
+                <span *ngFor="let yazar of word.anlamlarListe[i].orneklerListe[0].yazar">
+                    - {{yazar.tam_adi}}
+                </span>
+            </ng-container>
+        </ng-container>
     </div>
 </ng-container>

src/app/components/main/definition/definition.component.ts

@@ -1,19 +1,38 @@
-import { Component, inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { map, switchMap } from 'rxjs';
+import { Observable, map, switchMap } from 'rxjs';
+import { WordResponse } from 'src/app/models/word-response';
 import { WordRequestService } from 'src/app/services/word-request.service';
 
 @Component({
   selector: 'sozluk-definition',
   templateUrl: './definition.component.html',
   styleUrls: ['./definition.component.scss']
 })
-export class DefinitionComponent {
-  constructor(private wordService: WordRequestService, private router: ActivatedRoute) {
+export class DefinitionComponent implements OnInit {
+  ngOnInit(): void {
+
   }
-  word$ = this.router.paramMap.pipe(
+  private wordService: WordRequestService = inject(WordRequestService);
+  private activatedRoute: ActivatedRoute = inject(ActivatedRoute);
+  anlamList: Array<string[]> = [];
+  word$: Observable<WordResponse[]> = this.activatedRoute.paramMap.pipe(
     map((param) => param.get('word')!),
-    switchMap((word) => this.wordService.getWordMeaning(word))
+    switchMap((word) => this.wordService.requestWordMeaning(word)),
+    map((httpResponse) => {
+      this.anlamList = new Array<string[]>()
+      httpResponse.forEach((wordResponse, index) => {
+        let anlamCount = parseInt(wordResponse.anlam_say, 10)
+        let anlamOzellik !: string;
+        let anlamOzellikListe = new Array<string>()
+        for (let i = 0; i < anlamCount; i++) {
+          if (wordResponse.anlamlarListe[i].ozelliklerListe)
+            anlamOzellik = wordResponse.anlamlarListe[i].ozelliklerListe.map((ozellik) => ozellik.tam_adi).join(', ')
+          anlamOzellikListe.push(anlamOzellik)
+        }
+        this.anlamList.push(anlamOzellikListe)
+      })
+      return httpResponse;
+    })
   );
-
 }

src/app/services/word-request.service.ts

@@ -1,15 +1,14 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { environment } from '../environments/environment';
-import { Observable, firstValueFrom, map } from 'rxjs';
 import { WordResponse } from '../models/word-response';
 
 @Injectable({
   providedIn: 'root'
 })
 export class WordRequestService {
-  constructor(private client: HttpClient) { }
-  getWordMeaning = (word: string) =>
+  private readonly client = inject(HttpClient);
+  requestWordMeaning = (word: string) =>
     this.client
       .get<WordResponse[]>(`${environment.apiUrl}/gts?ara=${word}`)
 }