Angular function shows updated value first time only

Issue html <input type="file" [(ngModel)]="profile.myFile1" (change)="handleFileInfo($event.target.files, ‘myFile1’)"> <div *ngIf="filesExists(‘myFile1’)"> <span>Size: {{getFileSize(‘myFile1’)}}</span> </div> <input type="file" [(ngModel)]="profile.myFile2" (change)="handleFileInfo($event.target.files, ‘myFile2’)"> <div *ngIf="filesExists(‘myFile2’)"> <span class="photo-size">Size: {{getFileSize(‘myFile2’)}}</span> </div> ts file code handleFileInfo(files: FileList, fileTypeName: string) { // Other code …. let fileObj: FileObj = {

Continue reading

Angular 9 : Use component as directive

Issue Recently Im reading source of nebular, an angular ui framework, I have questions about the following code: @Component({ selector: ‘[nbMenuItem]’, templateUrl: ‘./menu-item.component.html’, animations: [ … ], }) export class NbMenuItemComponent implements DoCheck, AfterViewInit, OnDestroy { @Input() menuItem = <NbMenuItem>null;

Continue reading

Getting a blank page after starting Angular 10.0.3 app on localhost before deploying to Heroku

Issue I’m getting a blank page on testing my Angular 10.0.3 app. Here the server.js: const express = require(‘express’); const app = express(); app.use(express.static(‘./src’)); app.get(‘/*’, (req, res) => res.sendFile(‘index.html’, {root: ‘./src’}), ); app.listen(process.env.PORT || 8080); package.json: { "name": "fsdoblakoangular", "version":

Continue reading

How to display different components recursive?

Issue I have a app-document-form-node component that recursive builds components. Component app-document-form-node: <ng-container *ngIf="block.type === fielType.Block"> <app-adresat-list *ngIf="block.tag === ‘ADRESATS’" [list]="block?.children"></app-adresat-list> <app-word-settings *ngIf="block.tag === ‘WORD_SETTINGS’" [element]="block"></app-word-settings> <app-parameters *ngIf="block.tag === ‘PARAMETERS’" [element]="block"></app-parameters> <app-document-parameters *ngIf="block.tag === ‘GENERICPARAMETERS’" [element]="block"></app-document-parameters> </ng-container> <!—–> <ng-container *ngIf="block.type

Continue reading

Moment Timezone in Angular 9

Issue Currently, I upgrade my Angular project form 8 to 9. The project’s using a "@types/moment-timezone": "^0.5.30" in package.json Now this package has been deprecated. https://www.npmjs.com/package/@types/moment-timezone When I run the project ng serve, it shows up this error message user.model.ts:3:25

Continue reading

Why DragDrop does not work in Material Dialog?

Issue I use Drag and Drop inside Material Dialog. <div mat-dialog-content> <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)"> <div class="example-box" *ngFor="let movie of movies" cdkDrag> {{movie.title}} <img *cdkDragPreview [src]="movie.poster" [alt]="movie.title"> </div> </div> </div mat-dialog-content> I use this example for drag/drop So, when I

Continue reading

@output not emitting result in Angular 10

Issue Here is my code below. topbar.component.ts import { Component, OnInit, AfterViewInit, Output, EventEmitter } from ‘@angular/core’; @Component({ selector: ‘app-topbar’, templateUrl: ‘./topbar.component.html’, styleUrls: [‘./topbar.component.scss’], }) export class TopbarComponent implements OnInit, AfterViewInit { @Output() OnCancelss: EventEmitter<any> = new EventEmitter<any>(); //my output

Continue reading

Angular 10 adding numbers

Issue loadingPercent: number = 0; ngOnInit(): void { window.setInterval(function() { console.log(loadingPercent + 10); }, 1000); } I am trying to simply add 10 every second but I get the answer NaN. I am using typescript in Angular 10. Why is

Continue reading

Angular Kendo Grid keeps details of removed master row visible

Issue I am using an angular-kendo-grid (version 6.14.5) in angular 10.0.3 with a kendoGridCellTemplate to show details. <kendo-grid #KendoGrid [data]="gridSettings.gridView" (…) > <kendo-grid-column field="code" title="code" > (…) <ng-template kendoGridCellTemplate let-dataItem> <details-component [id]="dataItem.Id" (onDelete)="onDelete($event)"> </details-component> </ng-template> (…) </kendo-grid> The details component

Continue reading

`SCSS` doesn't work after Updating from Angular 9 to Angular 10

Issue I updated my Angular application from version 9 to 10. Before updating it was working correctly. Now it’s getting this error: ERROR in ./src/assets/scss/argon.scss (./node_modules/css-loader/dist/cjs.js??ref–13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref–13-3!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ref–13-4!./src/assets/scss/argon.scss) Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js): SassError: File to import not found or unreadable: custom/alert.

Continue reading

First value after subscribing observable is always null

Issue I have the following ProfileService: export class ProfileService { private user: BehaviorSubject<User> = new BehaviorSubject<User>(null); constructor(private userService: UserService) { this.userService.getUser(1) .pipe(map((payload: Payload<Result>) => payload.result)) .subscribe((User: user): this.user.next(user)); } public getUser() : Observable<User> { return this.user.asObservable(); } } On a

Continue reading

Angular Routerlink : Concatenate Parent Route String with Variable

Issue How do I add string interpolation/concatenation to router link below which goes to parent route, and then variable link? <a routerLink="../account-information/" + "item.productId"> Solution String Interpolation routerLink="../account-information/{{item.productId}}" Attribute Binding Syntax: [routerLink]="’../account-information/’ +item.productId" or [routerLink]="[‘../account-information/’, item.productId]" Answered By – Muni

Continue reading

Cannot find control with name: 'idTypesAccepted'

Issue I am using a form builder to group form and form array as below this.$form = this.fb.group({ email: [step2.email || ”, [Validators.required, Validators.email, Validators.pattern(‘^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$’)]], phone: [step2.phone || ”, Validators.required], configuration: this.fb.group({ idTypesAccepted: this.fb.array([this.fb.group({ passport: [”, [Validators.required]], nationalId: [”, [Validators.required]],

Continue reading

Get Image from APi

Issue I’m trying to implement this code for making API call for image without success: <kit-general-16 [isNew]="product.isNew" [isFavorite]="product.isFavorite" [image]="mainImage(product.productImage)" [name]="product.title" [price]="product.price" [oldPrice]="product.oldPrice" routerLink="../edit-product/{{product.id}}"></kit-general-16> </div> Component: mainImage(productImage: number) { this.productService.getProductImage(productImage); } Service: getProductImage(imageId) { return this.http.get<any>(environment.apiKey + ‘/engine/product/files/’ + imageId) }

Continue reading

PUT and POST methods work in Postman but only POST works in Angular 10

Issue This in my "edit-continent.component.ts" addContinent(continentData) { this.continent.name = continentData.name; this.continentService.addContinent(this.continent).subscribe((response) => { (data) => (this.continent = { id: (data as any).id, name: (data as any).name, }); this.ngOnInit(), this.continentForm.reset(); }); } editContinent(continentData) { this.continent.id = this.continentId; this.continent.name = continentData.name; console.log(`${this.continentId}`);

Continue reading

Angular 10 Child Component only be used in Parent Component

Issue I need to configuration on component to be used only inside another component. How can I do that? Components: @Component({ selector: ‘app-menu[id]’, templateUrl: ‘./menu.component.html’, styleUrls: [‘./menu.component.scss’] }) export class MenuComponent { … } @Component({ selector: ‘app-sub-menu[id]’, templateUrl: ‘./sub-menu.component.html’, styleUrls:

Continue reading