What is the best way to access a value from a service scope in Angular 2?

Question

What is the best way to access a value from a service scope in Angular 2?

I am working on an Angular 4 app and have a function to print content. Below is a snippet from my TypeScript file:

print(id) {
// console.log(temp)
this.templateservice.getTemplateById(id).subscribe(template => {
  if (!template.success) {
    this.snackbar.open(template.message, '', {
      duration: 2000,
      extraClasses: ['success-snackbar']
    });
  } else {
    let headContents, innerContents, signContents, popupWin;
    headContents = document.getElementById('head-section').innerHTML;
    innerContents = document.getElementById('inner-section').innerHTML;
    signContents = document.getElementById('sign-section').innerHTML;

    console.log(headContents);
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    console.log(popupWin)
    popupWin.document.open();
    popupWin.document.write('<html><head><style></style></head><body onload="window.print();window.close()"><p class="head">' + headContents + '</p> <p class="inner">' + innerContents + '</p> <p class="sign">' + signContents + '</p></body></html>');
    popupWin.document.close();
  }
});// end of subscribe
}//end of print

And this is part of my HTML file:

<md-tab>
          <ng-template md-tab-label>Outgoing Mail</ng-template>
          <md-card-content >
            <div fxLayout="column" fxLayoutAlign="center center" class="mt-1" >
              <div class="template" style="@page  {size: A4};width: 210mm;height: 297mm;border-width: 2px;border-style: solid;border-color: #e6e6e6;padding-top: 23mm;padding-left: 2cm;padding-right: 2.5cm;padding-bottom: 55mm">
                <p class="head" id="head-section" style="line-height: 1cm;padding-left: 152mm;">Mail Number: {{mail_number}} <br> Date: {{created_at| date:'yyyy MMM dd'}}</p>
                <p class="inner" id="inner-section" style="max-height: 873px;line-height: 25px;word-spacing:1px;text-align: justify;padding-right: 20mm;padding-left: 25mm;padding-top: 21mm;padding-bottom: 5mm;white-space: pre-wrap; width: 166mm; word-wrap: break-word;">{{content}}</p>
                <p class="sign" id="sign-section" style="padding-left: 33mm;padding-right: 147mm ;padding-bottom: 70mm;line-height: 1cm;">Sincerely <br> {{sender}}</p>
              </div>
            </div>
          </md-card-content>
        </md-tab>

Currently, I am encountering an error "cannot read property document of undefined." Moving the print codes outside of the subscribe block does not allow me to access the template returned by the service. When I use console.log(headContents), I get a response. However, when I use console.log(popupwin), I get the image below! The popupWin is null and I receive an error relating to the document.

https://i.sstatic.net/UdK0H.jpg

angular typescript scope

Answer 1

Answer №1

getTemplateById operates asynchronously. The issue arises because you are logging the output before the observable is resolved. Ensure your operations are executed inside the subscribe function.

data;

print(id) {
    this.templateService.getTemplateById(id).subscribe(temp => {
        if (!temp.success) {
        } else {
            this.data = temp;
            console.log(this.data);

            var printContents = document.getElementById(divName).innerHTML;
            var popupWin = window.open('', '_blank', 'width=300,height=300');
            popupWin.document.open();
            popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</body></html>');
            popupWin.document.close();
        }
    }
}

Answer 2

getTemplateById operates asynchronously. The issue arises because you are logging the output before the observable is resolved. Ensure your operations are executed inside the subscribe function.

data;

print(id) {
    this.templateService.getTemplateById(id).subscribe(temp => {
        if (!temp.success) {
        } else {
            this.data = temp;
            console.log(this.data);

            var printContents = document.getElementById(divName).innerHTML;
            var popupWin = window.open('', '_blank', 'width=300,height=300');
            popupWin.document.open();
            popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</body></html>');
            popupWin.document.close();
        }
    }
}

Answer 3

Answer №2

this.service.getTemplateById(id).subscribe(temp => {
    if (!temp.success) {
        // handle error
    } else {
        this.content = temp;
    }
});
console.log(this.content);

You can retrieve the this.content variable outside of the initial scope, but please note that it may not be immediately available due to the asynchronous nature of getTemplateById function.

Since getTemplateById is asynchronous, the console log statement will execute before the data is retrieved.

Resolution:

print(id){
    this.service.getTemplateById(id).subscribe(temp => {
        if (!temp.success) {
            // handle error
        } else {
            console.log(this.content);
            this.content = temp;
            var printContents = document.getElementById(divName).innerHTML;
            var popupWin = window.open('', '_blank', 'width=300,height=300');
            popupWin.document.open();
            popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</body></html>');
            popupWin.document.close();
        }
    });
}

Answer 4

this.service.getTemplateById(id).subscribe(temp => {
    if (!temp.success) {
        // handle error
    } else {
        this.content = temp;
    }
});
console.log(this.content);

You can retrieve the this.content variable outside of the initial scope, but please note that it may not be immediately available due to the asynchronous nature of getTemplateById function.

Since getTemplateById is asynchronous, the console log statement will execute before the data is retrieved.

Resolution:

print(id){
    this.service.getTemplateById(id).subscribe(temp => {
        if (!temp.success) {
            // handle error
        } else {
            console.log(this.content);
            this.content = temp;
            var printContents = document.getElementById(divName).innerHTML;
            var popupWin = window.open('', '_blank', 'width=300,height=300');
            popupWin.document.open();
            popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</body></html>');
            popupWin.document.close();
        }
    });
}

Answer 5

Answer №3

Implement .finally() in your Observable, Here's how to do it:

this.templateService.getTemplateById(id)
.finally(() => {
      console.log(this.data);
})
.subscribe(temp => {
    if (!temp.success) {
      // handle error
    } else {
      this.data = temp;
    }
  });

Answer 6

Implement .finally() in your Observable, Here's how to do it:

this.templateService.getTemplateById(id)
.finally(() => {
      console.log(this.data);
})
.subscribe(temp => {
    if (!temp.success) {
      // handle error
    } else {
      this.data = temp;
    }
  });

What is the best way to access a value from a service scope in Angular 2?

Answer №1

Answer №2

Answer №3

Similar questions

Support for ViewEncapsulation.ShadowDom now available in Edge, Internet Explorer, and legacy browsers

Retrieve the content text while handling errors using RxJs

Error: When trying to run the `ng build` command in Git Bash, TypeScript module cannot be

Building SVG components in React with TypeScript and styling them using SCSS

Is it possible to create a tuple with additional properties without needing to cast it to any type?

Prevent Promise / Property not found error in Angular2 by Instantiating Class

What is the best way to bring in a SCSS file within another SCSS file?

The synergy between JSDoc and type mapping

Angular Elements: the crucial link to Material Dependencies

Troubleshooting: Angular version 4.3 Interceptor malfunctioning

Leveraging Typescript in Firebase Cloud Functions to effectively work with intricate interfaces

Does Vetur have additional undefined types in the type inference of deconstructed props?

Modifying Views on the Fly with Ionic 2

Is there a way to determine if an npm package is compatible with a specific version of Angular

Encountering a blank page and slow loading when launching the VSCode debugger using VS Code version 1.76.1 and Chrome 111

Convert a TypeScript array of strings to a boolean array: a step-by-step guide

Updating form values using ngModel in Angular 6

Guide on transitioning from @ngrx/store syntax version 2.2.1 to the latest version 6.1.2

"Error: Authentication failed in JWT authentication using Node.js/Express due to

Develop an Angular 15 function that generates observables by utilizing local variables