How do I pass multiple parameters to an @Input decorator function in Angular 4

Question

My Input decorator looks like this

    @Input()
   filler(itemName:any,itemRate:number,itemQty:number,itemDiscount:number,itemSubtotal:number)
{
 this.cart.push({name:itemName,rate:itemRate,qty:itemQty,discount:itemDiscount,subtotal:itemSubtotal});
  }

and the call looks like this

<app-bill [filler]="['Name','Rate', 'Qty', 'Discount', 'Subtotal']"></app-bill>

and I need to pass all those 5 values to the "filler()".

Sajeetharan · Accepted Answer · 2017-10-06 11:42:01Z

2

Create a object of that type and pass the values,

<app-bill [filler]="item"></app-bill>

where item is created from class which has all the fields

Item.ts

class Item {
    Name: string;
    Rate: number;
    Qty : number;
    Discount : number;
    SubTotal: number;
}

In your Catalog Component.ts

import { Item } from 'Item';

 export class CheckOutPageComponent{
 item : Item;
 ngOnInit() {
        item.Name = 'test';
        ,,,,,,assign rest of values here
 }

edited Oct 6, 2017 at 11:42

answered Oct 6, 2017 at 10:05

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kedar Udupa Over a year ago

where should I create that class and how do I use it

Sajeetharan Over a year ago

In your application

Sajeetharan Over a year ago

@KedarUdupa it should be in parent component

Kedar Udupa Over a year ago

I have a "Bill Component" with a "@Input" decorator and a "Catalog Component" from which I need to send data to "Bill Component", I created a class in "Catalog Component" but it didn't work.If you could be more precise it would be really helpful..?!

Collectives™ on Stack Overflow

How do I pass multiple parameters to an @Input decorator function in Angular 4

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related