Angular slice input of currency pipe

I have a problem. I am using the following HTML in my angular project: <input [ngModel]="units | currency:’USD’" [ngModelOptions]="{updateOn:’blur’}" (ngModelChange)="units=$event"> Now this works as exepcted, except when I enter a value with the $ sign still in the input field. Then I get the following error: So I found this answer on stackoverflow: https://stackoverflow.com/a/42070424/10673107 And […]

By A Vreeswijk
Published
Categorized as angular, html, pipe Tagged , ,

Typescript Convert byte[] to Blob of type audio/webm

I have a problem. I need to set the source of an audio player in HTML to my byte array. This was a blob, but is written in the database, so now I am reading the database and need to reverse the whole process. Here is the code for the audio player: let audioUrl = […]

By A Vreeswijk
Published
Categorized as angular, blob, html5-audio, typescript Tagged , , ,

Angular Spring boot Send audio blob over http post call

I have a problem. In my project I am recording my microphone using the following package: https://www.npmjs.com/package/ng-audio-recorder Now this works great, but I am running in one problem…. I have the following class for storing the audio in my Angular front-end: export class AudioFile { id:number | null; data: any; constructor(data:any, id?:number) { this.data = […]

By A Vreeswijk
Published
Categorized as angular, blob, spring, spring-boot Tagged , , ,

Typescript Make hashtag clickable with button

I have a problem in my angular project. I have a raw text with hashtags, for example: Listening to the rain, falling on the streets #Rain #Chill Now I want those 2 hashtags to be buttons, so I had this in my typescript: ngOnInit(): void { this.description = this.description.replace(/#(w+)/g, ‘<button class="hashtag" onclick="onHashtagClick($1)">#$1</button>’); } onHashtagClick(hashtag:string) { […]

By A Vreeswijk
Published
Categorized as angular, html, javascript, typescript Tagged , , ,

HTML align last column right

I have a problem. For my current project I have a page with a list. The list contains posts, which is shown in a css grid. The last 2 columns of the grid need to be text-aligned to the right, but that isn’t working. Here is the code snippet: mat-form-field { margin: 0px 10px; } […]

By A Vreeswijk
Published
Categorized as angular, css, html Tagged , ,

Angular Can’t loop over data for chart

I have a problem. I am using NGX-Charts for drawing charts, so now I want to draw a line chart. Here is the HTML: <ngx-charts-line-chart [legend]="false" [showXAxisLabel]="false" [showYAxisLabel]="false" [xAxis]="true" [yAxis]="true" [timeline]="false" [results]="accountData"> </ngx-charts-line-chart> First I filled accountData like this in the typescript file: accountData = [ { name: "Users", series: [ { name: "January", value: […]

By A Vreeswijk
Published
Categorized as angular, javascript, typescript Tagged , ,

Angular Ngx Charts chart stays empty

I have a problem. I am trying to fill my charts with real data from my API. To do that I have the following html: <ngx-charts-bar-vertical [results]="popularCountriesData" [legend]="false" [showXAxisLabel]="false" [showYAxisLabel]="false" [xAxis]="true" [yAxis]="false" [gradient]="false"> </ngx-charts-bar-vertical> And my typescript file is: import {Component, OnInit} from ‘@angular/core’; import {ResearcherService} from "../../../services/researcher.service"; import {HttpErrorResponse} from "@angular/common/http"; import {PostCollection} from […]

By A Vreeswijk
Published
Categorized as angular, javascript, typescript Tagged , ,

Angular Chart not fitting to parent container

I have a problem. For my angular website I use ngx-charts to draw different kind of charts. The problem is with the pie-chart, because that chart doesn’t fit the parent container correctly. Here is the HTML: <div class="grid-container"> <mat-grid-list cols="10" rowHeight="250px"> <mat-grid-tile [colspan]="6" [rowspan]="1"> <mat-card class="dashboard-card"> <mat-card-header> <mat-card-title> Popular countries </mat-card-title> </mat-card-header> <mat-card-content class="dashboard-card-content"> <ngx-charts-bar-vertical […]

By A Vreeswijk
Published
Categorized as angular, css, html Tagged , ,

Angular Parent component not showing when child is showed

I have a problem. I have a component which shows a navbar on the left side and a container on the right side. In the container, I have a tag, so the child component should be showed there. However, when I call the url that I want, I only see the child component shown, but […]

By A Vreeswijk
Published
Categorized as angular, html Tagged ,

HTML Center image in flex circle

I have a problem. In my angular project I have the following code: onChange(event: any) { var reader = new FileReader(); reader.onload = (event: any) => { this.url = event.target.result; }; reader.readAsDataURL(event.target.files[0]); } #upload-icon { align-items: center; font-size: 30px; } .image-content { width: 70px; height: 70px; } input[type=”file”] { display: none; } .custom-file-upload { border: […]

By A Vreeswijk
Published
Categorized as angular, css, html, 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