Guidelines for utilizing NgFor with Observable and Async Pipe to create Child Component once the data has been loaded

Question

Guidelines for utilizing NgFor with Observable and Async Pipe to create Child Component once the data has been loaded

Encountering an issue while attempting to display a child component using data from an Observable in its parent, and then utilizing the async pipe to transform the data into a list of objects for rendering with *NgFor. Here's what I've done:

Create Observable Data in Parent Component:

// Parent Component
dataSet$!: Observable<Data[]>;

ngOnInit() {
  this.dataSet$ = this.serviceData.getData();
}

Pass Data from Parent to Child Using Async Pipe:

<!-- Parent Component Template -->
<ng-container *ngIf="dataSet$ | async as dataSet">
  <app-row-data-list *ngFor="let data of dataSet" [data]="data"></app-row-data-list>
</ng-container>

Child Component with @Input Property:

// Child Component
export class RowDataListComponent {
  @Input() data!: Data;
}

Despite my efforts, the data is not displaying as expected, and the child components are not appearing.

I have tried implementing the solutions provided in the following responses:

However, none of these solutions resolved the issue. I have also conducted extensive research on this matter.

I have spent several hours trying to resolve this problem, so any assistance would be greatly appreciated.

Thank you.

Edit: Following guidance from one of the answers here, I was able to address the issue. I followed these steps (Refer to Stack Blitz example):

https://angular-ch...示例-uxz7dg.stackblitz.io

angular typescript rxjs

Answer 1

Answer №1

I cannot guarantee the specific code you are looking for, but here is a functional example:

interface Article {
  articleId: number;
  userId: number;
  title: string;
  published: boolean;
}

type Articles = Article[];

@Injectable({ providedIn: 'root' })
class ArticleService {
  private http = inject(HttpClient);

  getArticles() {
    return this.http.get<Articles>(`https://jsonplaceholder.typicode.com/posts`);
  }
}

@Component({
  selector: 'app-article',
  standalone: true,
  template: `
    <pre>{{article() | json}}</pre>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [JsonPipe],
})
export class ArticleComponent {
  article = input<Article>();
}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Greetings from {{ user }}!</h1>
    <app-article *ngFor="let post of (posts$ | async)" [article]="post"></app-article>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ArticleComponent, NgFor, AsyncPipe],
})
export class App {
  user = 'Angular';

  private articleService = inject(ArticleService);

  posts$ = this.articleService.getArticles().pipe(startWith([]), share());
}

bootstrapApplication(App, { providers: [provideHttpClient()] });

Take a look at this StackBlitz sample

Answer 2

I cannot guarantee the specific code you are looking for, but here is a functional example:

interface Article {
  articleId: number;
  userId: number;
  title: string;
  published: boolean;
}

type Articles = Article[];

@Injectable({ providedIn: 'root' })
class ArticleService {
  private http = inject(HttpClient);

  getArticles() {
    return this.http.get<Articles>(`https://jsonplaceholder.typicode.com/posts`);
  }
}

@Component({
  selector: 'app-article',
  standalone: true,
  template: `
    <pre>{{article() | json}}</pre>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [JsonPipe],
})
export class ArticleComponent {
  article = input<Article>();
}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Greetings from {{ user }}!</h1>
    <app-article *ngFor="let post of (posts$ | async)" [article]="post"></app-article>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ArticleComponent, NgFor, AsyncPipe],
})
export class App {
  user = 'Angular';

  private articleService = inject(ArticleService);

  posts$ = this.articleService.getArticles().pipe(startWith([]), share());
}

bootstrapApplication(App, { providers: [provideHttpClient()] });

Take a look at this StackBlitz sample

Guidelines for utilizing NgFor with Observable and Async Pipe to create Child Component once the data has been loaded

Answer №1

Similar questions

Navigate to a concealed area once the information has been loaded in Angular

A step-by-step guide on assigning values to an Angular Material Auto Complete component in Angular 7

When trying to pass props into setup using VueJS 3 Composition API and TypeScript, an error may occur stating: "Property 'user' does not exist on type"

Navigating through multiple pages in Angular2 with Rails5

Svelte with Typescript: Uncovering the Types of Props

The type 'Dispatch<any>' cannot be assigned to the type '() => null'. Error code: ts(2322)

Handling JSON data with Reactive Extensions in JavaScript

Leveraging import and export functionality in TypeScript while utilizing RequireJS as a dependency

Steps to resolve the issue with "Error: StaticInjectorError(AppModule)[NgbDropdown -> ChangeDetectorRef]"

Encountered an issue during the transition from Angular 7 to Angular 9

Encountering TypeScript errors while trying to implement Headless UI documentation

How can you test component methods in Angular?

Declaring a function type with a void parameter type in typescript

Both radio buttons are being chosen simultaneously

Utilizing Filters (Pipes) in Angular 2 Components without Involving the DOM Filters

TypeScript async function that returns a Promise using jQuery

Encountered a runtime error while processing 400 requests

Angular auto-suggest components in material design

Sharing Information Across Angular Routes

Customize the border color of a dynamic textbox with Angular