Ja, es gibt viele Situationen, in denen die kombinierte Verwendung von <code>Observable</code> und <code>Subject</code> in Angular sinnvoll ist. Diese Kombination bietet sowohl die Flexibilität eines <code>Subject</code> als auch die Sicherheit und Einfachheit eines <code>Observable</code>. Hier sind einige Beispiele, in denen es sinnvoll ist, beide zusammen zu verwenden:
<h3>1. Zentralisierte Ereignissteuerung</h3>
Du kannst ein <code>Subject</code> in einem Service verwenden, um Ereignisse zentral zu steuern und sie als <code>Observable</code> zu exponieren, sodass andere Teile der Anwendung sich darauf abonnieren können.
<pre></pre>

typescript
Copy code
<code>import { Injectable } from</code> <code>'@angular/core'; import { Subject, Observable } from</code> <code>'rxjs'; @Injectable({ providedIn: 'root' }) export</code> <code>class</code> <code>EventService { private eventSubject = new</code> <code>Subject&lt;string&gt;(); get</code> <code>events$(): Observable&lt;string&gt; { return</code> <code>this.eventSubject.asObservable(); } emitEvent(event: string) { this.eventSubject.next(event); } } // In einer Komponenteimport { Component } from</code> <code>'@angular/core'; import { EventService } from</code> <code>'./event.service'; @Component({ selector: 'app-event-emitter', template: `&lt;button (click)="emit()"&gt;Emit Event&lt;/button&gt;` }) export</code> <code>class</code> <code>EventEmitterComponent { constructor(private eventService: EventService) {} emit() { this.eventService.emitEvent('Event from EmitterComponent'); } } // In einer anderen Komponenteimport { Component, OnInit } from</code> <code>'@angular/core'; import { EventService } from</code> <code>'./event.service'; @Component({ selector: 'app-event-listener', template: `&lt;p&gt;{{ eventMessage }}&lt;/p&gt;` }) export</code> <code>class</code> <code>EventListenerComponent</code> <code>implements</code> <code>OnInit { eventMessage: string; constructor(private eventService: EventService) {} ngOnInit() { this.eventService.events$.subscribe(event =&gt; { this.eventMessage = event; }); } } </code>
<h3>2. State Management mit BehaviorSubject</h3>
Verwende ein <code>BehaviorSubject</code> in einem Service, um den Zustand der Anwendung zu verwalten und ihn als <code>Observable</code> bereitzustellen, sodass Komponenten den Zustand abonnieren können.
<pre></pre>

typescript
Copy code
<code>import { Injectable } from</code> <code>'@angular/core'; import { BehaviorSubject, Observable } from</code> <code>'rxjs'; @Injectable({ providedIn: 'root' }) export</code> <code>class</code> <code>StateService { private stateSubject = new</code> <code>BehaviorSubject&lt;number&gt;(0); get</code> <code>state$(): Observable&lt;number&gt; { return</code> <code>this.stateSubject.asObservable(); } updateState(newState: number) { this.stateSubject.next(newState); } } // In einer Komponenteimport { Component } from</code> <code>'@angular/core'; import { StateService } from</code> <code>'./state.service'; @Component({ selector: 'app-state-updater', template: `&lt;button (click)="increment()"&gt;Increment&lt;/button&gt;` }) export</code> <code>class</code> <code>StateUpdaterComponent { constructor(private stateService: StateService) {} increment() { this.stateService.updateState(1); } } // In einer anderen Komponenteimport { Component, OnInit } from</code> <code>'@angular/core'; import { StateService } from</code> <code>'./state.service'; @Component({ selector: 'app-state-display', template: `&lt;p&gt;State: {{ state }}&lt;/p&gt;` }) export</code> <code>class</code> <code>StateDisplayComponent</code> <code>implements</code> <code>OnInit { state: number; constructor(private stateService: StateService) {} ngOnInit() { this.stateService.state$.subscribe(state =&gt; { this.state = state; }); } } </code>
<h3>3. WebSocket-Verbindung teilen</h3>
Verwende ein <code>Subject</code> in einem Service, um eine WebSocket-Verbindung zu verwalten und die Nachrichten als <code>Observable</code> bereitzustellen, sodass mehrere Komponenten dieselben Nachrichten erhalten.
<pre></pre>

typescript
Copy code
<code>import { Injectable } from</code> <code>'@angular/core'; import { webSocket } from</code> <code>'rxjs/webSocket'; import { Subject, Observable } from</code> <code>'rxjs'; @Injectable({ providedIn: 'root' }) export</code> <code>class</code> <code>WebSocketService { private socket$ = webSocket('ws://example.com/socket'); private messageSubject = new</code> <code>Subject&lt;any&gt;(); constructor() { this.socket$.subscribe( message =&gt;</code> <code>this.messageSubject.next(message), error =&gt;</code> <code>this.messageSubject.error(error), () =&gt;</code> <code>this.messageSubject.complete() ); } get</code> <code>messages$(): Observable&lt;any&gt; { return</code> <code>this.messageSubject.asObservable(); } sendMessage(message: any) { this.socket$.next(message); } } // In einer Komponenteimport { Component } from</code> <code>'@angular/core'; import { WebSocketService } from</code> <code>'./websocket.service'; @Component({ selector: 'app-socket-sender', template: `&lt;button (click)="send()"&gt;Send Message&lt;/button&gt;` }) export</code> <code>class</code> <code>SocketSenderComponent { constructor(private webSocketService: WebSocketService) {} send() { this.webSocketService.sendMessage({ type: 'GREETING', payload: 'Hello' }); } } // In einer anderen Komponenteimport { Component, OnInit } from</code> <code>'@angular/core'; import { WebSocketService } from</code> <code>'./websocket.service'; @Component({ selector: 'app-socket-receiver', template: `&lt;p&gt;Received: {{ message | json }}&lt;/p&gt;` }) export</code> <code>class</code> <code>SocketReceiverComponent</code> <code>implements</code> <code>OnInit { message: any; constructor(private webSocketService: WebSocketService) {} ngOnInit() { this.webSocketService.messages$.subscribe(msg =&gt; { this.message = msg; }); } } </code>
<h3>Zusammenfassung</h3>
Kombinierte Verwendung von <code>Observable</code> und <code>Subject</code> in diesen Szenarien:
<ul>
<li>Zentralisierte Ereignissteuerung: Ein <code>Subject</code> als zentrale Event-Steuerung, um Ereignisse zu emittieren und als <code>Observable</code> zur Verfügung zu stellen.</li>
<li>State Management: Ein <code>BehaviorSubject</code> zur Verwaltung und Bereitstellung des Zustands der Anwendung als <code>Observable</code>.</li>
<li>WebSocket-Verbindungen: Ein <code>Subject</code>, um Nachrichten von einer WebSocket-Verbindung an mehrere Abonnenten weiterzuleiten.</li>
</ul>

Subject usecases

When a subject should used ?

import { createFeatureSelector, createSelector } from "@ngrx/store";
import { UsersState } from "../reducers/users.reducers";


export const selectUsersState = createFeatureSelector&lt;UsersState&gt;('users');

export const selectAllUsers = createSelector(
&nbsp;&nbsp;&nbsp;&nbsp;selectUsersState,
&nbsp;&nbsp;&nbsp;&nbsp;(state : UsersState) =&gt; state.users
)

usersSelector

import { createReducer, on } from '@ngrx/store';
import {
&nbsp;&nbsp;loadEmployees,
&nbsp;&nbsp;addEmployee,
&nbsp;&nbsp;updateEmployee,
&nbsp;&nbsp;deleteEmployee,
&nbsp;&nbsp;markEmployeeAsMissing,
} from '../actions/employees.actions';
import { Employee } from 'src/app/models/employee.model';

export interface EmployeesState {
&nbsp;&nbsp;employees: Employee[];
}
export const initialEmployeesState: EmployeesState = {
&nbsp;&nbsp;employees: [],
};

export const employeesReducer = createReducer(
&nbsp;&nbsp;initialEmployeesState,
&nbsp;&nbsp;on(loadEmployees, (state, { employees }) =&gt; ({
&nbsp;&nbsp;&nbsp;&nbsp;...state,
&nbsp;&nbsp;&nbsp;&nbsp;employees,
&nbsp;&nbsp;})),
&nbsp;&nbsp;on(addEmployee, (state, { employee }) =&gt; ({
&nbsp;&nbsp;&nbsp;&nbsp;...state,
&nbsp;&nbsp;&nbsp;&nbsp;employees: [...state.employees, employee],
&nbsp;&nbsp;})),
&nbsp;&nbsp;on(updateEmployee, (state, { employee }) =&gt; ({
&nbsp;&nbsp;&nbsp;&nbsp;...state,
&nbsp;&nbsp;&nbsp;&nbsp;employees: state.employees.map((t) =&gt; (t._id === employee._id ? employee : t)),
&nbsp;&nbsp;})),
&nbsp;&nbsp;on(deleteEmployee, (state, { id }) =&gt; ({
&nbsp;&nbsp;&nbsp;&nbsp;...state,
&nbsp;&nbsp;&nbsp;&nbsp;employees: state.employees.filter((t) =&gt; t._id !== id),
&nbsp;&nbsp;})),
&nbsp;&nbsp;on(markEmployeeAsMissing, (state, {employee})=&gt; ({
&nbsp;&nbsp;&nbsp;&nbsp;...state,
&nbsp;&nbsp;&nbsp;&nbsp;employees: state.employees.map((e)=&gt; (e._id === employee._id ? employee : e))
&nbsp;&nbsp;}))
)

usersReducer

usersReducer  as an example for a data fetching

import { createReducer, on } from '@ngrx/store';
import { login, logout } from '../actions/auth.actions';
import { AuthState } from '../models/auth.models';

export const initialAuthState: AuthState = {
&nbsp;&nbsp;token: null,
&nbsp;&nbsp;isAuthenticated: false,
&nbsp;&nbsp;user: null,
};

export const authReducer = createReducer(
&nbsp;&nbsp;initialAuthState,
&nbsp;&nbsp;on(login, (state, { token, user }) =&gt; ({
&nbsp;&nbsp;&nbsp;&nbsp;...state,
&nbsp;&nbsp;&nbsp;&nbsp;token,
&nbsp;&nbsp;&nbsp;&nbsp;isAuthenticated: true,
&nbsp;&nbsp;&nbsp;&nbsp;user,
&nbsp;&nbsp;})),
&nbsp;&nbsp;on(logout, (state) =&gt; ({
&nbsp;&nbsp;&nbsp;&nbsp;...state,
&nbsp;&nbsp;&nbsp;&nbsp;token: null,
&nbsp;&nbsp;&nbsp;&nbsp;isAuthenticated: false,
&nbsp;&nbsp;&nbsp;&nbsp;user: null,
&nbsp;&nbsp;}))
);
Die <code>on</code>-Funktion ist eine Funktion aus dem NgRx-Framework, genauer gesagt aus dem <code>@ngrx/store</code>-Paket. Sie wird verwendet, um Reducer-Fälle zu definieren, die auf bestimmte Aktionen reagieren sollen. Hier ist eine detaillierte Erklärung:
<h3>Funktion der <code>on</code>-Funktion</h3>
Die <code>on</code>-Funktion wird verwendet, um die Reducer-Fälle zu definieren, die spezifischen Aktionstypen entsprechen. Ein Reducer in NgRx ist eine Funktion, die den aktuellen Zustand einer bestimmten Domäne (wie z.B. der Authentifizierung) modifiziert, basierend auf den Aktionen, die im Store ausgelöst werden.
<h3>Syntax und Verwendung</h3>
Die <code>on</code>-Funktion hat die folgende Syntax:
<pre></pre>

typescript
Copy code
<code>on(actionCreator, reducerFunction) </code>
<ul>
<li><code>actionCreator</code>: Dies ist die Aktion, auf die der Reducer reagieren soll. In NgRx wird eine Aktion normalerweise mit <code>createAction</code> erstellt.</li>
<li><code>reducerFunction</code>: Diese Funktion wird aufgerufen, wenn die spezifizierte Aktion im Store ausgelöst wird. Sie erhält den aktuellen Zustand und die Aktion als Parameter und gibt den neuen Zustand zurück.</li>
</ul>
<h3>Beispiel</h3>
Hier ist ein einfaches Beispiel, wie <code>on</code> verwendet wird, um einen Reducer zu definieren:
<pre></pre>

typescript
Copy code
<code>import { createReducer, on } from</code> <code>'@ngrx/store'; import { increment, decrement, reset } from</code> <code>'./counter.actions'; export</code> <code>const initialState = 0; export</code> <code>const counterReducer = createReducer( initialState, on(increment, state =&gt; state + 1), on(decrement, state =&gt; state - 1), on(reset, () =&gt; initialState) ); </code>
In diesem Beispiel:
<ul>
<li><code>increment</code>, <code>decrement</code> und <code>reset</code> sind Aktionen, die mit <code>createAction</code> definiert wurden und die jeweils einen Typ haben.</li>
<li><code>createReducer</code> erstellt einen Reducer für den Zustand der Zähler-Domäne (<code>counterReducer</code>).</li>
<li><code>on(increment, state =&gt; state + 1)</code> bedeutet, dass der Reducer auf die <code>increment</code>-Aktion reagiert, indem er den Zustand um 1 erhöht.</li>
<li><code>on(decrement, state =&gt; state - 1)</code> bedeutet, dass der Reducer auf die <code>decrement</code>-Aktion reagiert, indem er den Zustand um 1 verringert.</li>
<li><code>on(reset, () =&gt; initialState)</code> bedeutet, dass der Reducer auf die <code>reset</code>-Aktion reagiert, indem er den Zustand auf den initialen Zustand (<code>initialState</code>) zurücksetzt.</li>
</ul>
<h3>Zusammenfassung</h3>
Die <code>on</code>-Funktion in NgRx ermöglicht es, Reducer-Fälle zu definieren, die auf bestimmte Aktionen reagieren. Sie ist ein zentrales Konzept im NgRx-Store, um die Zustandsänderungen in der Anwendung zu verwalten und zu steuern. Durch die Verwendung von <code>on</code> können Reducer klar und modular gestaltet werden, was zur Pflege und Skalierbarkeit von Angular-Anwendungen beiträgt, die NgRx verwenden.

reducers

reducers in ngrx store

import {Pipe, PipeTransform} from '@angular/core'
@Pipe({
&nbsp;&nbsp;&nbsp;&nbsp;name:'unixTimestampToDate',
&nbsp;&nbsp;&nbsp;&nbsp;standalone: true
})

export class UnixTimestampToDatePipe implements PipeTransform{
&nbsp;&nbsp;&nbsp;&nbsp;transform(value: string) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const newDate = new Date(Number(value) * 1000)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return newDate
&nbsp;&nbsp;&nbsp;&nbsp;}
} how it is used in the component : import { AfterViewInit, Component, ViewChild } from '@angular/core';
import {
&nbsp;&nbsp;MatTableModule,
&nbsp;&nbsp;MatTable,
&nbsp;&nbsp;MatTableDataSource,
} from '@angular/material/table';
import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
import { MatSortModule, MatSort } from '@angular/material/sort';
import { TodosService } from '../services/todos.service';
import { Todo } from '../store/models/todos.models';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { TodoActionDialogComponent } from '../todo-aktion-dialog/todo-action.component';
import { CommonModule, DatePipe } from '@angular/common';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import {
&nbsp;&nbsp;selectAllTodos,
&nbsp;&nbsp;selectCompletedTodos,
&nbsp;&nbsp;selectActiveTodos,
} from '../store/selectors/todos.selectors';
import { RouterLink } from '@angular/router';
import { UnixTimestampToDatePipe } from '../pipes/unix-timestamp-to-date.pipe';

@Component({
&nbsp;&nbsp;selector: 'app-todos-table',
&nbsp;&nbsp;templateUrl: './todos-table.component.html',
&nbsp;&nbsp;styleUrl: './todos-table.component.scss',
&nbsp;&nbsp;standalone: true,
&nbsp;&nbsp;providers: [DatePipe],
&nbsp;&nbsp;imports: [
&nbsp;&nbsp;&nbsp;&nbsp;CommonModule,
&nbsp;&nbsp;&nbsp;&nbsp;MatDialogModule,
&nbsp;&nbsp;&nbsp;&nbsp;MatMenuModule,
&nbsp;&nbsp;&nbsp;&nbsp;MatIconModule,
&nbsp;&nbsp;&nbsp;&nbsp;MatTableModule,
&nbsp;&nbsp;&nbsp;&nbsp;MatPaginatorModule,
&nbsp;&nbsp;&nbsp;&nbsp;MatSortModule,
&nbsp;&nbsp;&nbsp;&nbsp;RouterLink,
&nbsp;&nbsp;&nbsp;&nbsp;UnixTimestampToDatePipe,
&nbsp;&nbsp;],
})
export class TodosTableComponent implements AfterViewInit {
&nbsp;&nbsp;@ViewChild(MatPaginator) paginator!: MatPaginator;
&nbsp;&nbsp;@ViewChild(MatSort) sort!: MatSort;
&nbsp;&nbsp;dataSource: MatTableDataSource&lt;Todo&gt;;
&nbsp;&nbsp;displayedColumns = [
&nbsp;&nbsp;&nbsp;&nbsp;'id',
&nbsp;&nbsp;&nbsp;&nbsp;'beschreibung',
&nbsp;&nbsp;&nbsp;&nbsp;'erledigt',
&nbsp;&nbsp;&nbsp;&nbsp;'faellig',
&nbsp;&nbsp;&nbsp;&nbsp;'prioritaet',
&nbsp;&nbsp;&nbsp;&nbsp;'actions',
&nbsp;&nbsp;];

&nbsp;&nbsp;allTodos$: Observable&lt;Todo[]&gt;;
&nbsp;&nbsp;constructor(
&nbsp;&nbsp;&nbsp;&nbsp;private todosService: TodosService,
&nbsp;&nbsp;&nbsp;&nbsp;private dialog: MatDialog,
&nbsp;&nbsp;&nbsp;&nbsp;private datePipe: DatePipe,
&nbsp;&nbsp;&nbsp;&nbsp;private store: Store&lt;{ todos: Todo[] }&gt;
&nbsp;&nbsp;) {
&nbsp;&nbsp;&nbsp;&nbsp;this.dataSource = new MatTableDataSource&lt;Todo&gt;();
&nbsp;&nbsp;&nbsp;&nbsp;this.allTodos$ = this.store.select(selectAllTodos);
&nbsp;&nbsp;}

&nbsp;&nbsp;ngAfterViewInit(): void {
&nbsp;&nbsp;&nbsp;&nbsp;this.dataSource.paginator = this.paginator;
&nbsp;&nbsp;&nbsp;&nbsp;this.dataSource.sort = this.sort;
&nbsp;&nbsp;&nbsp;&nbsp;this.loadTodos();
&nbsp;&nbsp;}

&nbsp;&nbsp;loadTodos(): void {
&nbsp;&nbsp;&nbsp;&nbsp;this.allTodos$.subscribe((todos: Todo[]) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.dataSource.data = todos;
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;}

&nbsp;&nbsp;openDialog(action: string, todo?: Todo): void {
&nbsp;&nbsp;&nbsp;&nbsp;let dialogRef;
&nbsp;&nbsp;&nbsp;&nbsp;if (action === 'Add') {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dialogRef = this.dialog.open(TodoActionDialogComponent, {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: '300px',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data: { action: action },
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;} else if (action === 'Edit') {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dialogRef = this.dialog.open(TodoActionDialogComponent, {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: '300px',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data: { action: action, todo: todo },
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;} else if (action === 'Complete') {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dialogRef = this.dialog.open(TodoActionDialogComponent, {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: '300px',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data: { action: action, todo: todo },
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;} else if (action === 'Incomplete') {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dialogRef = this.dialog.open(TodoActionDialogComponent, {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: '300px',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data: { action: action, todo: todo },
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;if (dialogRef) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dialogRef.afterClosed().subscribe((result) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (result) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (action === 'Add') {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.loadTodos();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (action === 'Edit') {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.loadTodos();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}

&nbsp;&nbsp;/* formatDate(date :string): string {
&nbsp;&nbsp;&nbsp;&nbsp;const newDate = new Date(Number(date) *1000)
&nbsp;&nbsp;&nbsp;&nbsp;return this.datePipe.transform(newDate, 'dd-MM-yyyy') || '';
&nbsp;&nbsp;} */

&nbsp;&nbsp;deleteTodo(todo: Todo): void {
&nbsp;&nbsp;&nbsp;&nbsp;this.todosService.deleteTodo(todo.id).subscribe(() =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.loadTodos();
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;}
}

Custom pipe transforms a unix timestamp in frontend to date object

Custom Pipe 

import { HttpRequest, HttpHandlerFn, HttpEvent, HttpInterceptorFn } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

export const dateToUnixTimestamp : HttpInterceptorFn = (req: HttpRequest&lt;any&gt;, next: HttpHandlerFn) : Observable&lt;HttpEvent&lt;any&gt;&gt; =&gt; {
&nbsp;&nbsp;&nbsp;if(req.body &amp;&amp; req.body.faellig){
&nbsp;&nbsp;&nbsp;&nbsp;const faelligDate = new Date (req.body.faellig);
&nbsp;&nbsp;&nbsp;&nbsp;const unixTimestamp= faelligDate.getTime();
&nbsp;&nbsp;&nbsp;&nbsp;const unixTimeStampValue = Math.floor(unixTimestamp/1000);

&nbsp;&nbsp;&nbsp;&nbsp;const modifiedReq = req.clone({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body: {...req.body, faellig: unixTimeStampValue}
&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return next(modifiedReq)&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;return next(req)&nbsp;
} 
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideStore } from '@ngrx/store';
import { todosReducer } from './store/reducers/todos.reducer';
import { authReducer } from './store/reducers/auth.reducer';
import { AuthGuard } from './guards/auth.guard';
import { authInterceptor } from './store/interceptors/auth.interceptor';
import { dateToUnixTimestamp } from './store/interceptors/date-to-unix-timestamp.interceptor';

export const appConfig: ApplicationConfig = {
&nbsp;&nbsp;providers: [
&nbsp;&nbsp;&nbsp;&nbsp;AuthGuard,
&nbsp;&nbsp;&nbsp;&nbsp;provideZoneChangeDetection({ eventCoalescing: true }),
&nbsp;&nbsp;&nbsp;&nbsp;provideRouter(routes),
&nbsp;&nbsp;&nbsp;&nbsp;provideAnimationsAsync(),
&nbsp;&nbsp;&nbsp;&nbsp;provideHttpClient(withInterceptors([authInterceptor, dateToUnixTimestamp])),
&nbsp;&nbsp;&nbsp;&nbsp;provideStore({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;todos: todosReducer,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;auth: authReducer,
&nbsp;&nbsp;&nbsp;&nbsp;}),
&nbsp;&nbsp;],
};

dateToUnixTimestamp

import { HttpRequest, HttpHandlerFn, HttpHeaders, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { selectAuthToken } from '../selectors/auth.selectors';
import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';

export const authInterceptor: HttpInterceptorFn = (req: HttpRequest&lt;any&gt;, next: HttpHandlerFn): Observable&lt;HttpEvent&lt;any&gt;&gt; =&gt; {
&nbsp;&nbsp;if (req.url.startsWith('http://localhost:9002/todos') || req.url.startsWith('http://localhost:9002/todo')) {
&nbsp;&nbsp;&nbsp;&nbsp;const store = inject(Store);

&nbsp;&nbsp;&nbsp;&nbsp;return store.select(selectAuthToken).pipe(
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mergeMap((token) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const headers = new HttpHeaders().set('token', `${token}`);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const authReq = req.clone({headers});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return next(authReq);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;);
&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;return next(req);
&nbsp;&nbsp;}
};
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideStore } from '@ngrx/store';
import { todosReducer } from './store/reducers/todos.reducer';
import { authReducer } from './store/reducers/auth.reducer';
import { AuthGuard } from './guards/auth.guard';
import { authInterceptor } from './store/interceptors/auth.interceptor';

export const appConfig: ApplicationConfig = {
&nbsp;&nbsp;providers: [
&nbsp;&nbsp;&nbsp;&nbsp;AuthGuard,
&nbsp;&nbsp;&nbsp;&nbsp;provideZoneChangeDetection({ eventCoalescing: true }),
&nbsp;&nbsp;&nbsp;&nbsp;provideRouter(routes),
&nbsp;&nbsp;&nbsp;&nbsp;provideAnimationsAsync(),
&nbsp;&nbsp;&nbsp;&nbsp;provideHttpClient(withInterceptors([authInterceptor])),
&nbsp;&nbsp;&nbsp;&nbsp;provideStore({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;todos: todosReducer,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;auth: authReducer,
&nbsp;&nbsp;&nbsp;&nbsp;}),
&nbsp;&nbsp;],
};

Auth Interceptor

import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
import {
&nbsp;&nbsp;MAT_DIALOG_DATA,
&nbsp;&nbsp;MatDialogModule,
&nbsp;&nbsp;MatDialogRef,
} from '@angular/material/dialog';
import { Todo } from '../store/models/todos.models';
import { MatFormField, MatFormFieldModule } from '@angular/material/form-field';
import {
&nbsp;&nbsp;FormBuilder,
&nbsp;&nbsp;FormGroup,
&nbsp;&nbsp;ReactiveFormsModule,
&nbsp;&nbsp;Validators,
} from '@angular/forms';
import { TodosService } from '../services/todos.service';
import { MatInputModule } from '@angular/material/input';

@Component({
&nbsp;&nbsp;selector: 'app-add-edit-todo-dialog',
&nbsp;&nbsp;standalone: true,
&nbsp;&nbsp;imports: [
&nbsp;&nbsp;&nbsp;&nbsp;MatDialogModule,
&nbsp;&nbsp;&nbsp;&nbsp;MatInputModule,
&nbsp;&nbsp;&nbsp;&nbsp;MatFormFieldModule,
&nbsp;&nbsp;&nbsp;&nbsp;MatFormField,
&nbsp;&nbsp;&nbsp;&nbsp;ReactiveFormsModule,
&nbsp;&nbsp;],
&nbsp;&nbsp;changeDetection: ChangeDetectionStrategy.OnPush,
&nbsp;&nbsp;templateUrl: './todo-action.component.html',
&nbsp;&nbsp;styleUrl: './todo-action.component.scss',
})
export class TodoActionDialogComponent {
&nbsp;&nbsp;form: FormGroup = this.formBuilder.group({
&nbsp;&nbsp;&nbsp;&nbsp;beschreibung: ['', [Validators.required]],
&nbsp;&nbsp;&nbsp;&nbsp;faellig: ['', this.data.action !== 'Complete' ? [Validators.required] : []],
&nbsp;&nbsp;&nbsp;&nbsp;prioritaet: [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.data.action !== 'Complete'
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;? [Validators.required, Validators.min(1), Validators.max(4)]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: [],
&nbsp;&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;&nbsp;&nbsp;erledigt: false,
&nbsp;&nbsp;});

&nbsp;&nbsp;constructor(
&nbsp;&nbsp;&nbsp;&nbsp;private formBuilder: FormBuilder,
&nbsp;&nbsp;&nbsp;&nbsp;private todosService: TodosService,
&nbsp;&nbsp;&nbsp;&nbsp;public dialogRef: MatDialogRef&lt;TodoActionDialogComponent&gt;,
&nbsp;&nbsp;&nbsp;&nbsp;@Inject(MAT_DIALOG_DATA) public data: { action: string; todo?: Todo }
&nbsp;&nbsp;) {}

&nbsp;&nbsp;ngOnInit(): void {
&nbsp;&nbsp;&nbsp;&nbsp;if (this.data.action === 'Edit' &amp;&amp; this.data.todo) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const faelligDate = new Date(Number(this.data.todo.faellig) * 1000);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const faelligString = faelligDate.toISOString().substring(0, 10);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.form.patchValue({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beschreibung: this.data.todo.beschreibung,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;faellig: faelligString,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prioritaet: this.data.todo.prioritaet,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;erledigt: this.data.todo.erledigt,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;} else if (this.data.action === 'Complete' &amp;&amp; this.data.todo) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const faelligDate = new Date(Number(this.data.todo.faellig) * 1000);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const faelligString = faelligDate.toISOString().substring(0, 10);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.form.patchValue({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beschreibung: this.data.todo.beschreibung,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;faellig: faelligString,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prioritaet: this.data.todo.prioritaet,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;} else if (this.data.action === 'Incomplete' &amp;&amp; this.data.todo) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const faelligDate = new Date(Number(this.data.todo.faellig) * 1000);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const faelligString = faelligDate.toISOString().substring(0, 10);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.form.patchValue({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beschreibung: this.data.todo.beschreibung,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;faellig: faelligString,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prioritaet: this.data.todo.prioritaet,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}

&nbsp;&nbsp;onSubmit() {
&nbsp;&nbsp;&nbsp;&nbsp;if (this.form.valid) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const todo: Todo = this.form.value;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (this.data.action === 'Add') {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.todosService.addTodo(todo).subscribe(() =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.dialogRef.close(todo);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (this.data.action === 'Edit') {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const id = this.data?.todo?.id;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (id) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.todosService.updateTodo(todo, id).subscribe(() =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.dialogRef.close(todo);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (this.data.action === 'Complete' &amp;&amp; this.data.todo) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const id = this.data.todo.id;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.todosService.markAsCompleted(todo, id).subscribe(() =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.dialogRef.close(todo);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (this.data.action === 'Incomplete' &amp;&amp; this.data.todo) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const id = this.data.todo.id;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.todosService.markAsIncomplete(todo, id).subscribe(() =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.dialogRef.close(todo);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('Form is not valid');
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
&nbsp;&nbsp;onCancel(): void {
&nbsp;&nbsp;&nbsp;&nbsp;this.dialogRef.close();
&nbsp;&nbsp;}
}

a dialog component 

a dialog component for Crud methods 

import { Component, OnInit, AfterViewInit, AfterViewChecked, ElementRef } from "@angular/core";
import { ActivatedRoute, Router, NavigationEnd } from "@angular/router";
import { DocumentationService } from "./documentation.service";
import { filter, delay } from "rxjs/operators";

interface Subtitle {
&nbsp;&nbsp;&nbsp;&nbsp;title: string;
&nbsp;&nbsp;&nbsp;&nbsp;content: string;
}

interface Item {
&nbsp;&nbsp;&nbsp;&nbsp;name: string;
&nbsp;&nbsp;&nbsp;&nbsp;subtitles: Subtitle[];
}

@Component({
&nbsp;&nbsp;&nbsp;&nbsp;selector: "app-documentation",
&nbsp;&nbsp;&nbsp;&nbsp;templateUrl: "./documentation.component.html",
&nbsp;&nbsp;&nbsp;&nbsp;styleUrls: ["./documentation.component.scss"],
})
export class DocumentationComponent implements OnInit , AfterViewInit{
&nbsp;&nbsp;&nbsp;&nbsp;items: Item[] = [];
&nbsp;&nbsp;&nbsp;&nbsp;selectedItem: Item | null = null;
&nbsp;&nbsp;&nbsp;&nbsp;selectedSubtitle: Subtitle | null = null;
&nbsp;&nbsp;&nbsp;&nbsp;pendingFragment: string | null = null;

&nbsp;&nbsp;&nbsp;&nbsp;constructor(
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;private documentationService: DocumentationService,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;private route: ActivatedRoute,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;private router: Router,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;private elementRef: ElementRef
&nbsp;&nbsp;&nbsp;&nbsp;) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.items = this.documentationService.getItems();
&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;ngOnInit() {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle route params
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.route.paramMap.subscribe((params) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const itemName = params.get("itemName");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (itemName) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.selectItemByName(itemName);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (this.items.length &gt; 0) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const firstItem = this.items[0];
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.selectItemByName(firstItem.name);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Handle fragment changes
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.router.events
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.pipe(
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter((event) =&gt; event instanceof NavigationEnd),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delay(1000), // Add delay to allow the DOM to update
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter(() =&gt; !!this.selectedSubtitle) // Ensure selectedSubtitle is defined
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.subscribe(() =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const fragment = this.route.snapshot.fragment;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.scrollToFragment(fragment);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;ngAfterViewInit(): void {
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


&nbsp;&nbsp;&nbsp;&nbsp;sanitizeForURL(str: string): string {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return str.replace(/[^a-zA-Z0-9]+/g, "-").toLowerCase();
&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;selectItemByName(name: string) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.selectedItem =
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.items.find((item) =&gt; this.sanitizeForURL(item.name) === this.sanitizeForURL(name)) || null;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (this.selectedItem) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const firstSubtitle = this.selectedItem.subtitles[0];
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.selectedSubtitle = firstSubtitle || null;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.updateUrlParams();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;selectSubtitleByTitle(title: string) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (this.selectedItem) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.selectedSubtitle =
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.selectedItem.subtitles.find(
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(subtitle) =&gt; this.sanitizeForURL(subtitle.title) === this.sanitizeForURL(title)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;) || null;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const sanitizedId = this.sanitizeForURL(title);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.updateUrlParams(sanitizedId);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;updateUrlParams(fragment?: string) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (this.selectedItem) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const itemName = this.sanitizeForURL(this.selectedItem.name);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.router.navigate(["/documentation", itemName], {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fragment: fragment ? fragment : null,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;scrollToFragment(fragment: string) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const element = document.getElementById(fragment);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (element) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element.scrollIntoView();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
}

&lt;mat-drawer-container class="drawer-container" autosize&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Left Sidebar --&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;mat-drawer #leftDrawer mode="side" opened class="left-sidenav"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="center-content"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mat-nav-list&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a mat-list-item *ngFor="let item of items"&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(click)="selectItemByName(item.name)"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[class.selected]="item === selectedItem"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.name }}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mat-nav-list&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mat-drawer&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Main Content --&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="main-content"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="center-content"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mat-toolbar color="primary"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ selectedItem?.name }}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mat-toolbar&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="page-content" #content&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ng-container *ngIf="selectedItem"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div *ngFor="let subtitle of selectedItem.subtitles"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Apply the sanitized ID to the subtitle --&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 [id]="sanitizeForURL(subtitle.title)"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ subtitle.title }}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/h2&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;{{ subtitle.content }}&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ng-container&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Right Sidebar --&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;mat-drawer #rightDrawer mode="side" opened position="end" class="right-sidenav"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="center-content"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;&lt;strong&gt;On This Page&lt;/strong&gt;&lt;/h2&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mat-nav-list *ngFor="let subtitle of selectedItem?.subtitles" &gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a mat-list-item&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(click)="selectSubtitleByTitle(subtitle.title)"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[class.selected]="subtitle === selectedSubtitle"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ subtitle.title }}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mat-nav-list&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mat-drawer&gt;
&lt;/mat-drawer-container&gt;

fragment

navigating to fragments in a page 

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import {
&nbsp;&nbsp;MatTableModule,
&nbsp;&nbsp;MatTable,
&nbsp;&nbsp;MatTableDataSource,
} from '@angular/material/table';
import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
import { MatSortModule, MatSort } from '@angular/material/sort';
import { TodosService, TodosTableItem } from './todos-service.service';

@Component({
&nbsp;&nbsp;selector: 'app-todos-table',
&nbsp;&nbsp;templateUrl: './todos-table.component.html',
&nbsp;&nbsp;styleUrls: ['./todos-table.component.css'],
&nbsp;&nbsp;standalone: true,
&nbsp;&nbsp;providers: [TodosService],
&nbsp;&nbsp;imports: [MatTableModule, MatPaginatorModule, MatSortModule],
})
export class TodosTableComponent implements AfterViewInit {
&nbsp;&nbsp;@ViewChild(MatPaginator) paginator!: MatPaginator;
&nbsp;&nbsp;@ViewChild(MatSort) sort!: MatSort;
&nbsp;&nbsp;@ViewChild(MatTable) table!: MatTable&lt;TodosTableItem&gt;;
&nbsp;&nbsp;dataSource: MatTableDataSource&lt;TodosTableItem&gt;;
&nbsp;&nbsp;displayedColumns = ['id', 'userId', 'title', 'completed'];

&nbsp;&nbsp;constructor(private todosService: TodosService) {
&nbsp;&nbsp;&nbsp;&nbsp;this.dataSource = new MatTableDataSource();
&nbsp;&nbsp;}

&nbsp;&nbsp;ngAfterViewInit(): void {
&nbsp;&nbsp;&nbsp;&nbsp;this.dataSource.paginator = this.paginator;
&nbsp;&nbsp;&nbsp;&nbsp;this.dataSource.sort = this.sort;
&nbsp;&nbsp;&nbsp;&nbsp;this.todosService
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.getAllTodos()
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.subscribe((todos) =&gt; (this.dataSource.data = todos));
&nbsp;&nbsp;}
}
can y explain me how dataSource is implemented in the component ?
ChatGPT
Certainly! In your Angular component TodosTableComponent, dataSource is used to manage the data that will be displayed in your MatTable. Let's break down how it's implemented and used in your code:

Initialization and Type Declaration
typescript
Copy code
dataSource: MatTableDataSource&lt;TodosTableItem&gt;;
Here, dataSource is declared as an instance of MatTableDataSource, which is a class provided by Angular Material specifically designed to provide data to a MatTable.

MatTableDataSource expects a generic type TodosTableItem. This type indicates the structure of each item in your data source. From your imports and usage, it seems like TodosTableItem is defined in your TodosService.
Constructor Initialization
typescript
Copy code
constructor(private todosService: TodosService) {
&nbsp;&nbsp;this.dataSource = new MatTableDataSource();
}
In the constructor, you initialize dataSource by creating a new MatTableDataSource instance. Initially, it is created without any data (new MatTableDataSource()).
AfterViewInit Hook
typescript
Copy code
ngAfterViewInit(): void {
&nbsp;&nbsp;this.dataSource.paginator = this.paginator;
&nbsp;&nbsp;this.dataSource.sort = this.sort;
&nbsp;&nbsp;this.todosService
&nbsp;&nbsp;&nbsp;&nbsp;.getAllTodos()
&nbsp;&nbsp;&nbsp;&nbsp;.subscribe((todos) =&gt; (this.dataSource.data = todos));
}
ngAfterViewInit() is a lifecycle hook that is called after Angular has fully initialized the component's view and child views. It is used here to ensure that the MatPaginator and MatSort components are available for binding to dataSource.

this.dataSource.paginator = this.paginator;: Binds the MatPaginator component (paginator) to the paginator property of dataSource, enabling pagination functionality.

this.dataSource.sort = this.sort;: Binds the MatSort component (sort) to the sort property of dataSource, enabling sorting functionality.

this.todosService.getAllTodos().subscribe(...): This line fetches the data (presumably from an HTTP request using TodosService) and subscribes to the observable that emits the array of TodosTableItem. When data is received (todos), it assigns todos to this.dataSource.data. This effectively updates the data shown in the MatTable.

Summary
dataSource manages the data for the MatTable in your Angular component.
It is initialized in the constructor and updated with actual data in ngAfterViewInit() after the view has been initialized.
Binding MatPaginator and MatSort components to dataSource enables pagination and sorting functionality in your MatTable.
This setup ensures that your MatTable (table) is correctly configured with pagination, sorting, and data binding as provided by Angular Material components (MatPaginator, MatSort, MatTable).

MatTableDtaSource

how the matTableDataSource is implemented on a table 

‘Kurak Günler’ filmini, bir öğleden sonra seansında Kadıköy sinemasında seyrettim. Gitmeden önce internette araştırıp filmin hala vizyonda olduğunu görünce sevinmiştim. AVM içinde olmayıp ender kalan sinemalardan olan Kadıköy sinemasına gitmek için Bahariye caddesine doğru yola koyuldum. Sinema salonuna girmek için bileti gişeden alıp zemin kattan aşağı indim. Bu ritüel, bana eski günleri hatırlattı. Küçük sinema salonunun neredeyse yarısı doluydu. Çoğunluğu 20-35 yaş arası insanlardan oluşuyordu. Seyirci sayısı, iş saati için gayet iyi sayılırdı. Zira, çok daha az kişiyle sinemada filmler seyrettiğimi hatırlıyorum. Bir defasında, eski Rexx sinemasında gündüz seansında tanımadığım bır kızla beraber toplam iki kişi ‘Limonata’yı seyretmiştik.&nbsp;
Fillmle ilgili oluşan siyasi gündemden haberdar olarak ama büyük bir beklenti içine girmeden filmi seyrettim. Yönetmenin ‘Tepenin Ardı’ ve ‘Abluka’ filmlerini seyrettiğimden kötü birşey çıkmayacağını biliyordum. Ama konudan ve film ekibin haklılığından bağımsız olarak fazla gündem yaratması ve filmin önüne geçmesi beni biraz rahatsız etti. Bununla beraber, filmin bekledğimden çok daha güçlü çıktığını söylemeliyim. Fazla yapmadığım birşey olarak sonunda filmi alkışladım. Benim dışımda alkışlayanlar da vardı.&nbsp;&nbsp;
Başından sonuna kadar gerilimi sıcak tutmayı başaran film bir an bile akıcılığından taviz vermiyor. Emin Alper Özkan’ın diğer filmlerinde, özellikle ‘Abluka’ ‘da gördüğüm bireysel psikoloijk gerilimler bu filmde de mevcut. Zekice düşünülmüş kurgusu ile benim sevdiğim bir tür olan gerilimin hakkını yeterince veriyor. Yönetmenin izlediğim diğer filmlerinden farklı olarak bu filmde, kişinin iç dünyası ile alakalı gerilimler sonrasında toplumsal gerilimlere dönüşüyor.&nbsp;
Filme konu olayların geçtiği mekan olan taşra ayrı bir odak noktası olmayı hakkediyor. İletişim yayınlarının çıkardığı ve farklı yazarlardan tarafından yazılan ‘Taşraya Bakmak’ kitabını yakın zamanalarda okumuştum ve kitabı okurken kendi kısa taşra deneyimlerimle parallellikler kurmustum. Çocukken bir yaz tatili boyunca kaldığım Tokat/Zile’deki taşra benim için çok yeniydi ve bir o kadar yabancıydı. O yaz tatili ile ilgili her anıyı sanki bugünmüş gibi hatırlıyorum. Sonrasında bir daha Zile’ye bir iki sene öncesine kadar hiç gitmedim. Müthis bir iç sıkıntısını çağrıştıran ve insanın kendini aşma isteğine set vuran bir engel ya da açık bir cezavi gibi duran Nuri Bilge Ceylan’ın ‘Kasaba’ filmindeki taşra, benim hatırımdaki taşraya yakın. Okuldayken okuduğumuz Ferit Edgü’nün ‘O Hakkari’de Bir Mevsim’ otobiyografik romanındaki taşradaki yabançılaşma duygusu bir hayli sert. Film, yukarıdaki taşralara benzerlikler gösteren umut dünyası kurak bir ortamda geçiyor.&nbsp;
Taşranın dinamiklerinin tahmin edilemezliğini ve taşra sakinlerinin kışkırtmalara açık olabilirliğini bütün gerçekliğiyle görüyoruz. Bölgeye atanan genç savcı, filmin başlangıcında benim çoçukken taşra ile hissettiğim seyleri hissediyor. İlerleyen sahnelerde bunun yanında görevi gereği daha farklı çelişkilerle karşılaşıyor. Taşranın yerlileri tarafından kanıksanan ‘böyle gelmiş böyle gider’ tavrı, ideallerinden taviz vermemeye çalışan ama bununla beraber güçlü cumhuriyet aydını klişesinden uzak olan genç savcının gelmesiyle beraber yeni gerilimlere yol açıyor. Savcı, göreviğini ifa ederken bir gün kahraman gibi görülürken başka bir gün ise lince uğrayabilecek duruma gelebiliyor. Bahsekonu gerilimlerin etkisi, filmde önemli bir yer tutan ve enterasan bir doğa olayı olan obruk metoforuyla daha da güçleniyor.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Savcı dışındaki karakterler de taşranın gerçekliğine son derece uygun. Örneğin savıcıyı baskı altına almaya çalışan belediye başkanının siyası aidiyatı içki içmesine rağmen güncel iktidarı hatırlatsa da herhangi bir merkez sağ parti ve hatta bir merkez sol partiyle de kolaylıkla özdeşleştirilebilir.Taşrada, büyük şehirlerdekine benzer şekilde erk/güç/sermaye sahibi insanların ekseriyetle ideolojik sadakatları olmadığı ve büyük şehirdekilerden daha hızlı bir şekilde ikitidara göre yön değiştirdikleri şaşırtıcı bir durum değil. En ötekilerden olan çingenelerin taşradaki rolleri çok çarpıcı biçimde veriliyor. Roman babanın isyanı aslında bol klişelerle güçlü gibi gösterilmeye çalışan devletin acizliğini çok net biçimde gösteriyor.&nbsp;&nbsp;&nbsp;&nbsp;
Kurak Günler'in benim için en kayda değer yönü doğrudan bir politik ve toplumsal mesaj vermeyip meramını birey ve çevresi ile etkileşimi üzerinden anlatmasıdır. Bununla beraber, başından sonuna kadar bitmeyen ve bize özgü farklı gerilimi ile son zamanlarda seyrettiğim en iyi yerli filmlerden biri. &nbsp;

Kurak Günler

Film Eleştirisi

Can Kozanoğlu'nun ''Acemi Eğitim'' kitabını okumaya 3.5 saat süren bir uçak yolculuğunda başladım ve yolculuğun sonuna kadar kitabın yarısını bitirmiştim. Kitabı, yıllar evvel sanırım üniversitenin ilk zamanları olmalı, NTV'de bir programda duymuştum. Can Kozanoğlu da programın daimi katılımcılarından biriydi. Anı kitabı olduğunu duyunca şaşırmıştım. Çünkü C.K. o zamanlar genç sayılabilecek bir yaştaydı. Kitabın geri kalanını da indikten sonra kısa sürede okudum. 
Bekledğim gibi çok akıcıydı ve bir çırpıda okunuyordu. Yıllar evvel C.K.'nın elime geçen bir başka kitabı ''Cilalı İmaj Devri'' gibi. Acemi Eğitim'in aksine ''Cilalı Imaj Devri'' daha çok uzmanlık alanı sosyoloji ile ilgiliydi ve yakın Türkiye tarihini çok özgün bir şekilde anlatıyordu. Bu arada C.K. Boğaziçi Sosyoloji mezunu bir sosyolog. Orta alt veya orta üst gelir grubu gibi bir çok kavramı ilk kendisinden duydum. Onun öncesinde, tabi daha geniş bir kavram olan orta gelir grubunu duymuştum. Neyse Acemi Eğitim'e gelirsek kitap 41 yaşında ne yaşanabilir diyenleri haksız çıkartabilecek şekilde çok dolu ve biri sürü ilginçlikleri içinde barındıran bir hayatı anlatıyor. Kitabı okurken sıklıkla içimden güldüm ve aynı zamanda hüzünlendim. Kendi hayatıma parallellikler kurdum yer yer. O dönemin popüler bir dizisinin karakterinden yola çıkarak başlayan esnaf tartışmasında patlayan maganda kurşunu ile babasının ölmesi ve dünyanın en ilginç insanlarından sayılabilecek dayısının vegan akımına kapılması sonrasında güya balıkları bilinçlendirme hareketleri yapmaya kalkışması ve boğazdaki ilginç ölümü hüzünlendirdi. Fark edilebileceği gibi CK'nin karşılaştığı her entarasan olayın ucunda köşesinde her zaman bir sosyolojik vaka var.
Kitapta özellikle tanıdık gelebilecek başka bir çok detay da var. Ergenlikte erkek erkeğe toplu halde seyredilen porno filmler, bazen bu filmlerde çıkan tanıdık kişiler ve kitaba ismini veren ilk cinsel deneyimin oluş şekli. Ama benim en çok şaşırdığım hikaye kendini bulmaya gittiği Amerika'da aynı zamanda Ümit Besen hayranı olan bir seri katille bilmeden yakın arkadaşlık kurması ve geçirdiği ölümden kılpayı kurtulma olayı. 
Aslen sosyolog olan C.K. uzun yıllar medyada çalışmış ve televizyona geçmeden gazete yazıları ile sıklıkla haşır neşir olmuş. Kendisinin belki direk dahli olmadan hayatı da gazete haberlerine konu olmuş, özellikle aile üyelerinin hayatı. Kitapta da başlarına gelen olan olaylar bu gazete haberlerinden yola çıkılarak anlatılıyor. 
Genç bir entellektüelin bir önceki döneme göre özgür sayılababilecek Özal'lı döneme ve sonra bir başka kaos hali sayılabilecek 90'lı yıllara denk düşen hayli ilginç ilk gençlik ve orta yaş öncesi anılarını bu kitap sayesinde zevkle okudum.&nbsp;

Acemi Eğitim 

Kitap Eleştirisi  

<img src="https://bolatah.com/maratonPic.jpg" alt="undefined" style="height: ;width: 95%"/>

I made my 10 days holiday coincide with the İstanbul Marathon which is known as the intercontinental marathon and the most famous one in Turkey. The marathon would be run on 6th Nov. I landed in the night on 4thNov in İstanbul Airport. After I traveled from the airport to the Şirinevler district by bus, I took a cab to my home in İstanbul. Because of the less traffic which is not normal in the daytime of İstanbul, it was a nice trip and I made myself home about in 1 hour and 15 minutes.&nbsp;&nbsp;
The day after on Saturday in very nice and warm weather, I went to the congress center in Yenikapı which was also close to the finish point to take the bag including the running equipment such as a t-shirt, chip, and chest number, etc.. There was a kind of fair about the marathon inside too. It was full of people esp. young people. Charity organizations kept a place to deliver their t-shirts to the people that were running for the charities and collected donations. I could not make myself to connect to one of these charities as I was not sure to be there in the right time, although I had to register for the marathon at least one month before. The marathon has also another subcategory about 8 km which is open to people and free of charge. Even for that, you have to register yourself long before. Among these charity organizations, I saw my high school there. Frankly, being there with the people who are excited to run was a nice feeling. in the canteen (Beltur) of Municipality of İstanbul, I drank a coffee. By the way, if you go to İstanbul, I would advise visiting these canteens. You can see them almost everywhere, especially at the Bosphorus and the prices there are relatively cheap.&nbsp;&nbsp;
After traveling from the congress center to Eminönü along the Bosphorus with my mother, which was also part of the marathon that I would run the day after, we made ourselves home. In the evening, I watched the game btw. Galatasaray and Besiktas. Previously, I tried to buy a ticket to watch in the stadium. But it was impossible to buy as all of the tickets were sold out in a few seconds after they were put up for sale. The day before, I saw lots of people with Galatasaray shirts on the plane, who were presumably flying just to watch the game. Briefly, I watched a nice game and my team Galatasaray won which made a great motivation prior to the marathon. Literally, this was my first marathon and I was a little bit excited and could not sleep well.&nbsp;&nbsp;
As usual, I woke up in the early morning at about 6: 00 am. For a breakfast, I ate milk cream together with mulberry syrup. Before leaving, I drank one cup of coffee and took my coffee thermos with me. I wore a soft jacket and jogging trousers over my actual running clothes: the t-shirt inside the bag and a black short. Of course, I took the bag including the stuff that I could not run without them. For the closest metro station, I walked about 15 minutes and saw a few people that have the same bag as me. A young person who was surprised to see people having the same kind of clothes and bags at a very early hour on Sunday morning asked me where we were going. Probably, he was going to work and got shocked even more, as I explained we were going to run the marathon. I was also a little bit shocked, as he did not hear anything about Istanbul Marathon before. Then, he asked whether they gave reward money to the winner. I said they surely give but I didn’t know the amount because I didn’t have any claims as a hobby runner. Later, he said he was playing football in a team and was bored of running and looked as if he was confused and didn’t understand the people who were struggling to run on Sunday morning. After I arrived at the last station in Yenikapı and got on Marmaray which goes through the continents btw. Asia and Europe like the marathon but this time under the ground. By the way except for Marmaray, all the public transportation was free of charge for the runners. In Marmaray, I saw even more runners as they all were ready or making them ready. By looking at them, I put the given chip through the shoelace and tied up my shoe, and pinned the chest number to the front of my t-shirt. The bag with the same number on my chest would be given to the relevant truck before the marathon and given to me after reaching the finish point. By the way, the traffic was totally closed including the Bosphorus bridge. I got off at Üsküdar station on the Asia side as did many others. First, I went to the public toilet before going up to the Bosphorus level. Above, there was a very long queue with the people waiting for the busses that would bring them to the start point. For reaching the back of the queue, I walked quite a long. In the line, I was hearing what people were talking about. They were mostly young people. Among them, I heard about people that were applying for visas. Leaving Turkey and looking for hope abroad has become a phenomenon nationwide nowadays in Turkey which I found very sad as a person who has been living for a long time in Europe. But it is a very important issue that I want to keep short of here. We did not wait long, as the busses were enough to carry all the people.&nbsp;&nbsp;
Following a short time traveling accompanied by the beautiful views of the Asian side of the Bosphorus, we all started to walk to approach the start point. I mention here thousands of people who remind me of open-air meetings before the pandemic. People were finally getting to normal lives. Like many others, I took off the excessive clothes and put them inside the bag. I looked for a place to pee but I could not trust myself to make it alone outside in front of many people. But after a while, I saw many people mostly males running over the meadows and peeing near the trees. As I don’t want to be full during 15 km of running, I did the same thing. Finally, we approached the bridge. I found the place that I would start according to my chest number. Then, I gave the bag to the person waiting inside the truck having the number interval including my chest number. Everything was very well organized and I did not face any problems up to this point. My waiting place was quite away from the start point. But there was nothing to complain about as the chips on our shoes would track us and record the times as we would pass the start and finish points. Among the runners, I saw many tourists and spoke to one couple coming from South Africa. They were jogging enthusiasts that wanted to experience the intercontinental marathon. We said each of us ‘enjoy marathon’ and I tried to approach down to the starting point like many people. Last year in 2021, the marathon was not organized because of the pandemic. Even, there were more runners than the previous years that making the progress to the start line impossible. &nbsp;
Without much distance between us, we waited till the line come up. With a one and half hour delay, I passed the start line at about 10:30 am. Instantly, I was on the bridge without being in a car or public transportation. Behind me Asia, I was passing to Europe. The view was stunning. Many stopped and were taking photos instead of running. There were crowds of people that prevent the people from running. To be honest, it was the most difficult part for me, as I should past these people. Even some runners shouted at them to keep some areas free for the runners. But the experience to be on the bridge and enjoying the view was amazing.&nbsp;&nbsp;
A few minutes later, I came to the end of the bridge. From here till to the finish point, there were continuously people yelling at us at the sides and musicians playing music. During all this time, I listened to different kinds of music and it was like a fest along the marathon route. Shortly later, I passed to the European side, and a gently sloping but steady downward path started. The next path was the long road called ‘Barbaros Bulvarı’ in district Beşiktaş which goes down like a ramp at some point. I passed this part seems like a ramp at a more rapid tempo like a stone rolling down. ‘Barbaros Bulvarı’ brought us to the ‘Beşiktaş Square’ and the crowd on the roadsides got larger and larger as we went further. Before I went through over this road mostly by public transportation and there was always many traffic jam. Sometimes I was walking too, as I like to walk but now I was running without any traffic and it was a strange feeling. On the left, ‘Beşiktaş Çarşı’ was located with lots of cafes and restaurants, you couldn’t walk easily at a normal time because of the crowd. While I was in the boarding school, we were coming here on Wednesdays for a few hours and turned back to school. I made a U-turn here like the others and changed direction to Kabataş along the shore road. Enjoying the view of Bosphorus on the left, I was running on the tram line and so far finished half of the marathon.&nbsp;&nbsp;
Karaköy appeared with ‘Golden Horn’ on the right and suddenly we were on the ‘Galata Bridge. I could see almost all the historical places on the outskirts of the old city. Instead of the local people who were fishing and the tourists taking photos of the historical peninsula on a usual day, I could see now the yelling people who seem to me more cheerful than previous ones and the music was even louder. Frankly, it was the best moment far away I had in the marathon and I was not feeling tired at all. The photo in the background should be taken here. While the photographer was taking the photo, I saw him but I was not sure he was taking a photo of me. ‘Yeni Cami’ and ‘Spice Market’ were in front of me. Then, we turned right and passed the historical train station in Sirkeci and were running on Kennedy Road along the shore. On the right side, I saw once a stand delivering bananas and water to the runners. Some of the runners started to eat the bananas ad had to choke on what they ate. As we passed ‘Sarayburnu’ on the left, we made again a U-turn to the direction of the historical city gates called ‘Ahırkapı’ and ‘Çatladıkapı’. Above us, ‘Gülhane Parkı’, ‘Topkapı Palast’, and the other historical places were standing and the sun started to obscure my view. I always liked the blue tone of the Bosphorus here and thus, this area is one of my favorites in İstanbul. But slightly, I started to feel tired of the heat. Although it was in Nov., the weather was unusually warm and you can walk outside in a t-shirt. The day before, I saw people swimming near ‘Sarayburnu’ rocks. Over time, the number of runners was getting less and less.&nbsp;&nbsp;
I saw the sign showing that 4 km was left to finish. The remaining road was getting longer in my eyes but I didn’t have the intention to stop for a rest. I could barely watch other runners and they might feel the same way. At somewhere between ‘Ahirkapı’ and ‘Çatladıkapı’, my right kneecap started to hurt. I forced myself, but running was getting more painful. About one or two km left to finish, I stopped for one second and tried to stretch my muscles. At this instance, a girl behind me pushed me. Later, I passed to a silent side to stretch. But it was not easy, as the legs couldn’t be stable. Despite all the hardship, I tried to run with the pain. Now, the last 1 km to arrive at the finish point in Yenikapı was becoming like the longest path in my life.&nbsp;&nbsp;
By losing speed, I made myself pass the finish point. I could barely remember these moments, as we passed through a tunnel with the lights waving over us before the finish. Right after I went to the medical tent to get ice to make cold therapy on my knee. The lady inside the tent taking personal information asked me how old I was. Due to the high adrenaline, I answered as 32 instead of 36.&nbsp;&nbsp;
After getting cold, the pain was not that bad anymore and I walked to the open place where runners are allowed to rest on the meadows. I took the food and beverages given. Later, I approached the container that has my bag. The officer congratulated me first and gave me the bag without asking anything as he saw my chest number. With the bag, I entered the public toilet. Suddenly, I saw next to the toilette an abdesthane kind of lavatory where people wash or at least some body parts before praying. Before, I was the only one inside. I took almost a half-shower and changed my clothes. Seeing me, other people came and half of the room was full before I exited. My trouser was wet because the can of energy drink that was given after the marathon was blown inside the bag.&nbsp;&nbsp;
With the smell of the famous energy drink, I went back to the meadows where people were laying. Luckily, I found a pillow to sit next to an older couple and I took off my shoes. Soon after, the concert of ‘Yüksek Sadakat’ started. There were people who were stretching around. A heavy cramp suddenly hit my right foot after sitting. It was very painful that I could barely stand. After resting for a couple hours and chatting a little bit with the couple next to me, I left. A young girl grabbed instantly the pillow I left.&nbsp;&nbsp;
Before I was leaving the area, I saw a stand that was giving a free massage service to the runners which seems that it was worth waiting. There was also an Uruguayan girl in the line with her country’s flag on her back. At first, the flag seemed to me like an Argentinian one and asked her with my little Spanish whether it was an Argentinian flag. She said it was Uruguay. It was strange to see a person from Uruguay except for football players in Turkey. Even, I didn’t remember that I saw an Uruguayan abroad, although I have seen people from many countries. Once I saw a person from Madagascar that shocked me too. After waiting about an hour, I gave up. They also announced that they would do just 15 minutes more. I took the last mineral water and I exited from there.&nbsp;&nbsp;
Next to this place in Yenikapı, there was another event called ‘Diyarbakır Tanıtım Günü’ which was organized by the people who come from Diyarbakır, the largest city in South-eastern Turkey. I have been before in these region-days. As I entered the open area through an iron door, I got first the heavy smoke smell that came from many barbecues around. Diyarbakır is famous for its kitchen relied mainly on meat esp. liver kebab. I did not eat anything as I was not hungry yet and the lines in front of the stands were very long. I entered the buildings where you can find local products from Diyarbakır and bought cheese for home. Then, I went to Kennedy Road located on the shore to take a bus and was not sure to go home. From there, I could go to Bakırköy or in the reverse direction that goes to Eminönü. I decided to go back to Eminönü where I run through today. As I approached the stop, I haven’t seen anybody waiting. A single car with an advertisement for the energy drink was waiting on the road. Later, I saw a person who was still running for 42 km, and the road was not open to traffic yet. Once more, I thought about how a 42 km marathon seemed as unimaginable.&nbsp;&nbsp;
Although I had muscle pains esp. when I was going down or up the stairs, I did not want to go home early. I decided to walk from there to the Marmaray Station which was about 2,5 km far away and passed to the Asia side to meet a friend of mine. By the way, I got the text message that I finished the 15 km in 1 hour and 25 minutes. On the way, I thought about how so many memories I had accumulated in such a short time.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

İstanbul Euroasia-Marathon

A Marathon Story

9 Euro ticket ilk 6 gününü doldurdu ve performansı halkta tamamen bir hayal kırıklığı yarattı. Gerek temizlik, gerek doluluk yönünden devlet demir yolları tamamen sınıfta kaldı. Gelişmeleri buradan takip edin..

Open Blog

Let`s start the journey

When a subject should used ?

Subject usecases

usersSelector

usersSelector

usersReducer as an example for a data fetching

usersReducer

reducers in ngrx store

reducers

Custom Pipe

Custom pipe transforms a unix timestamp in frontend to date object

dateToUnixTimestamp

dateToUnixTimestamp

Auth Interceptor

Auth Interceptor

a dialog component for Crud methods

a dialog component

navigating to fragments in a page

fragment

how the matTableDataSource is implemented on a table

MatTableDtaSource

Film Eleştirisi

Kurak Günler

Kitap Eleştirisi

Acemi Eğitim

A Marathon Story

İstanbul Euroasia-Marathon

9 Euro ticket hakkında

Sakın denemeyin