I recently started learning Angular 2 and I'm curious if it's feasible to develop a component that, upon loading, can showcase an external webpage such as Google Calendar or any other site.
Does anyone know if this is achievable? If so, what steps should I take? I've searched online but haven't come across any solutions. I attempted using an iFrame, however, it failed to display anything as a result of the message "Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'."
While this question may be old, the solution provided could still benefit many individuals.
To achieve this functionality in your Angular component:
export class AppComponent implements OnInit {
externalPage: any;
constructor(private http: HttpClient, private sanitizer: DomSanitizer) {}
ngOnInit() {
this.http
.get('https://google.com/', { responseType: 'text' })
.subscribe((res) => {
this.externalPage = this.sanitizer.bypassSecurityTrustHtml(res);
});
}
}
In your HTML code:
<div [innerHtml]="externalPage"></div>
However, for this to function correctly, the external site must have CORS enabled:
access-control-allow-methods: GET, OPTIONS, POST, PUT
access-control-allow-origin: *
If not, you may encounter the following error message:
Access to fetch at 'https://google.com/' from origin 'https://display-external-html-into-angular-vqyiga.stackblitz.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Can someone assist me in validating the match between a user's new password and confirm password using an Angular Directive? Despite correctly identifying a mis-match, the error message is not displayed: Template Form <form> <md-input- ...
I am currently working with Angular2 and a modified version of Semantic-UI that includes a calendar module. I am utilizing the `calendar` and `dropdown` functionalities: constructor() { setTimeout(() => { jQuery('.ui.dropdown').dr ...
This is a miniCalculator project. In this mini calculator, I am trying to calculate the operation when the "calculate" button is pressed. However, in order for the calculations to run correctly in the operations.component.ts file, I need to toggle the val ...
I am facing an issue with rendering an empty chart initially and then updating it with data. The charts are rendered when the component is initialized and added through a list of chart options. Although the empty chart is successfully rendered, I am strugg ...
Here is my code snippet from window.ts import Vue from 'vue' interface BrowserWindow extends Window { app: Vue } const browserWindow = window as BrowserWindow export default browserWindow Encountering a compilation error Error message: TS2 ...
Within my Vue component, I have integrated a threejs scene and I am facing an issue with selecting objects using the mouse. I am currently using the OnPointerDown event and raycaster to locate objects under the mouse pointer. However, it seems like the ray ...
Currently, I am utilizing yeoman angularjs-fullstack for project generation. Now, my task is to customize it according to my preferences. I have limited experience with AngularJS and TypeScript, so any feedback would be greatly appreciated, not just the so ...
After searching through multiple resources, I realized that most of the solutions are written in jQuery. However, I am specifically looking for a solution in Typescript. The HTML code snippet is as follows: <input #coverFilesInput class="file-input" t ...
Is there a way to have unique loading animations for each of my website pages during the loading process? How can I achieve this? I've attempted to put the loading component on the page component directly, but it doesn't seem to work: //Page com ...
Currently, I am conducting end-to-end tests for an Angular application. For the login process, it needs to exit the app, so here is what I am doing: browser.waitForAngularEnabled(false); //login browser.waitForAngularEnabled(true); While this approac ...
Whenever I switch tabs and then return to the previous tab in Ionic, the select field that was previously set becomes null, even though the page is still loading and the variable is populated. <ion-header color="primary"> <ion-navbar> &l ...
I have two different phrases: 1) "please take care of your task" 2) "please think about Philip's idea" When I display them using a pipe that converts text to sentence case, it works well for the first phrase but not for the second one. Here is the ...
In the HTML code, I have a condition to display the value of data as a dropdown. Now, I want to introduce another condition where when a different dropdown menu with company names is changed (e.g. changing it to 'Amazon'), only the corresponding ...
Struggling with Reactive forms? I've encountered an issue where updating the model class when a User changes the input is easy, but what about programmatically changing the model and reflecting those changes in the HTML form? In simplified terms: th ...
I have a Node application using Express that incorporates TypeScript with Babel. Recently, I attempted to create a UserController which includes a private property called _user: User and initialize it within the class constructor. However, every time I ru ...
I have a JSON file with the following configuration data: { "config1": { //this is like a map "a": [ "string1", "string2"], "b": [ "string1", "string2"] } } Previously, before transitioning to TypeScript, the code below worked: import ...
I have a requirement to set up fixtures where the first fixture is always available (acting as a base class) and the second fixture will vary in different test files (like a derived class). I've implemented the following code which seems to be working ...
Hey there, I have a component with a function called "handleAvatarUpload". Currently, when there is a change, the entire page reloads instead of just the component. Is there a way to reload only the component without refreshing the whole page? import { us ...
Struggling to implement angular 2 file upload with ES5 instead of TypeScript. Any advice on how to approach this? I've been working with the ng2-file-upload library available at: https://github.com/valor-software/ng2-file-upload Despite the document ...
Here is the code snippet I'm working with: this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => { this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height( ...