Currently, I am tackling a challenge within my Angular project that involves the following situation:
Essentially, my HomeComponent view code looks like this:
<div class="courses-panel">
<h3>All Courses</h3>
<mat-tab-group>
<mat-tab label="Beginners">
<courses-card-list [courses]="beginnerCourses$ | async"></courses-card-list>
</mat-tab>
<mat-tab label="Advanced">
<courses-card-list [courses]="advancedCourses$ | async"></courses-card-list>
</mat-tab>
</mat-tab-group>
</div>
Furthermore, here is the corresponding TypeScript code:
import {Component, OnInit} from '@angular/core';
import {Course, sortCoursesBySeqNo} from '../model/course';
import {interval, noop, Observable, of, throwError, timer} from 'rxjs';
import {catchError, delay, delayWhen, filter, finalize, map, retryWhen, shareReplay, tap} from 'rxjs/operators';
import {HttpClient} from '@angular/common/http';
import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
import { CoursesService } from '../services/courses.service';
// Component declaration and initialization code here...
Within the component initialization process, I first retrieve an Observable using the loadedAllCourses() method from a service class (which makes an HTTP request to an API). Subsequently, I create two additional Observables, beginnerCourses$ and advancedCourses$, by filtering courses based on the retrieved data.
In the view of my HomeComponent, I declare the courses-card-list component which displays course information as follows:
<courses-card-list [courses]="beginnerCourses$ | async"></courses-card-list>
and:
<courses-card-list [courses]="advancedCourses$ | async"></courses-card-list>
This segment illustrates the view code for the courses-card-list component:
<mat-card *ngFor="let course of (courses | async)" class="course-card mat-elevation-z10">>
<mat-card-header>
<mat-card-title>{{course.description}}</mat-card-title>
</mat-card-header>
<img mat-card-image [src]="course.iconUrl">
<mat-card-content>
<p>{{course.longDescription}}</p>
</mat-card-content>
<mat-card-actions class="course-actions">
<button mat-button class="mat-raised-button mat-primary" [routerLink]="['/courses', course.id]">
VIEW COURSE
</button>
<button mat-button class="mat-raised-button mat-accent"
(click)="editCourse(course)">
EDIT
</button>
</mat-card-actions>
</mat-card>
Additionally, here is the backend code associated with this functionality:
import { Component, OnInit, Input } from '@angular/core';
import { Course } from '../model/course';
import { MatDialogConfig, MatDialog } from '@angular/material/dialog';
import { CourseDialogComponent } from '../course-dialog/course-dialog.component';
// Backend logic implementation code here...
Upon running my application, I encounter error messages seemingly related to the usage of two async pipes. The specific errors include:
ERROR Error: InvalidPipeArgument: '[object Object],[object Object],[object Object]' for pipe 'AsyncPipe'
ERROR Error: InvalidPipeArgument: '[object Object],[object Object],[object Object],[object Object],[object Object]' for pipe 'AsyncPipe'
How can I resolve this issue?</p>
<p><em><em>EDIT-1</em>:</em>: Here is the code snippet from my service class:</p>
<pre><code>Code excerpt for the loadedAllCourses() method...
The loadedAllCourses() function returns an Observable, which I utilize in my HomeComponent through the async pipe to obtain the courses array needed for passing it to my subcomponent.