As someone who primarily specializes in backend development rather than Angular, I find myself facing a challenge and seeking guidance. Despite my lack of expertise with Angular, I am attempting to work out a concept that may or may not be feasible. My struggle is compounded by the difficulty of articulating my question effectively through online searches. I hope to describe my predicament clearly, share my objectives, explain how I envision the solution working, and receive advice on whether this approach aligns with Angular conventions, its feasibility, and possibly an example implementation.
Our Single Page Application (SPA) utilizes a .NET Core Web API backend which includes an API endpoint called /api/feedItems. This endpoint returns a collection of "feed items" akin to event logs.
The structure of a feed item can be summarized as follows:
export enum FeedItemType {
undefined = "undefined",
foo = "foo",
bar = "bar"
}
export class FeedItemModel {
id: number;
createdUtcTimestamp: Date;
feedType: FeedItemType;
feedData: {} // object? any?
}
In essence, each feed item comes with standard metadata such as an identifier, timestamp, and payload. The content of the payload varies depending on the FeedItemType.
A sample response from the API call presenting a list of feed items could resemble the following:
[
{
"id":12345,
"createdUtcTimestamp":"2018-12-05T13:30:00Z",
"feedType":"foo",
"feedData":{
"name":"this is a foo type feed",
"description":"This foo feed is describing an event of type 'foo'"
}
},
{
"id":67890,
"createdUtcTimestamp":"2018-12-06T15:45:00Z",
"feedType":"bar",
"feedData":{
"value1":11111,
"value2":22222,
"value3":33333
}
}
]
We have numerous feed item types, each necessitating a tailor-made visualization for optimal data presentation.
I aim to create an Angular component responsible for fetching the feed item list from the API, iterating over the items using an *ngFor directive, displaying common properties for each item, and dynamically rendering a different "sub" component based on the feedType.
In our scenario, the container component structure would look like this:
<div class="feed-item-container" *ngFor="let feedItem of feedItemList; let i = index;">
<div class="feed-item">
<div class="timestamp-display">{{feedItem.createdUtcTimestamp}}</div>
<!-- conditional render based on "feedItem.feedType == 'foo'",
potentially using ngIf or ngSwitch directives -->
<feed-item-foo (method of passing feedData here needs clarification) />
<!-- conditional render based on "feedItem.feedType == 'bar'" -->
<feed-item-bar (uncertainty surrounds the contents of this section) />
<!-- fallback render if no matching feedType found -->
<feed-item-generic (placeholder required) />
</div>
</div>
The objective is to allow external creation of components as needed without extensive modifications (ideally none) to the container template. It would be beneficial if I could programmatically identify the feedType, locate a registered component selector corresponding to it, and automatically pass the feedData to it. However, manual referencing of components in the container is also acceptable. I seek to avoid consolidating all rendering logic within the container to prevent complexity and maintainability issues.
The individual feed item components should feature distinct formatting tailored to their respective feed types, including unique styles and functionalities. I wish to circumvent the creation of a monolithic feedItem container component.
Hence, my query centers around the possibility and methodology involved in achieving this goal.