Does anyone have additional information on the "googleCheckContentLoaded=true" and "loaded" outputs? I am looking for ways to display loading progress while loading a PDF file. Currently, I am utilizing the ngx-doc-viewer.
Does anyone have additional information on the "googleCheckContentLoaded=true" and "loaded" outputs? I am looking for ways to display loading progress while loading a PDF file. Currently, I am utilizing the ngx-doc-viewer.
Effective solution:
<ngx-doc-viewer [url]=excelUrl viewer="url" viewer="google
(loaded)="contentLoaded()">
</ngx-doc-viewer>
In the TypeScript file, it is important to invoke the function for loading.
Once the file has been successfully loaded, the following function will be triggered:
contentLoaded(){
console.log("content Loaded")
}
Simple solution with Google Developer standards
<div id="progressBar"><mat-progress-bar mode="indeterminate"></mat-rogress-bar></div>
<ngx-doc-viewer
[url]="attachment.file_path"
viewer="google"
googleCheckContentLoaded="true"
googleCheckInterval = 3000
googleMaxChecks = 5
(loaded)="contentLoaded()"
class="doc-viewer">
</ngx-doc-viewer>
In scss:
.doc-viewer{
width:100%;
height:80vh;
}
In Ts file:
contentLoaded() {
document.getElementById("progressBar").style.display = "none";
}
To implement the use of Iframe with the load() output function, refer to the code snippet provided below:
loading = false;
loadData(url) {
this.loading = true;
this.urlData = this.sanitizer.bypassSecurityTrustResourceUrl('https://docs.google.com/viewer?url=' + url + '?timestamp=' + Math.floor(Math.random() * 100000) + '&embedded=true#toolbar=0&navpanes=0&scrollbar=0' + '&#view=Fit');
}
// onload will be triggered once data is loaded
onloadEvent(event) {
this.loading = false;
}<iframe *ngIf="urlData" width="100%" (load)="onloadEvent($event)" height="100%" [src]="urlData" seamless title="data" frameborder="no" style="position: relative; z-index: 9;">Loading</iframe>
<img class="data-loader" *ngIf="loading" src="assets/images/loader.gif" alt="loader">Here is the solution that worked for me:
view.component.html
<div id="loadingBar"><mat-progress-bar mode="determinate"></mat-progress-bar></div>
<ngx-doc-viewer [url]="document.url" viewer="google" style="width:100%;height:64vh;"></ngx-doc-viewer>
view.component.ts
checkDocStatus(){
this.attemptInterval = setInterval(() => {
var frame = document.getElementById('viewerFrame');
if(frame){
clearInterval(this.attemptInterval);
frame.addEventListener('load', function(){
console.log("Load event: Document loaded in iframe.");
document.getElementById("loadingBar").style.display = "none";
frame.addEventListener('load', function(){ console.log("Load event: Document loaded in iframe."); }, true);
}, false);
}
}, (1000));
}
I am currently working with Angular 7/8 and I have some code that adds a new component dynamically. In the parent component, my .ts file includes the following: PARENT COMPONENT Within the .ts file: @ViewChild(InjectDirective) injectComp: InjectDirect ...
I have a routes array set up where I want any route containing "the-" to point to the first component, and all other routes to point to the second component. [ { path: 'the-:param', component: MyComponent }, { ...
I have been trying to send a post request to my login endpoint, but I am not receiving any response. Despite thoroughly checking my code, I am unable to figure out why there is no response being sent back. My backend is built using Express in TypeScript. B ...
Within my Angular 8 application, the routing file is structured as below: const myRoutes: Routes = [ {path: '', component: FirstComponent , canActivate: [RegistrationSrcdGuard]}, {path: 'FirstComponent ', component: FirstCompon ...
Struggling to find a solution for this recurring issue. Despite reading numerous blogs on the topic, I can't seem to make this error disappear. The problem lies with the input parameter - it starts off as undefined when the component loads, then chang ...
I can't wrap my head around why Angular2 is adding these strange attributes to HTML elements once the app is loaded (for example, in the "_ngcontent-cxi-6" attribute shown in the screenshot). I have attached a screenshot from DevTools as an example. ...
Currently, I'm developing an Angular project that is connected to a Firestore database. In summary, the pages are stored in the database, and I have created a PageComponent that displays a URL like this: page/'id' and showcases the correspon ...
Getting an error message: npx : The term 'npx' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At ...
Within a component, we utilize an ngrx selector to access various segments of the state. public isListLoading$ = this.store.select(fromStore.getLoading); public users$ = this.store.select(fromStore.getUsers); The fromStore.method is formed using the ngrx ...
I've been attempting to connect to iTunes using C# programming language. The process involves creating a dll in C# and running it with TypeScript through the Overwolf API. Here's what I've done so far: Generated a .dll file I utilized the ...
In order to streamline the process of sharing components across my projects, I have developed a custom component library. However, despite following the Authoring libraries guide provided by webpack, I am facing an issue where dependencies continue to be i ...
Is it possible to automate running a playwright test without having to manually input npx playwright test in the command line every time? I am looking for a way to initiate a playwright file from another file and have it execute without the need for acce ...
Is there a simple way to adjust the size of an SVG icon in Angular 2+ Material Design with only CSS, HTML, or JS? If I include the icon directly within the HTML element, styling works perfectly: <mat-icon style="font-size: 16px !important">home< ...
On my search page, I am using a search API from OpenAI. My goal is to modify the meta description of the page to display 'Search | %s', with %s representing the decoded search query. However, due to limitations in Nextjs 13, the useSearchParams f ...
Currently, I have a cron job that checks the version of an npm package installed on the server against the latest version on my private registry (verdaccio) and updates the package if necessary. REMOTE_VERSION=$(npm show ${PACKAGE_NAME} version) LOCAL_VERS ...
I am encountering an issue with my HTML where it displays undefined(undefined). I have checked the data in the debugger and I suspect that there may be an error in how I am using the select data. Here is a snippet of the code: <div *ngIf="publishIt ...
I'm in need of assistance. I've recently started learning how to use gulp and terminal, but I'm facing difficulties installing global gulp on my Mac. I've tried various methods to fix the issue, but it just seems to be causing more pro ...
I'm encountering an error in a small React app. Here is a screenshot of the issue: https://i.sstatic.net/ilXOT.png The project uses "@material-ui/core": "4.11.3". In the codebase, there is a component named Text.tsx with its corresponding styles defi ...
In my Next.js 14 project, I have a page that utilizes default Server-side Rendering (SSR) to fetch data and pass it to client components. export default async function Page() { const magazines = await getMagazines(true); return ( <Box sx= ...
Whenever I include the following code in my app.component.ts: import {Component} from 'angular2/core'; My application runs successfully, but the compiler throws an error saying Error:(1, 25) TS2307: Cannot find module 'angular2/core', ...