Does Angular / AngularDart allow components to display arbitrary child components?


I am building a calendar component, and I would like to provide the following API to users:

    <my-custom-day [day]="day"></my-custom-day>

Where fancy-calendar is responsible for keeping track of the current month that the user selects. Internally, I would like to implement it using something like *ngFor:

<div *ngFor="let day of daysInMonth">
    <ng-content [day]="day"></ng-content>

This doesn’t seem to work because ng-content can’t send arbitrary values (in this case, the current day.)

Do I need to write a custom directive for this? How can I give users the ability to use their own component for days?


You can do this by using dynamic component loading.

I answered a similar question for TS in Angular dynamic tabs with user-click chosen components

The easiest way to use this with *ngFor is to build a helper component that you pass the type or factory to for the component you want it to create.

Another way would be using
where the user passes content as template

      <my-custom-day [day]="day"></my-custom-day>

and fancy-calender uses NgTemplateOutlet to render it.
With *ngFor could be used as well to render the same template multiple times.

Answered By – Günter Zöchbauer

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *