Issue How i can get the current date with a specific format ‘yyyy-MM-dd’, for today by example i with that the result be: ‘2018-07-12’, with using just the command myDate = new Date(); thanks a lot Solution You can use
Continue readingCategory: Angular
Error while setting-up Ionic environment in Ubuntu 20 ec2 instance
Issue I am trying to generate the Android and IOS platform folders on the ubuntu server, so that I can transfer the same to a machine that is capable of building a .apk and .ipa for the same. I was
Continue readingAngular change component state from a service when route changes
Issue I have a component called profile. It gets its data from user.service. Problem is that it does not change when the Route changes (on click, using ‘routerLink’); I want to bring in new data from the service every time
Continue readingHow to hide prev arrow on first item, next arrow on last item, and both arrow if single item: angular based project; no jquery?
Issue It is a template file where I wish to implement: hiding prev arrow on first item, next arrow on last item, and both arrow if single item. I have used bootstrap carousel in angular 12 version. //html code <div
Continue readingChange height of svg icon fa-edit on angular project
Issue What i need to is to edit the height of the icon to 1.5em instead of 1em. But i can’t seem to find .svg-inline–fa. I don’t have any CSS files for the icons cause i used npm install. Commands
Continue readingHow to retain the pagination number, after reloading the page
Issue I am using Angular PrimeNG Paginator Component (i.e p-paginator). The HTML part of the code looks like : <div class="paginator paginator-product mb-5"> <p-paginator [rows]="12" pageLinkSize="6" [alwaysShow]="false" [showCurrentPageReport]="true" [totalRecords]="totalRecords" #paginator (onPageChange)="onPageChange($event)"></p-paginator> </div> Here the issue is that, suppose current page
Continue readingHow the make PDF fit the height – ng2-pdf-viewer
Issue I am using ng2-pdf-viewer in my Angular 8 application. I would like to show the PDF fit to the height of the container regardless of the width. So, PDF must take all of the height as we can do
Continue readingChrome Angular Unchecked runtime.lastError: The message port closed before a response was received
Issue I am getting the following error in Chrome on Mac (Version 71.0.3578.98) while accessing my angular app: targets/showTargetsByStream:1 Unchecked runtime.lastError: The message port closed before a response was received. My app is accessing REST api hosted by a node
Continue readingJest Projects in a Monorepo unable to find config files in projects
Issue Having trouble setting up jest projects. Project A has some additional configuration that it runs (setupJest, creates some custom matchers, etc) that project B does not have. When I run jest I get this error for every single test
Continue readingFirebase – How do I write multiple orderByChild for extracting data?
Issue I’m looking to get data where two fields equal what I’m passing in. Here’s an example of my code: this.refApp .orderByChild(‘userUid’) .startAt(uid).endAt(uid) .orderByChild(‘jobId’) .startAt(jobId).endAt(jobId) .on(‘value’, (snap) => { //This currently doesn’t get returned. }); In the above example I
Continue readingAngular Material Flat Tree Parent Children Graphical Representaion
Issue I want to show Parent Children graphical representation on Angular Material Flat Tree. This is the design : Here is the DEMO what i done so far. Solution FIRST SOLUTION here is the stackBlitz Demo here is the stackBlitz
Continue readingAngular Jasmine, unit test case fails when global variable assigned
Issue I have a basic unit-test case written for two methods. it(‘should populateChartDatasets call getColorCodes’, () => { component.chartConfig = mockChartConfig; spyOn(component, ‘getColorCodes’); component.populateChartDatasets(filteredTreatments, filteredYears); expect(component.getColorCodes).toHaveBeenCalled(); }); method populateChartDatasets firstly supposed to pick colorCode from method getColorCodes then push prepared
Continue readingHow can Ionic be setup to render in the iOS style by default?
Issue Right now the ionic app renders with android styling by default. Instead of using the ?ionicplatform=ios param every single time I’d like that to be the default option. I looked for hints in the config.xml as well as the
Continue readingreduce method fails unit test
Issue I have the following method within an Angular component: public mapInvoices(invoices: any[]): Record<string, any> { return invoices.reduce((map, obj) => { map[obj.letterType] = obj; return map; }, {}); } When I run the unit test for this component, I’m getting
Continue readingAnonymous "likes/reactions" using Firebase
Issue Question from junior Padawan to real Jedy. I’m developing a website for a designer portfolio. Without any registration and backend. I’m using Firebase instead. I need to add a feature to collect "likes" (reactions) from anonymous users on works/posts.
Continue readingHow to check and rewrite all URLs inside a Typescript String – Angular
Issue I am using Ionic 6 on Angular 13 and I have a json string that has the full text with html codes in it. I need to check the anchor tags and img urls in that string and rewrite
Continue readingCircular dependency when referencing component type
Issue I have a single service to open a number of dialogs, some of those dialogs can open other dialogs using the same service that opened them. I’m using a dynamic dialog service from PrimeNg to open a dialog component
Continue readingRangeError: Maximum call stack size exceeded when using valueChanges.subscribe
Issue I am using Angular 5 with Reactive forms and need to make use of the valueChanges in order to disable required validation dynamically component class: export class UserEditor implements OnInit { public userForm: FormGroup; userName: FormControl; firstName: FormControl; lastName:
Continue readingCKEditor mention plugin with customised output failing on Angular 9
Issue I have Ckeditor working with my Angular app and I was originally on Angular 7. I built the editor using their online builder instead of using ckeditor classic. I am using the mentions plugin and customised the output so
Continue readingAngular Flex-layout with ngFor, X elements per row
Issue I tried to follow this post Angular flex-layout with ngFor to do what I want but I can’t make it. I have this code: <div *ngFor="let room of listRoom;"> <div class="room"> Room {{room.label}} <div *ngFor="let bed of room.beds;"> <div
Continue readingHow to close the selected div when we click on the button
Issue In my angular application I have on textarea and within the popup and when we enter any data in textarea the to be displayed in some div. .component.html <div class="form-group popover-form" > <label>Enter Custom Trigger Habit: When I</label> <textarea
Continue readingIonic/Angluar NGX Datatable: Transform boolean values to string
Issue I am developing an Ionic/Angular application and I am using NGX datatable. It works pretty good, but I need to display the boolean values of one column not as "true" or "false" (English language) – I need to display
Continue readingCSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)
Issue I am developing an Angular 4 app and I want to apply some global styles. Following the tutorial at the angular site, I’ve created a “styles.css” file in the root directory of my app, and I’m referring to that
Continue readingAngular 4 – how to trigger an animation when a div comes into the viewport?
Issue I’ve been building a new site using Angular 4 and i’m trying to re-create a effect where when a div becomes visible (when you scroll down the screen) then that can then trigger a angular animation to slide the
Continue readingAngular + Spring Boot: Forwarding all Angular routes to Angular and all API to the Spring Controllers
Issue I have a Spring Boot app and an Angular app. I want to serve the Angular App from the Spring Boot App. I build the Angular App and moved all files, including the index.html file, into /resources/static/ and just
Continue readingAngular CanActivate guard – createUrlTree relative navigation
Issue I currently have a route guard such as export class EntityGuard implements CanActivate { constructor(private readonly router: Router, …) {} canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean | UrlTree> { … This guard is activated for the URL basePath/select/10/123
Continue readingCan't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)
Issue I’m using Angular2 2.1.0. When I want to display a list of companies, I got this error. in file.component.ts : public companies: any[] = [ { "id": 0, "name": "Available" }, { "id": 1, "name": "Ready" }, { "id":
Continue readingHow to compare values of two objects in Angular
Issue I am pushing row dynamically on add new button click in my form. The new data will be added in oldData array in the form of object. I want to match all values of newData object with oldData array,
Continue readingSelect value by text from a dynamic non select dropdown using Selenium Java
Issue I want to select value by text from a dynamic non select dropdown. I did some research and I found this code: WebElement element = driver.findElement(ByMapper.getBy(dropdown)); element.click(); List<WebElement> options = element.findElements(By.xpath("/html/body/div[1]/div[2]/div/div/div")); for (WebElement option : options){ if (option.getText().contains(text)){ option.click();
Continue readinglocalstorage value set in one component gives null in other component angular
Issue I have angular application which has header, user section, timeline components. In header, I have log in form. After log in user redirected to timeline component which calls user section component. In header component I need to store user
Continue readingAngular MatToolTip Condition inside Interpolation
Issue I am adding an angular condition for my MatToolTip. At first this following works for just 1 string assignment matToolTip={{myData.name}} But I need to add a condition like the following matToolTip={{ myData.hasName : myData.name, myData.hasNoName : myData.NoNameMessage }} The
Continue readingAngular select option with selected attribute not working
Issue Using Angular 4, I have a html template and I want a selection box with two options. One of those options should be pre-selected by default. <select name=”rate” #rate=”ngModel” ngModel required> <option selected value=”hr”>hr</option> <option value=”yr”>yr</option> </select> Details: I
Continue readingForm not loading if there is no Data and using *ngIf="menuData$
Issue I am using an Observable on my form to get the data which looks like this on the template side. <form *ngIf="menuData$ | async as menuData; else loading" [formGroup]="form"> This works great and i can access all fields in
Continue readingUnable to uninstall or update Angular CLI from Mac
Issue I have following versions currently installed Angular CLI: 9.1.9 Node: 17.4.0 OS: darwin x64 Angular: … Ivy Workspace: Package Version —————————————————— @angular-devkit/architect 0.901.9 @angular-devkit/core 9.1.9 @angular-devkit/schematics 9.1.9 @schematics/angular 9.1.9 @schematics/update 0.901.9 rxjs 6.5.4 Since I was not able to
Continue readingAngular application deployment on netlify does not work
Issue I am trying to deploy angular application on netlify, I am getting error message. I am not sure why. Page Not Found Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site
Continue readingERROR: Expression has changed after it was checked
Issue I have a formGroup that has a "date" field and a "satisfaction" field in it. In my HTML, I have made a dropdown for the "satisfaction" field that renders on the 7th page. For some reason, when this dropdown
Continue readinghow to confirm payment using payment intent cliet secret in angular [solved]
Issue please don’t mark negative. i am new to stripe/angular and trying to integrate it into angular to confirm payment from the client side. i have client-secret key from server-side and i am calling stripe.confirmCardPayment( client-secret, { payment_method: {card: cardElement}
Continue readingGet multiple nested data from web api in angular material table
Issue Hi i am new to angular i have doubt on print nested data within nested data from web api to angularmaterial table.. my data like : { "Code": "1", "Data": { "id": 1, "userId": 1, "orderDetails": [ { "medicineId":
Continue readingAngular + ngRx how to Refreshing a component for a new state
Issue I have a doubt about how to update a component, I am making a web app with Angular (lastest version) and I am using ngRx to manage the state. my web has a Gridview with items where each item
Continue readingHow can I add background image to Angular selector?
Issue I am trying to add background image to Angular selector, but its not working for me. Below is the code <app-highway-card [ngStyle]="{‘background-image’:’url(https://cdn.pixabay.com/photo/2021/09/04/09/32/road-6597404__340.jpg)’}" [highway]="highway"></app-highway-card> Solution Add display: ‘block’ to the styles: [ngStyle]="{‘background-image’:’url(https://cdn.pixabay.com/photo/2021/09/04/09/32/road-6597404__340.jpg)’, display: ‘block’}" Stackblitz: https://stackblitz.com/edit/angular-ivy-zmjsjo?file=src%2Fapp%2Fapp.component.html Answered By – wlf
Continue readingHow to reload current page?
Issue I have a page for editing user, it has some children components inside. Each children components can change or doing some effect to its parent component. So instead of emitting the changes to parent and updating some fields, I
Continue readingMultiplication of value not working on output field
Issue I am trying to make an output field multiply it’s value based on a value I set in my input field. eg. if the input field is equal to 2 then the output field must equal to 2 *
Continue readingHow to create dynamic grid component in angular 8 and bootstrap whit row, col and list string?
Issue I have a problem understanding how to create a grid component, which has in input of a number of columns, rows and a list of strings for the inside element of grid. my thumbnails.component.ts import { Component, Input }
Continue readingCompile and run Angular Project?
Issue Im not familiar working with angular projects,I have got one new angular project which is partially completed and i tried to run the project using Angular cli ,I have tried all the possible way that i have found on
Continue readingMultiple type assertions in typescript
Issue I was looking at the source code of an angular repository and stumbled upon a line of code that uses multiple type assertions. The code looks kinda like this one, it uses 2 type assertion: unknown and Record<string, unknown>
Continue readingInterpolate an object from rest API
Issue hello I’m having trouble on how to interpolate the object from rest API, I can see the objects in console log but I can’t bind it in a label to my table this is the object I want to
Continue readingangular class functions not working/available when service response is assigned to an array
Issue I have a below class Invoice with some data and methods in it but when I assign REST API array response to my component class array I observe that angular Invoice class methods like addItem, removeItem are not available.
Continue readingAligning a single item to the right of a navbar
Issue I have a header component with a tag and navbar inside of it. I want the navbar collapsible button on the left and the tag on the far right. What would be the best way of accomplishing this. Any
Continue readingAngular efficiently using trackBy with ngFor
Issue In Angular, is the trackBy function necessary for *ngFor? I saw a few articles here, here, here, and here that say using trackBy will improve performance and has better memory management. But I was wondering if trackBy is such
Continue readingError: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '(click' is not a valid attribute name
Issue This is my Angular code for login registration form Error: Uncaught (in promise): InvalidCharacterError: Failed to execute ‘setAttribute’ on ‘Element’: ‘(click’ is not a valid attribute name. Error: Failed to execute ‘setAttribute’ on ‘Element’: ‘(click’ is not a valid
Continue readingGet Data Object From Array On Angular
Issue I have data retrieved from the API in the following form [ { "end_date": 1640908800000, "rev": 151, "usage_limit": 0, "reason_deleted": null, "picture_detail": "test", "revtype": 0, "linked_type": "SPECIFIC", "modified_date": 1644893309181, "type": "OPEN", "created_by": "januardy.hp@gmail.com", "is_multiple": null, "campaign_name": "Blewah 2022", "is_deleted":
Continue readingPassing a function as a parameter in typescript
Issue I’m coding with Ionic/Angular. I want to pass a function as a parameter to a function in another file, but the function doesn’t get called. alert.service.ts showAlertWithAction(header: string, message: string, action: () => void) { const alert = this.alertController.create({
Continue readingHow to calculate and bind to multiple input fields in Angular
Issue I am trying to bind multiple input fields together but am having trouble doing so. I basically have multiple input fields where if one input field changes then the others should calculate and reflect values too. It is a
Continue readingmat-expansion-panel-header background-color on collapse
Issue i have some mat-expansion-panels. The header should have a specified color. Ok so on.. but when i expand the Panel, the color changes back to the root color… How can i change this? <mat-expansion-panel> <mat-expansion-panel-header [expandedHeight]=”’50px'” [collapsedHeight]=”’50px'” id=”test1″> <mat-panel-title>
Continue readingwhy I have this error bash ng command not found while I already installed the angular-cli
Issue my problem is that after installing angular CLI and started working with angular something happened and the ng command became not found command: ng serve -o please check this picture: bash: ng: command not found but when I write
Continue readingSyntax Error in Angular App: Unexpected token <
Issue I have an Angular app which runs perfectly in my local and production environment.. After a tiny change I made, I ran the app locally and it works fine.. Then I built the project and copied the dist folder
Continue readingGet object when sorting an Observable array
Issue I can’t get an object when I try to sort an Observable Array. I want to sort it by "Localite" and the result I obtain is only "Localite" and no more the complete object. I don’t understand why. My
Continue readingClass constructor NgbDatepickerConfig cannot be invoked without 'new'
Issue After updating to Angular 13 and ng-bootstrap to v11.0.0 (as stated here one should use v11.0.0 for Angular 13 and bootstrap 4) I get the following error in jest(v27.5) tests: TypeError: Class constructor NgbDatepickerConfig cannot be invoked without ‘new’
Continue readingHow to translate mat-paginator in Angular 4?
Issue Do you have any ideas how can I translate “Items per page” in Angular’s mat-paginator tag? The mat-paginator is an element from Material Design. Solution You can use the MatPaginatorIntl for this. Will Howell made an example that no
Continue readingWhy don't my variables change after http request?
Issue larnacaCount=0; nicosiaCount=0; private array :number[] = []; constructor(private http: HttpClient, private popupService: PopupService) { } makeCapitalMarkers(map: L.Map): any { this.http.get(this.capitals).subscribe((res: any) => { this.larnacaCount=res.larnaca; //should return 3 this.nicosiaCount=res.nicosia; //should return 1 console.log(res); for (const c of res.features) { const
Continue readingIF and ElseIF condition in Angular 13
Issue I want to hide the Portfolio and Orders menu. I succeeded to hide the Portfolio menu with ngIf. <ul class="nav-links" *ngIf="menu.route !== ‘/portfolio’ || (currentPortfolio$ | async)"> My question is, how should I hide /orders with an ElseIf? <ul
Continue readingIn an Electron Application I am successfully making an HTTP GET request from an Angular component. How can I do the same thing from the Electron side?
Issue The following function is working from an Angular component in my Electron app: getData() { const url = ‘https://reqres.in/api/users?page=1’; this.http.get<any>(url).toPromise() .then(response=> { //… alert(JSON.stringify(response)); }); } The alert prints out the same text as you will see if you
Continue readingAngular Material not Working in Angular 9
Issue I am using Angular Material in Angular 9, and it is not working for me. It is compiling and running, but every time I use Angular Material in my HTML, such as mat-checkbox or mat-form-field, it isn’t working properly.
Continue readingNPM package installation fails for @progress/kendo-angular-buttons
Issue I am trying to add New Component of KendoUI through Node package manager and unfortunately got below error: Reference URL : http://www.telerik.com/kendo-angular-ui/getting-started/ Guide me to resolve above error. Solution The official Angular examples, as well as Kendo UI for
Continue readingLogin using laravel and angular using jwt
Issue I’m using angular and Laravel for user authentication followed this link : https://www.positronx.io/laravel-jwt-authentication-tutorial-user-login-signup-api/ https://www.positronx.io/laravel-angular-token-based-authentication-with-jwt/ Authentication is working, this is login function : onSubmit() { this.authService.signin(this.loginForm.value).subscribe( (result: any) => { this.responseHandler(result); }, error => { this.errors = error.error; if(this.errors.error_message) {
Continue readingAngular ActivatedRoute data returns an empty object
Issue I have a route registered with some data: const routes: Routes = [ {path: ‘my-route’, data: { title: ‘MyTitle’ }, component: MyComponent}, ]; and I’m trying to access to the route’s data using ActivatedRoute: import { Component, OnInit }
Continue reading"ERROR in getInternalNameOfClass() called on a non-ES5 class: expected AngularFireModule to have an inner class declaration"
Issue Terminal – "WARNING in Invalid constructor parameter decorator in D:/New folder/SilverLife/node_modules/@angular/fire/fesm2015/angular-fire.js: () => [ { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] } ] ERROR in getInternalNameOfClass() called on a non-ES5 class: expected AngularFireModule to have an
Continue readingAngular keeps generating browser application bundle
Issue At my work, I’ve transitioned from a laptop to a stationary for more power, but in the setup, I’ve encountered a problem. I can’t get my Angular frontend to compile anymore. I have the same version of node.js as
Continue readingESLint Async pipes should not be negated
Issue I’m using ESLint with Angular and I don’t like having extra code like (observable | async) === (false | null | undefined) instead of just (observable | async). How do I disable that rule? E:\GitHub\skybot\angular\src\app\custom-layout\custom-layout.component.html 6:75 error Async pipes
Continue readingangular 13 – insert incoming json object into model
Issue With angular, I am getting data as follows through the api. Everything works very well, but I cannot place the incoming json object into the model. I can’t find where I made a mistake. Can you provide support? export
Continue readingWhy toggle checkbox returns false?
Issue I show checkboxes on the page. When I click over it it is changed to true/false. If true the cehckbox should be checked. Problem is when I click first checkbox it works, when click the second I get wrong
Continue readingAngular – ERROR TypeError: Cannot read properties of undefined (reading 'message') at AuthComponent.tokenHandler
Issue I have ASP.NET Core Web API as backend and Angular-13 as frontend. When successful, the endpoint on POSTMAN gives: { "status_code": 200, "message": "Successfully Logged In", "result": { "token": "gggggffffffffffffdddddddddddd", "user": { "id": 3, "user_name": "smith", "last_login": "2022-01-03T12:35:26.0305649" },
Continue readingAngular – TypeError: Cannot read properties of undefined – Getting JSON Data
Issue I get this error message.. ERROR TypeError: Cannot read properties of undefined (reading ‘geoCoord’) at Object.next (customers.service.ts:16:38) If I give the "lon" and the "lat" variables a fixed Value, like 51.1634 and 10.4477, the function works. So I guess
Continue readingthe modal should disappear after pressing the confirm button
Issue I enter a wallet number: enter image description here I click on the button enter image description here The user must be directed on the page /portfolio/stocks Except that, the modal is always displayed. enter image description here select-portfolio-result-modal.component.html
Continue readingHow to enable experimentalForceLongPolling in @angular/fire
Issue There is an issue with Cypress and Firebase, based on some research I’ve done here it seems that Cypress intercepts all network requests and due to the nature of how firebase works it emits multiple values on the same
Continue readingng-select in Angular5 issue : ERROR TypeError: Object(…) is not a function at NgDropdownPanelComponent.ngOnInit (ng-select.js
Issue I’m working with ng-select 2.0.0 in my project angular5 as in this link , i can get results from the api rest spring boot but i’m fascing a problem i get this error while i click on ng-select :
Continue readingAngular ngModel one-way binding
Issue I have select control with [ngModel] binding. (ngModelChange) handler has a custom check that must discard certain values. I can’t just put [disabled] on my input because I need to allow user to try to select another value and
Continue readingI used Angular12 text interpolation but the username is not displayed
Issue I don’t see any errors in my Angular code, but when I use the developer tools, the username doesn’t appear due to text interpolation errors.you know the answer? Useraccount.ts eexport class Useraccount{ id:string =”; username: string=”; name:string=”; password:string=”; email:string=”;
Continue reading