Using a component again with variations in the input data

I'm looking to reuse a card component to display different types of data, but the @Input() properties are for different objects (articles and events).

Parent HTML:

<card-component [headline]="Articles"
                [content]="articles">
</card-component>

<card-component [headline]="Events"
                [content]="events">
</card-component>

Card Component TS:

@Input() headline!: string;
@Input() content!: Array<Article> | Array<Event>

Article object:

{
  author: string,
  blurb: string
}

Event object:

{
  organizer: string,
  location: string,
  rsvpRequired: boolean
}

I think I need to create a new object in the card component ts file to standardize Article and Event into a single type, but I'm unsure of how to do this.

angulartypescript

Answer №1

This potential solution could offer some insight by incorporating optional inputs.

TS:

@Input() title!: string;
@Input() posts?: Array<Post>
@Input() activities?: Array<Activity>

This approach allows for passing essential inputs whenever needed. For instance, if the content consists of posts, only pass [posts]="posts", and vice versa.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to convert a JSON input object to a model class using TypeScript in a Node.js application?

Currently, I am developing my Node.js server using TypeScript and the express framework. Here is an example of what my controller and route looks like: export class AuthController { public async signUpNewUser(request: Request, response: Response) { ...

node.jstypescriptexpress

Angular: The metadata version does not match for the module located in src/app/app.module.ts. A version of 3 was found when version

Recently, I made the transition from Angular 4.0.0 to 5.2.0. However, after implementing the recommended changes, I encountered a perplexing error message: ERROR in Error: Metadata version mismatch for module /home/khalidvm/Desktop/Workspace/Front/Migrat ...

angularnpmnode-modulespackage.json

The Angular subscription gets triggered multiple times

I am currently subscribed to this service: login(): void { if (!this.loginForm.valid) { return; } const { email, password } = this.loginForm.value; this.authService.login(email, password).subscribe((res) => { if (res.ok) ...

angularservice

Angular 5 - Error: Uncaught ReferenceError: req variable is not defined

After upgrading my Angular project from version 4.4.3 to 5, I made sure to update all angular packages to the latest Angular 5.0.0 as per the guidelines provided. Additionally, I updated the angular CLI to version 1.5.0. However, ever since this update, I ...

angularangular-cliangular5

akka-http integrated with angular2 routing

Currently, I am facing an issue with serving my Angular2(rc3) app from akka-http (a Scala rest framework). The problem lies in routing. Whenever a request is made, spray attempts to locate /my/endpoint/declared/in/angular as a regular resource. How can I r ...

angularakka-http

Downgrading from Angular 2.4.9 to 2.4.8: A Step-by-Step Guide

I've searched everywhere and can't figure out how to downgrade @angular/core to version 2.4.8. I installed @angular/cli with version 1.0.0-rc.0 because 1.0.0-rc.1 has some bugs. Now I want to downgrade @angular/core as well because I can't ...

angular

Solution for dealing with error 'Cannot find Property length on type {} in React using TypeScript

Any ideas on how to fix the error "Property 'length' does not exist on type '{}'"? Below is the code snippet causing the issue: //component const SearchResults = ({ results }: { results: {} }) => { let pageCount = results? ...

reactjstypescriptnext.js

Loading dynamic components asynchronously in Vue 3 allows for improved performance and enhanced user experience

My goal is to dynamically display components based on their type. Here's how I'm approaching it: I have several similar components that should show different content depending on their type. Using the defineAsyncComponent method, I can easily im ...

typescriptvue.js

Universal loading screen across all components

I am currently implementing a loading screen for this component in conjunction with the fetch method. My concern is whether I will need to replicate the same loading logic used in the example for every component that utilizes the fetch() method, or if the ...

reactjstypescriptnext.js

I am in search of a method to rephrase the content while minimizing redundancy

I am looking to improve the code for handling two different conditions in the UI. Can someone suggest a better way to rewrite it? <i *ngIf="measures.length > 0"> <ul *ngFor="let m of measures"> <io-data-selection-row [text] ...

javascriptangular

Leverage the JSON Web Token module within a Chrome extension

Currently in the process of developing a chrome extension but encountering an issue with loading the json web token node module in my Node.js setup. background-script.ts import jwt from 'jsonwebtoken'; // import * as jwt from '../node_mod ...

node.jstypescriptgoogle-chrome-extension

Sharing data among components in Angular 6

I've set up 2 components and a service as outlined below: component-interaction.service.ts @Injectable() export class ComponentInteractionService { public dataSubject = new BehaviorSubject<string>("Test"); getTestData(): Observable<an ...

angularobservableangular6behaviorsubject

Sort your list efficiently with a custom hook in React using Typescript

I've been working on developing a custom hook in React that sorts an array based on two arguments: the list itself and a string representing the key to sort by. Despite trying various approaches, I haven't been able to find a solution yet. I&apos ...

javascriptreactjstypescript

Encountered an error while trying to retrieve data from

Having trouble with file uploads to the S3 bucket using @aws-sdk/client-s3 library and encountering errors when uploading files larger than 70kbps: `TypeError: Failed to fetch at FetchHttpHandler.handle (fetch-http-handler.js:56:13) at PutObjectCommand ...

javascriptnode.jstypescriptaws-sdkreact-tsx

Bring in a template in TypeScript with no need for require statement

Currently, I'm utilizing TypeScript along with Angular 1.5 component. In my scenario, I have a custom decorator in place through which I send templates via require function. The setup is functional; however, I am consistently receiving a tslint warnin ...

angularjstypescriptimportecmascript-6

Using Typescript to transform a list into function arguments

My current challenge involves a set of arguments structured like so: const args: FeatureEventArg[] = [ { name: 'username', type: 'string', }, { name: 'message', type: 'string', }, { name ...

typescripttypestypescript-typings

Having trouble monitoring button clicks with Jest and React Testing Library while testing a component scenario

Hey there, I'm new to React testing library and I've been struggling with writing a test case that isn't giving me the results I expected. I could really use some guidance. When I run npm run test, it shows the expected number of calls >= ...

reactjstypescriptjestjsreact-testing-library

Error in Angular 2: Trying to access a property that is undefined - 'Symbol(Symbol.iterator)'

It appears that the error I am encountering is related to how I handle data when returning it. I have been unable to pinpoint where my return statement may be missing or if that is even the root cause of the issue... The error occurs when deleting somethin ...

angularangular2-services

Utilize the grid system from Bootstrap to style HTML div elements

I am working on my angular application and need help with styling items in a Bootstrap grid based on the number of elements in an array. Here's what I'm looking to achieve: If there are 5 items in the array, I want to display the first two items ...

htmlcssangular

Guide on combining two classes as the base class for an extended class in Typescript

Is it possible to create a higher order function (HOF) that modifies or adds a property to the prototype of a given class? interface IStore { new (): {}; } interface IWatchable { new() : { watch: boolean; }; } const Store = <T extends ISt ...

typescripttypesconstructorcastingextends