Utilize the ES6 spread operator to send information across components as props

ChildComponent.ts

export class ChildComponent implements OnInit {
  @Input() name?: string;
  @Input() email?: string;
  // Many more properties

  constructor() {}

  ngOnInit(): void {}
}

ParentComponent.ts

export class ParentComponent implements OnInit {
  childProps = {
    name: "johnny",
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1dbded9dfdfc8f1d6dcd0d8dd9fd2dedc">[email protected]</a>"
  };

  constructor() {}    
  ngOnInit(): void {}
}

ParentComponent.html

This setup function as intended:

<app-child [name]="childProps.name" [email]="childProps.email"></app-child>

Is there a way to pass all properties using the ES6 spread operator?

<app-child [*]="{...childProps}"></app-child>

Answer №1

To improve the structure, consider creating an interface for the props and then pass it as an object instead of using spread or multiple @Inputs().

// child.ts

export interface ChildProps {
  name?: string,
  email?: string 
}

export class ChildComponent implements OnInit {
 @Input() allProps?: ChildProps;

 constructor() {}

 ngOnInit(): void {}
}
//parent.ts

export class ParentComponent implements OnInit {
  childProps = {
    name: "johnny",
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3431363030271e39333f3732703d3133">[email protected]</a>"
  };

  constructor() {}    
  ngOnInit(): void {}
}
<!-- parent-template.html -->

<app-child [allProps]="childProps"></app-child>
<!-- child-template.html -->

<div>{{ allProps?.name }}</div>

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

Populate dropdown options in Angular dynamically

I am attempting to populate a dropdown with relevant data based on the selection from another dropdown. Here is my code snippet: HTML <select class="form-control" (ngModelChange)="onChange($event)"> <option disabled="true">{{ txtOptDefault ...

Why is it necessary to redefine the interface and its class in Typescript after initially defining the interface with implements?

interface Filter { rowAddRow: (treeData:Tree[],id:string,filterType:FilterType) =>Tree[] } class FilterAction implements Filter { // I must redeclare here to ensure the correct type for id rowAddRow(treeData:Tree[], id, filterType):Tree[] { ...

What is the process of personalizing a DaisyUI theme in Tailwind with TypeScript?

I am trying to tailor an existing DaisyUI theme using my tailwind.config.ts file for my Next.js project. Although the DaisyUI documentation only provides examples in JavaScript (text), I want to customize it within my TypeScript environment. Below is a s ...

Combining the MergeMap and Map operators in RxJS using Typescript

Struggling to grasp the concept of RxJS, I am currently learning and trying to understand this code snippet: mapOfPeople = new Map<number, any>(); const people = [ { name: 'Sue', age: 25 }, { name: 'Joe', age: 30 }, { name: ...

tips for updating the input format of your ngx-datepicker

My goal is to receive a date input in the format yyyy-mm-dd, however, even after selecting the date correctly, I am receiving it in the 2019-07-08T12:16:10.000Z format. <input class="form-control" style="width: 48%;display: ...

React is throwing an error stating that ref.current.contains is not a valid function

I created a dropdown toggle feature in my React application that is functioning perfectly. However, I encountered an error when I attempted to close the dropdown by clicking outside of the menu. To address this issue, I utilized a reference to locate the ...

The Response header in Angular 5 HTTP Client is lacking the "Authorization" field

Currently, I am integrating JWT (JSON Web Tokens) into the system for user authentication. The code snippet responsible for this task is shown below: this.http.post(url, JSON.stringify({ username: username, password: password }), { observe: 'response ...

Waiting for all promises in TypeScript and returning the results

Working on some Node.Js code, I decided to utilize promise.all for parallel execution. To illustrate the issue, here's a snippet from my code: in MyService.ts @Injectable() export class MyService { constructor(private readonly anotherService: An ...

The call stack has surpassed the limit while utilizing the latest TypeScript-enabled update of ReactJS

I am currently using the latest version of ReactJS with TypeScript support, along with Redux-orm. However, I am encountering an issue when trying to insert a value into the store - "Maximum call stack size exceeded". This problem does not occur when using ...

What is the correct way to organize data with a groupBy function while handling an HTTP response

My goal is to group the JSON data by product_category, but the array JSON I have is nested. Here is an example of what it looks like: [ { "result": "success", "data": [ { "product_id": 17, "p ...

Developing a consistent layout and formatting approach for various devices with NativeScript

I am currently developing an app using NativeScript 6 and Angular 8. This app needs to be compatible with both Android and iOS devices, as well as various screen sizes and dimensions. My goal is to maintain a consistent look and feel across all devices b ...

How to Implement Click Event Handling and Animation Effects in Angular 4

Every time I click on an item in the accordion list, all items expand. Is there a way to only open the card whose header was clicked? check out this plnkr example app.component.html <div id="accordion" *ngIf="res"> <div clas ...

Can I prevent users from selecting Today and future dates in Angular with ngx-bootstrap datepicker?

https://i.sstatic.net/hXpjn.pngHi there, I'm new to Angular and could use some assistance. I tried using the following code snippet to disable today and future dates: <input class="form-control" placeholder="Datepi ...

Issue with encoding the string in TypeScript is not being resolved appropriately

My application is developed using Angular 7 with Typescript. The code snippet below is from a typescript file: this.confirmationDialogService.confirm(null, 'er du sikker på, at du vil gøre denne ændring', "Acceptere", "Afvise") However, aft ...

Encountering the message "npm ERR! missing script: start" following the update to .Net 3.0

Previously, the ASP.Net Core 2.2 code (upgraded from 2.1) did not include a start script in package.json. https://github.com/TrilonIO/aspnetcore-angular-universal/blob/master/package.json Upon upgrading to ASP.Net Core 3.0, it now requires a start script ...

Release a new font on npm for integration into your project

In my current web-application project using angular2, I've designed a unique set of music glyphs such as notes, dotted notes, and time signatures. I couldn't find an existing font that suited my needs, so I created this custom font hierarchy: f ...

Set an interface to null within Angular 4

I've created an interface in Angular 4 called StatusDetail: interface StatusDetail { statusName: string, name: string } Next, I assigned some values to it within an Angular component: //Angular Component export class EditComponent implemen ...

How can we enhance the React.Component interface by adding a "direct" property?

Consider the following code snippet: interface Props extends React.HTMLAttributes { // ... } interface State { // ... } interface TextFieldComponent { field: HTMLInputElement | HTMLTextAreaElement } export default class TextField extends React.Co ...

Disable Styling and Override Readonly CSS restrictions

What is the correct approach for customizing material design styling when input fields are disabled? Out of the Box https://i.sstatic.net/CvcAV.png Explore Angular Material Input Examples I managed to achieve my objective using the following CSS, but I ...

Creating a user-friendly interface for an array of objects, complete with an included array containing those same objects

I have an array that I want to iterate through. It contains a single object and an array of objects. How can I create an interface for this structure? What is the appropriate declaration to replace any[]? Here is the code: export const initialPhotoProps: ...