Pass data from html.page to .ts file

I get data from API to Html and I want to pass them to ts. Is there another way?

html page

<button (click)="getPdfFile()"  >{{ item.BILL_ID}}</button>
<ion-input [(ngModel)]="inputfile" value="{{item.File.data}}">{{ item.File.data}}</ion-input>

.ts file

filedata:any;
getPdfFile(){
    let filedata1 = this.inputfile;
}

It doesn’t pass the value. Where’s the mistake? Thnx!

html page
<button (click)=“getPdfFile(item)” >{{ item.BILL_ID}}
<ion-input [(ngModel)]=“inputfile” value="{{item.File.data}}">{{ item.File.data}}

.ts file
filedata:any;
getPdfFile(item){
console.log('what did I get?',item);
let filedata1 = this.inputfile;
}
1 Like

Do yourself a favor and read angular.io’s guide on property binding.
And even so: go through the Tour of Heroes tutorial :slight_smile:

1 Like

I fixed it this way
let filedataa = document.getElementById(“filedata”).value;

but I got a new problem
let array = new Uint8Array([filedataa]);

“Type ‘Uint8Array’ is missing the following properties from type ‘String’: charAt, charCodeAt, concat, localeCompare, and 35 more.”

array stays 0
Do u know any way to fix this?

The error tells u that u defined array to be an array and u want to make it something else - a compile time effect

That is likely not explaining the resulting value - a runtime effect

So there’s a lot here that you’re not showing. Can you make a more complete demo in the form of a github repo?

Also a quick rule of thumb, anytime you use document in angular, you’re making a mistake. What is it you are trying to do?

1 Like

Do you know any way to pass data without having to press any button but in ngOnInit(){}?

<ion-item *ngFor=“let item of userDetail”>
<button (click)=“passdata(item.Customer_ID)”>passid

I need Customer_ID back at ts file. but without pressing a button.
I was thinking of creating a function that triggers button click but I was hoping for a better solution?

There is only one “ts file” (I call them “controllers” for historical reasons) corresponding to a given template. In the relevant part of your template, you use an ngFor structural directive, which creates many similar sections of markup, each having a different value for Customer_ID (which really needs a more customarily formatted name like customerId).

Therefore I cannot understand which customerId you “need back at ts file”. The reason this button idiom makes sense is that it answers that question: in the controller we want to do something with the customerId corresponding to the button that was pressed. There is a distinct user action that tells us which customerId to operate on. If you try to do this with “a function that triggers button click”, then all I see is the problem being kicked down the road. What determines when to call that function (and with what arguments), if not a button press?

Thanks for responding :slight_smile: ,
When logged in in my app the username is sent to a service and from that service, I get the username to a specific ts page.
I created a node.js get request that get the ID of that customer that got logged in by providing the username.

this.username = this.service.username;
this.api.getUserDetailByUsername(this.username).subscribe(res=>{
console.log(res)
this.userDetail = res;
}, (err) => {
console.log(err);
});

from this, I get the customer id in HTML page.

<ion-item *ngFor=“let item of userDetail”>
<button (click)=“passdata(item.Customer_ID)”>passid

when this button is pressed
passdata(item){
this.cid = item;
this.getPdfDataBycid(item);
this.getTransacBycid(item);
}

I get other node.js responses based on this ID.
I cant send this id from HTML to ts without pressing the button. But once pressed it works.

I’ll try to just reiterate the main point here.

You have multiple customers displayed on the same page. The way you have written the template, each customer has a dedicated button. Therefore, the controller can know which customer it is to operate on by which button is pressed. Without the button press, how can the controller know which of the many customers it is supposed to passdata for?

You can stop reading now and come back later if you wish, because that’s the important issue.

If you’re still reading, I think naming things is incredibly important. Here are some problems I have with passdata:

  • Generic words like “data” and “item” don’t convey much information.
  • “pass” implies that it’s sending something somewhere, but it doesn’t appear to be doing that
  • It calls two methods whose names start with 'get`, implying that they get something, yet their return values are ignored

passdata modifies external state. It does so explicitly with the cid assignment, and I strongly suspect that (despite their deceptive naming) the other two lines do something similar as well. So, even if you managed to achieve what it sounds like you want to achieve, you would loop through every single item, each call to passdata trampling over the actions of the previous call. I’m not seeing any value there.

No there isn’t a button dedicated for a customer. The button gets the id of the customer that logged in. If the button isn’t pressed nothing is shown. I just put a button to see if it would work that way, and it did. but the name of the button was random cause I didn’t think it would take long to remove it.

The controller will use a nodejs get request to get customerid by username(username is stored in a service when logged in successfully).

So this just gets the id of the person who is logged and I want to show the saved in this case pdf files of this specific user.

The only solution that comes to my mind is to get the response of the nodejs request in the ts file but I don’t know how to do that…

This description is not consistent with the code you posted:

<ion-item *ngFor=“let item of userDetail”>
<button (click)=“passdata(item.Customer_ID)”>passid

This will result in N <ion-item>s, one for each member of userDetail. The argument to passdata is dependent on the looping variable item, meaning that the parameter to passdata depends on which of those N buttons was clicked.

That’s not true unless you can guarantee that every member of userDetail has the exact same value for customerId.

Sorry, I get what you meant before, it really does seem that there is a button dedicated for a customer.

this.api.getUserDetailByUsername(this.username).subscribe(res=>{
console.log(res)
this.userDetail = res;
}, (err) => {
console.log(err);
});

In this.userDetail is stored only the customer id of the username of the logged person. So there is only one Customer_ID to get, cause the username is unique. I should have clarified that.

If you are looking for a general solution to the problem “how do I distribute information like ‘profile of the logged-in user’ across my app?”, here is how I do it.

1 Like