Declarative Programming

ng g c components/pages/declaratove-posts
ng g s services/declarative-posts

const routes: Routes = [
  { path: '', component: PostsComponent },
  { path: 'decposts', component: DeclarativePostsComponent }
];

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" 
            routerLink="/">Posts</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" 
            routerLink="decposts">Declarative Posts</a>
    </li>
</ul>

export class DeclarativePostsService {
  baseUrl = 'http://localhost:3000';
  posts$ = this.http.get<Post[]>(`${this.baseUrl}/posts`);

  constructor(private http: HttpClient) { }
}

export class DeclarativePostsComponent {
  posts$ = this.postService.posts$;
  
  constructor(private postService: DeclarativePostsService){}
}

<div class="row">
  <div class="col-md-12">
    <h3>Posts Data</h3>

    <table class="table" *ngIf="posts$ | async as posts">
      <thead>
        <tr>
          <th>Id</th>
          <th>Title</th>
          <th>Body</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let post of posts">
          <td>{{ post.id }}</td>
          <td>{{ post.title }}</td>
          <td>{{ post.body }}</td>
          <td>{{ post.categoryName }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

ng g s services/declarative-categories

export class DeclarativeCategoriesService {
  baseUrl = 'http://localhost:3000';
  categories$ = this.http.get<Category[]>(`${this.baseUrl}/categories`);

  constructor(private http: HttpClient) { }
}

postsWithCategory$ = combineLatest([
    this.posts$,
    this.categoriesService.categories$
  ]).pipe(
      map( ([posts, categories]) => {
      return posts.map((post) => {
        return {
          ...post,
          categoryName: categories.find(category => category.id === post.categoryId)?.title
        } as Post
      })
}));

posts$ = this.postService.postsWithCategory$;