Passing data in Angular within same component

JavaScript
#1

When I click on the button that calls the following method I get the selected package name logged out in the console, GREAT!

showPackageProducts(thispackage: Package): void {
    this.selectedPackageId = thispackage.id;
    this.selectedPackage = thispackage;
    this.productNames = this.selectedPackage.products.split(',');
    this.packageSelected = true;
    console.log('the package name is: ', this.selectedPackage.name);
  }

when I try to output this in my html page (OUTSIDE OF MY LOOP) I get the last packagename displayed from my data
{{this.selectedPackage.name}}

Please help?!

#2

Sounds like you’re running into issues with this binding. this can be a bit confusing in JavaScript, an it’s worth looking into more deeply.

#3

Adding to Ariel’s answer, after checking out the details about this check your html code again.
Html templates should not really have “this” keyword binding for their component properties. You should be fine interpolating the property without the “this” keyword.

Good Luck!

1 Like
#4

if you are trying to run loop in HTML page you need to save data in **Array-like

showPackageProducts(thispackage: Package): void {
var package={};
    package.selectedPackageId = thispackage.id;

* List item

package.selectedPackage = thispackage;
    package.productNames = this.selectedPackage.products.split(',');
    package.packageSelected = true;
// you need to push the packge object to global variable
globalVarbel.push(package);
    console.log('the package name is: ', package.selectedPackage.name);
  }

you can get all packages in html loop

#5