Using HttpClient to make get requests

I have written the following code to get the dummy data here: export class AppComponent { jsonPosts: any = []; constructor(private httpClient: HttpClient) { } OnInit() { this.getJsonPosts(); } getJsonPosts(): any { return this.httpClient.get("https://jsonplaceholder.typicode.com/posts") .subscribe(response => { console.log(response); this.jsonPosts = response; }); } I have also written the following code to display them in my […]

By CatarinaRuna
Published
Categorized as angular, html, http, json, typescript Tagged , , , ,

Downloading a json file (from json-server) as a txt or json or csv file, in an Angular app

I have installed the json-server in my Angular app which enables me to save a form (filled by the user) via a fake json API into a json file: { "extracts": [ { "contentName": "xxx", "contentType": "xxx", "contentToStore": "xxx", "id": 1 } ] } I can also see the results at my http://localhost:3000/extracts In my […]

By CatarinaRuna
Published
Categorized as angular, html, json, json-server, typescript Tagged , , , ,

Saving Angular form data to database

I have set up a form in my Angular app, containing a bunch of fields; such as age, gender, etc… as well as username and email address. For example: <label><b>Gender</b></label> <div class="radio" *ngFor="let gender of genders"> <label><input type="radio" name="gender" ngModel [value]="gender" required>{{ gender }}</label> </div> All the fields get saved to the database, except the […]

By CatarinaRuna
Published
Categorized as angular, firebase, html, http, typescript Tagged , , , ,

ngx-extended-pdf-viewer slim view of pdf

I am trying to display a pdf file content with ngx-extended-pdf-viewer which works great, but I cannot seem to be able to widen the view; it displays the file in a slim way that I cannot seem to change. Here is my html template code: <div class="container"> http://my_pdf_source <ngx-extended-pdf-viewer [src]="my_pdf_viewer_source" [height]="’100%’" [useBrowserLocale]="true" [textLayer]="true" [showHandToolButton]="true" [zoom]="’page-fit’"></ngx-extended-pdf-viewer> […]

By CatarinaRuna
Published
Categorized as angular, css, html, ngx-bootstrap, pdf Tagged , , , ,

ngx-extended-pdf-viewer/assets/pdf.js does not exist

In my Angular app, I have installed via npm the ngx-extended-pdf-viewer so that I can display the content of pdf files. As per instructions, I have included the following in my angular.json file: "assets": [ "src/favicon.ico", "src/assets", { "glob": "**/*", "input": "node_modules/ngx-extended-pdf-viewer/assets/", "output": "/assets/" } ], "scripts": [ "node_modules/ngx-extended-pdf-viewer/assets/pdf.js", "node_modules/ngx-extended-pdf-viewer/assets/viewer.js", "node_modules/ngx-extended-pdf-viewer/assets/pdf.worker.js" ], However, when I […]

By CatarinaRuna
Published
Categorized as angular, javascript, node.js, pdf, typescript Tagged , , , ,

Displaying pdf files without using external libraries

In my Angular app, I have included the following snippet in an html template: http://../assets/AOK_T2DM.pdf It appears as follows: When I click open, the pdf file is downloaded. How can I simply display the content instead of downloading it? Source: Angular Questions

By CatarinaRuna
Published
Categorized as angular, css, html, pdf, typescript Tagged , , , ,

Importing vega-embed after installation

I have installed vega & vega-lite & vega-embed using npm and now I am following the instructions here on how to embed a graph into my own page (not display it inside vs-code as the vega-embed extension does). I have written the following code in my Angular app which throws errors: vega.component.html <h3 class="center">Vega Viz</h3> […]

By CatarinaRuna
Published
Categorized as angular, vega, vega-embed, vega-lite, vegas-viz Tagged , , , ,

number string NaN error correction workaround

I have a member variable total explicitely of type number (in a strict Angular app) which is initialized in the constructor but then shows as type any in the drawSlices() method, resulting in my tooltip label showing NaN. export class SomeComponent implements OnInit { total: number; dataSource: Item[]; constructor(private dataService: DataService) { this.dataSource = this.dataService.getData(); […]

By CatarinaRuna
Published
Categorized as angular, javascript, typescript Tagged , ,

StackedBar Chart with missing ToolTip in Angular and D3.js

I have adapted this example to work with the latest Angular and D3. It works fine (after a little hack!) but I do not get the tooltips when hovering, etc… My first guess was the figure ID I am using in the corresponding html file: <h3>Stacked Bar Chart with Tooltips</h3> <figure id="stacked-bar-tooltip"></figure> If you search […]

By CatarinaRuna
Published
Categorized as angular, d3.js, typescript Tagged , ,

TypeScript type confusion (TypeError: Cannot read property ‘slice’ of undefined)

I have the following data in a csv file in my Angular project that also imports the D3.js library: group,Nitrogen,normal,stress banana,12,1,13 poacee,6,6,33 sorgho,11,28,12 triticum,19,6,1 I have created a stacked-bar component with the following code in its html script: <h3>Stacked Bar Chart</h3> <figure id="stacked-bar"></figure> I also have the following code in the typescript file to display […]

By CatarinaRuna
Published
Categorized as angular, d3.js, javascript, typescript Tagged , , ,

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq