Tag: angular8

Issue I have a reactive form input field to enter name also the field have a async validator to check if the entered name is already exits in the database or not and once the form is submitted it will

Issue I am implementing a intercetor to handle any error globally but i am getting the error below, i have tried a lot of solution but nothing works interceptor.service.ts import { Injectable } from ‘@angular/core’; import { HttpRequest, HttpHandler, HttpEvent,

Issue I use the following pattern: {{ item.EVPDATA | date: “dd.mm.yyyy HH:mm” }} Value item.EVPDATA is UNIX time 1566473370: I get formatted data as: 19.07.1970 07:07 Why I get wrong data? Solution As your data is in unix time, so

Issue There is component that is activated by ngIf: <filter-dialog *ngIf=”isFilterOpen()”></filter-dialog> Where: isFilterOpen() { return FilterService.isOpen; } Component class is: export class FilterDialogComponent implements AfterViewInit { ngAfterViewInit() { this.createFilterComponent(); } } Why I can this error: SkeletonComponent.html:13 ERROR TypeError: provider.ngAfterViewInit

Issue timers: Observable<ITimer>[]=[]; Template is: <div *ngFor=”let item of timers | async”> {{ item.time }} <div (click)=”remove(item.index)”>Remove</div> </div> Why I get this error? If not initialize this.timers then async works. Elsewise I can not get lenght in this method: add()

Issue I have the following input element: <input range [btnClass]=”‘close_input_button'” type=”text” class=”reset-border-right” formControlName=”parentId1Name” /> As you can see I use directive: range [btnClass]=”‘close_input_button'” Directive looks like: @Directive({ selector: “[range]” }) export class RangeDirective implements OnInit { @HostListener(“change”, [“$event”]) ngOnChanges(value: any)

Issue I use the following directive to detect and hide block if click was outside concrete DOM element: import { Directive, ElementRef, Output, EventEmitter, HostListener } from “@angular/core”; @Directive({ selector: “[clickOutside]” }) export class ClickOutsideDirective { constructor(private _elementRef: ElementRef) {}

Issue I have a DOM structure: <div class=”dropmenu_block_header” *ngIf=”getLanguages(group).length”> <div *ngFor=”let language of getLanguages(group); trackBy: trackByFn”></div> </div> As you can see in template there are two calls: *ngIf=”getLanguages(group).length” *ngFor=”let language of getLanguages(group)” How can I optimize this and call method

Issue Now in main component I do iteration of items = [1,2,3]: <ng-content *ngFor=”item in items”> <app-form [item]=”item”></app-form> </ng-content> As result I get this: <app-form [item]=”item” type=”1″></app-form> <app-form [item]=”item” type=”2″></app-form> <app-form [item]=”item” type=”3″></app-form> How to better to rebuild DOM and

Issue Here is a typical component that has FormService in providers: @Component({ selector: “app-block”, templateUrl: “./block.component.html”, styles: [‘.block_children { padding-left: 50px;}’], providers: [FormService] }) export class BlockComponent { constructor(@Host() public formService: FormService) {} @Input() form: any; getType(form: any) { console.log(typeof

Issue I have some forms are generated by FormGroup. class FormGroupCustom { form: FormGroup; } let forms: FormGroupCustom[] = []; for(let i = 0; i <= 10; i++) { this.forms.push({“formName”: i, “form”: new FormGroup()}); } How can I notify formName:

Issue In which cases do you use resolvers in Angular? I think it takes a lot of performance, in which case it has optimize using? Could I reuse resolver and cache it? Solution The answer is somewhat subjective to your

Issue I need to add attribute multiple to element: <mat-select [formControlName]=”field.name” multiple> But add this by condition: I have tried: <mat-select [formControlName]=”field.name” multiple [attr.multiple]=”field?.multiple ? ‘multiple’ : ”” > It gives me multiple=”multiple” But I need: <mat-select [formControlName]=”field.name” multiple> Solution

Issue There is declaration in component: export class GlossariesComponent implements OnInit { @ViewChild(UploaderComponent, {static: false}) private uploader: UploaderComponent; } Does it mean that I do reference to TEMPLATE of UploaderComponent component? How then to use @ViewChild in current component template,

Issue I have tried to get value of variable from component DialogDictionariesTypesComponent using this: @ViewChild(DialogDictionariesTypesComponent, { static: false }) dialogDictionaryTypes: DialogDictionariesTypesComponent; ngOnInit() { console.log(this.dialogDictionaryTypes.dictionaries); } Where DialogDictionariesTypesComponent has: public dictionaries: any[] = []; Why I get an error: ERROR TypeError:

Issue How to open explore directory using Angular clicking over DOM element, not input file? Solution So this is what you would need to do. HTML <div (click)=”openInput()”>CLICK ME</div> <input style=”visibility: hidden;” type=”file” #inputElement /> COMPONENT class MyComponent { @ViewChild(‘inputElement’,

Issue What does it mean domain module in Angular? Also is it possible to group all additional custom classes like Helpers to module? Solution Domain feature modules deliver a user experience dedicated to a particular application domain like editing a

Issue How to reset session/local storage when user opens a new blank page (tab)? In which place should I do that? Solution You can attach focus/blur event to window in your root component. e.g -> // on opening of a

Issue I have a common abstract component that renders tree. I need to able change template for this component dynamically by condition? I think tree logic should be in separeted service. And I have to create two components with different

Issue Inside root component is ititialized first time singltone service. export class AppComponent { constructor(private reonMapLibraryService: ReonMapLibraryService) { } } Then in children component I try to get ready instance: export class SearchFilterComponent implements OnInit, AfterViewInit { constructor(private reonMapLibraryService: ReonMapLibraryService)

Issue There is file map-api.d.ts it has import: import { MapProps } from “Map/map”; So path Map/map is located in the the level as file map-api.d.ts. But VS says Cannot find module ‘Map/map’. How to configure path to this file.

Issue I have path let path = “/”; When it call this path Angular makes path like: http://localhost:4200/backend/api But I need http://localhost/backend/api Without port, ho to set this option in Angular? Solution the best use is to set a base

Issue I have a *ngFor and I’m trying to update a {{subtotal}} label on click but it updates all of the items with same value. Same goes with {{quantity}}. There is a way to create local variables ? Heres my

Issue There are a lot of reactive forms: FormGroup on the page. I can subscribe on one of them. But I need to have global listener, that listen all forms and says, from which form data comes. How to do

Issue I have component SkeletonComponent with tabs inside: <div class=”tabs”> <div class=”tab” *ngIf=”showTab(1)”><app-journal></app-journal></div> <div class=”tab” *ngIf=”showTab(2)”><app-journal-extended></app-journal-extended></div> </div> So, there is mechanism that activate tab by condition. It is placed in parent component SkeletonComponent. Now I want to add routing, to

Issue I have the following code: public check(data: ProjectSettings): Observable<boolean> { return this.http.post(this.checkProjectUrl, data); } I get an error such: Type ‘Observable’ is not assignable to type ‘Observable’. Type ‘Object’ is not assignable to type ‘boolean’. How to solve this

Issue I have Angular proxy wih this settings: { “/api”: { “target”: “http://localhost:4200”, “secure”: false, “pathRewrite”: { “^/api”: “” }, “logLevel”: “debug” } } So, I have tied to proxy all request to server from http://localhost:4200 to http://localhost without port

Issue I have service that adds each time response data to array: group: []. Where response is object: {“items”: [{“id”: 1}, {“id”: 2}, {“id”: 3}]} Problem is that it is rendered so long in template and renders each time when

Issue I have pipe that sorts by array by date property. Problem is that not each elements has property date in args.key. So there rows should be in bottom of list. import { Pipe, PipeTransform } from “@angular/core”; @Pipe({ name:

Issue There is component that is activated by condition ngif. Use can perform activity, for example open menu, set active element or just write text inside textarea. After that user leaves this component to another ngif. After time user returns

Issue I have component that gets data from service by event message: this.objectDetailsSubscription = this.eventService.subscribe( EventsChannels.OBJECT_DETAILS, semantic => { this.layer = this.layerSemanticService.getObjectSemantic(semantic); } ); Where service is: @Injectable({ providedIn: “root” }) export class LayersSemanticService { getObjectSemantic(semantic: LayerItemGeneric): ObjectInformationCustom { this.semantic

Issue I have a component LayersComponent. @Component({ selector: “app-layers”, templateUrl: “./layers.component.html”, styleUrls: [“./layers.component.sass”] }) export class LayersComponent implements OnInit { } Template is: <div class=”Layers”> Text <!– Create component below –> <app-another-component></app-another-component> </div> I want to create and show dinamically

Issue Using service inside component: ngOnInit() { this.layer = this.layerService.getObject(semantic); } Or using @Input() and pass data from parent: @Input() layers: any[] = []; Should component control DOM, for example show/hide DOM elements, or everythin should be in services? Something

Issue When we use ngOnInit in services? For exmaple I need to listen Observer inside service: this.eventService.subscribe((data) => { }); Where better place this code inside constructor or ngOnInit? Solution ngOnInit is a angular life cycle hook. They are only

Issue There is a parent component where I call its child component: <app-add-object-layer-component></app-add-object-layer-component> Child has a service inside: constructor(private editService: editService) { } getEditData(){ return this.editService.get(); } Child component is initialised always even there is no data returned. Sure, I

Issue There is a component <app-tabs-components>. It gets data from service. There is variable show: boolean in this service to show/hide component on the page. @Injectable({ providedIn: “root” }) export class TabService { show = false; showHide(status: boolean) { this.show

Issue I have list of elements: <div class=”List”> <div class=” SearchListItem” [ngClass]=”{ active: i == activeIndexResultItem }” *ngFor=”let item of searchShortResultItems; let i = index” (mouseenter)=”mouseEnterItem($event, i)” (keydown.enter)=”searchByEnter($event, item)” (click)=”selectSearchResult(item)”> {{ item.text }} </div> </div> Why (keydown.enter) does not work?

Issue I have two element on the page: <input tabindex=”0″ type=”text” (keydown)=”keydownInputSearch($event)” (click)=”showSearchResultContent = !showSearchResultContent” #inputSearch> And block: <div #searchList class=”SearchList” *ngIf=”showSearchResult()” tabindex=”-1″></div> Problem is when block #searchLis is exist I can not set focus back to #inputSearch. I have

Issue Full code is: <input #inputSearch tabindex=”0″ [(ngModel)]=”searchValue” (keydown.enter)=”searchByClick()” type=”text”> app.module is: @NgModule({ declarations: [], imports: [ CommonModule, SharedModule, BrowserModule, AppRoutingModule ] )} export class AppModule {} What is wrong, why it does not work for me? Solution import {

Issue I have reference to input element: @ViewChild(“inputSearch”, { static: false }) Template is: <input tabindex=”0″ type=”text” (keydown)=”keydownInputSearch($event)” #inputSearch autocomplete=”off” autofocus /> <div class=”searchWrapperBtn” (click)=”reset()”></div> Where reset is: public reset(): void { this.inputSearch.nativeElement.value = “”; } Why after reset() input

Issue My component uses a class in pure JS that creates the DOM elements and returns them to the template by reference: @ViewChild (“layersContainer”, {static: true}) layersContainer: ElementRef; <div class = “Layers” #layersContainer> </div> I pass the #layersContainer reference to

Issue There is a service that I use as provider in each components: export class LayersSemanticService { constructor( private nMapLibrary: MapLibraryService, private linkService: LinkService ) { } } Using as instance: @Component({ selector: “app-intersection-layer-component”, templateUrl: “./intersection-layer-component.component.html”, styleUrls: [“./intersection-layer-component.component.scss”], providers: [LayersSemanticService]

Issue How to decide when to use child angular component inside parent? Should it be one entity, for example lessons list and add lesson. I try to get when I should use child component, when exist real relation between parent

Issue I have a Product component that represents data about product. Near information is placed component Buttons with two buttons that allow to add product to favourit list and to wish list (FavouriteComponent, WishComponent). My template representation is: <app-product> <app-buttons></app-buttons

Issue I have a Product component with a child ShareButton component: <app-product> <app-share-button (click)=”click($event)”></app-share-button> </app-product> When I click the ShareButton, it returns data to the parent component via: click($event)`: public click($event) { this.typeAction = $event.type; } Is it a good

Issue I have sidebar component that have to show different compnents depends event data. Now anywhere in application I send command using Subject() with data: {data: {}, type: “showSearch”} {data: {}, type: “showResultSearch”} {data: {}, type: “showUserBlock”} {data: {}, type:

Issue There is variable: public message: any; Then in template I tried to show message if it is not empty: <div *ngIf=”message”>Message</div> But message is showen only when I do click in area where is div placed. Full code is:

Issue We just migrated from angular 7 to angular 9. My application targets to larger audience and i need to support legacy browsers like IE-11. Hence i have made the following change in tsconfig.json { “compileOnSave”: false, “compilerOptions”: { “outDir”: