Issue I am using Angular 8. I have created a function called getUserInfo() in a service class which returns informations about the user using the cloud service Firestore. The problem is that when I show the result in the service
Continue readingTag: angular8
how to mock service dependency when testing service?
Issue im have to test a service that uses other service. i created faked service. i configured it to return false value and other fake service to return true value. how can i make a test that uses the fake
Continue readingDirective unit testing fails
Issue I am using jest.js for testing with my angular app. here is the directive I use in html: <textarea errorHighlighter formControlName=”Url” name=”Url” cols=”50″ rows=”5″ placeholder=”Enter Page URL” (ngModelChange)=”pageUrlChanges($event)”></textarea> here is my directive.ts file: import { Directive, ElementRef, SimpleChanges, HostListener,
Continue readingangular 8 jest test `toHaveBeenCalledWith` fails, how to test api url calls?
Issue In my test spec, I would like to insure 2 stuffs. 1. dummy data maching with model and get response. 2. find the `api` called with correct url. I am trying those, but getting error as: SubsystemServiceService › get
Continue readingSet order for Angular 8 tests
Issue One of my tests fails randomly. I want to set some order for debugging as by default tests run randomly with seed. I tried to set seed number in karma.conf.js or set random: false but no effect. I use
Continue readingHow to check the emit value when it's called by mock function
Issue I am using https://testing-library.com/ for test my angular app. Here is my component function: onCreateFormSubmit() { if (this.createForm.valid && this.crud.isCreate) { this.ssCreated.emit(created); //emits the data, needs to test } } test spec: test(‘Testing add Subsystem operation’, async () =>
Continue readingquokka with angular in Intellij tsconfig.json not found
Issue I have angular 8 project with typescript and jest for running tests. I am trying to configure quokka to run in IntelliJ. I installed quokka plugin in IntelliJ with empty .quokka.json, I don’t understand why example in quokka configuration
Continue readingPost method does not run within dtoption datatable js
Issue I have a method that runs a post to get users and I am using datable that consumes a web api in net core. But the post method is never executed. It doesn’t even print the console.log (‘executing …’);.
Continue readingapply ngclass in mat-cell getting error angular 8
Issue I am trying to use ngclass for my condition to apply css for the below html code but it was showing error. I want to use two class that is colorRed & colorOrange Here is my Two class (CSS)
Continue readingEntity removed from cache despite error on DELETE
Issue I am using Angular 8 with @ngrx/data to manage my entities. When I initiate a delete operation which fails (server returns 500), the entity is removed from the ngrx client side cache, despite it not being deleted on the
Continue readingHow to check default first radio button in angular material
Issue Trying to checked the first radio button as default. But I do not know how to do it. If any one knows please help to find the solution. app.component.html: <div class="input"> <mat-radio-group class="radio-group"> <mat-radio-button class="radio-button" *ngFor="let bus of buses"
Continue reading(ngx-admin/Nebular) How to integrate Grid system with nebular?
Issue I want to build Grid structure for Desktop tablet and mobile. Wrapper class .row and column class .col*** not there in scss. Do we need to import any css/scss file for dark theme? Solution The ngx-admin template uses the
Continue readinghow to set activeLinkOptions for nb-route-tabset/ngx-admin
Issue I would like tabs to be highlighted for multiple links. I’m not sure if I misunderstood the functionality. following is my code. <div class=”row”> <div class=”col-12″> <nb-card size=”small”> <nb-route-tabset [tabs]=”tabs” fullWidth activeLinkOptions=”{exact: false}”></nb-route-tabset> </nb-card> </div> </div> My component: tabs:
Continue readingAngular 8 Child Routes not working from component
Issue I have a strange issue, I’ve cloned ngx-admin and trying to use the theme as base theme. I’ve created Layout Components with Modules with Routing enabled. Created routes and connected components but the problem is routes are working fine
Continue readingHow to mix conditions and concatenation in [ngClass]
Issue I have a div which needs to be blurred/reduced opacity on mouseenter. I’ve created 2 css class called .blur and .less-opacity Component.css .blur { -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } .less-opacity { opacity: 0.5;
Continue readingHow to create dynamic dropdowns in Angular 8
Issue In My UI, Each Row has level1,level2 and level3 dropdown along with "Add Level" Button. I want on click on "Add Level" button, it will add a new set of three dropdown level1,level2 and level3 in the same row.
Continue readingAngular access with token
Issue in angular: I have to sent [access_token_value] to each function who access to server. can I do it global? I mean that I do not want to add it for each function ,but write it once can i do
Continue readinghow to set value of form input fields and re-check their form validation errors
Issue 🙂 I’m writing an angular8 web app with angular material. I use ReactiveForms to build a FormGroup in order to validate it’s fields. I have two fields of To Date and To Time that if I try to submit
Continue readingI an trying to disable and enable checkbox based on value in angular 8
Issue Here is my code I am having List Array like: this is getCall. ktsessions = [ {"presenter":"Bharath","topic":"Angular","status":"scheduled","emailId":"bharathkumar@gmail.com"}, {"presenter":"Sayyad","topic":"Angular","status":"organized","emailId":"raheemsayyad@gmail.com"},{"presenter":"Kanchan","topic":"APS","status":"scheduled","emailId":"kanchanubey@gmail.com"} ]; <tr *ngFor = "let ktsession of ktsessions > <td ><input type="checkbox" [disabled]=’disabled’></td> </tr> TS code: getktsession(){ this.service.getKtsession().subscribe(data =>{ console.log(‘get’, data);
Continue readingUnable to Push multiple values array into keys array into a single Array using javascript
Issue I have a Keys Array and Multiple Values Array . I want push values array into keys Array . Example :- data[0] :[‘ktCalender’, ‘presenter’, ’emailId’, ‘topic’, ‘status’] // Keys [1] : [‘2022-05-05’, ‘abc’, ‘abc@gmail.com’, ‘cricket overview’, ‘sheduled’] // Values [3]: [‘2022-05-04’, ‘xyz’,
Continue readingChange FXFlex breakpoint values
Issue Is there a possibility to change and use the FxFlex default breakpoint values without defining a custom breakpoint provider? I would like to change the breakpoint media query for aliases sm and md. From sm ‘screen and (min-width: 600px)
Continue readingAngular provider receives JSON but recognizes its content as none
Issue I have two components that depend on a third component function to receive some JSON data. The function that them both use is this: getAllPosting(before, after) { return new Promise((resolve, reject) => { console.log("url", environment.apiLogin + this.apiBase + localStorage.getItem(‘idEmpresa’)
Continue readingLazy loading doesn't load the module – Angular 8
Issue I’m trying to lazy load my home page which includes a PrimeNG module (MenubarModule), but it is never loaded so I keep getting the error: Error: Template parse errors: ‘p-menubar’ is not a known element: app.module.ts @NgModule({ declarations: [
Continue readingWhat's the best and cheapest way to deploy a web-app made by spring-boot and angular online?
Issue I made this project composed by a back-end API in spring-boot and a front-end in Angular8. I was wondering if I should find some cloud solution? I still haven’t got the picture. Can someone help? TANKS A LOT Solution
Continue readingname can only contain URL-friendly characters NPM Install
Issue I have a project and I’m trying to give npm install, but it is giving the following error: npm ERR! code EINVALIDPACKAGENAME npm ERR! Invalid package name "@ angular / platform-browser / animations": name can only contain URL-friendly character`
Continue readingmin and max validation is firing when i am not using array, but not firing when i use array controls
Issue As you can see in this stack blitz example min and max validation is firing https://stackblitz.com/edit/angular-mat-form-field-icrmfw But in the below stack blitz, I have made an array of the same controls , but the validation is not firing https://stackblitz.com/edit/angular-mat-form-field-hmmm69
Continue readingHow to put every two buttons on one rows with border separate between each row?
Issue I work on angular 8 I need to make web page design using html and css or bootstrap my issue i face how to put every two buttons beside each other with border and after finish first row go
Continue readingwhen save excel file on angular 8 get error Failed to execute createObjectURL?
Issue I work on angular 8 I face issue when save excel file I get error as below : ERROR TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed. at Function.a [as saveAs] (FileSaver.min.js:1:1339) at SafeSubscriber._next (zdeliverysys.component.ts:225:23) what i
Continue readingSorting a JSON response data in Angular 8
Issue I have to sort the response JSON data as per the approved status. Response data is something like this; [0]: adjustmnetfileds: Array(2) [0]: some data [2]: some data adjustments : Array(1) 0: approvedByName: ‘Jack’ taskName: ‘Insurance’ approvedStatus: 1 [2]:
Continue readingIssue with creating array inside array in angular 8 model
Issue I am trying to create a model named "reportVersion" This contains an array (ReportCategory) that contains objects collection and two variables one is numeric and another is a string. I am creating this model just to pass to an
Continue readingPopulate mat-table with multiple nested custom data on Angular 8.3.23
Issue I know that is a little specific but i’m trying to populate a table with children of multiple nested data. My data are organized as follows: each one of my entities has an id, a name and a curve;
Continue readingAsync pipe with Search custom pipe
Issue I have a dataSource which is an observable because I recibe data from my API. I want to search by text that data and filter it: Here i have my Pipe.ts: @Pipe({ name: ‘filterText’ }) export class FilterTextPipe implements
Continue readingIs there something to replace ng1 string format with ng8?
Issue I have an array of errors to display in a <div *ngFor=”let error of arrayOfErrors”> {{error.errMsg}} </div> and in AngularJs it was possible to do something in a loop to custom the errMsg like : error.errMsg = ‘my error
Continue readingAngular Testing – Chained HTTP Requests using rxjs switchMap
Issue I am trying to unit test this function in my service that first executes POST request and then executes a GET afterwards. I’m using switchMap to accomplish this but the problem I’m having is that both of the requests
Continue readingAngular 8: Reactive form field stop async call if the previous value is same as the current value
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
Continue readingAngular 8: Type 'T' is not assignable to type 'HttpEvent<any>'
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,
Continue readingAngular 8 – How to push one model data to another model
Issue I have page in that i have 3 input fields and a grid with a add button to add data to the grid and a save button to save the whole data, here what i want to try is
Continue readingWhy formatting data is not working Angular?
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
Continue readingprovider.ngAfterViewInit is not a function in Angular using ngIf?
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
Continue readingInvalidPipeArgument: '' for pipe 'AsyncPipe'
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()
Continue readingWhy change event is not working for input?
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)
Continue readingClick outside directive with ngIf?
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) {}
Continue readingHow to improve this code Angular and call method once?
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
Continue readingHow to nested one component into another?
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
Continue readingHow can we avoid calling a service each time a recursive component, in which it is provided, is instantiated?
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
Continue readingHow to notify that element form was changed?
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:
Continue readingWhen to use resolvers Angular?
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
Continue readingHow to add attribute to DOM element?
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
Continue readingWhat is ViewChild
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,
Continue readingHow to get value of variable from another component, not child?
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:
Continue readingHow to open explore directory using Angular?
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’,
Continue readingWhat does it mean domain module in Angular?
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
Continue readingHow to reset session/local storage when user opens a new tab?
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
Continue readingWhy Angular Datepicker sends wrong date?
Issue I have datepicker: <input type=”text” formControlName=”startDate” [ngClass]=”{ ‘has-error’: form.get(‘startDate’).invalid }” [matDatepicker]=”picker” class=”materialDatePickerInput” placeholder=”{{ ‘select_date’ | translate }}” /> <mat-datepicker-toggle matSuffix [for]=”picker” ></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> I have selected date: 01.01.2000 from datepicker, but it sends to server like: 1999-12-31T20:00:00.000Z Why
Continue readingHow to sen file using httpClient in Angular?
Issue I have tried to send file using HttpClient: public async uploadProfile(data: UploadProfile): Promise<any> { return await this.http.post(this.uploadProfileUrl, data).toPromise(); } Before sending file I prepare it to binary array: interface UploadProfile { file: any; } file = [123, 10, 32,
Continue readingHow to dynamically change template in Angular?
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
Continue readingHow to await service ready Angular?
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)
Continue readingWhere to specify path in Angular for corrct import?
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.
Continue readingHow to change base url of backend in Angular?
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
Continue readingHow to get month name for a given year and week in Javascript
Issue I have 2 form fields in HTML namely Year and Week. Once the user selects a Year and a week from the dropdowns, I want to display the month Name for the selected year and week. Can anyone help
Continue readingHow to remove location, sourcefile and linenumber from Angular 6's auto generated XLIFF file?
Issue We are using Angular’s build in tools to extract messages from templates. This works fine and we are getting all the information in a XLIFF file using: ng xi18n In this file a trans-unit looks like this: <trans-unit id=”3535a6c8296b457542000d2cbd15ca93f86cdd79″
Continue readingWinston logger in angular-electron application
Issue I am working on angular + electron application. I am using angular version 8. I am trying to add logger to my application and for logging on electron part I am trying to use winston logger. Once I add
Continue readingAngular 2 – Create Directive
Issue There was a single dropdown it was working fine Now I want to make this code reusable, or create Directive because now there are few more dropdowns are added in few more pages I prefer to make directive, but
Continue readingView does not update when calling function from other component Angular + NativeSript(6)
Issue View does not update when calling function from other component Angular + NativeSript. i’m calling a function to get some data and render but the data is not displayed in the component but in console log i can see
Continue readingUpdate variable on *ngFor Angular
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
Continue readingHow globally listen all forms changes in Angular?
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
Continue readingHow to organize routing in Angular?
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
Continue readingWhy sometimes toasterService does not show popup?
Issue public constructor( private toasterService: ToasterService) { } Then I listen toaster: public ngOnInit() { this.errorWatcher.localConfigObservable.subscribe(exception => { const toast: any = { type: exception.type, body: Helper.toasterBodyMessages(exception.messages) }; this.toasterService.pop(toast); }); } I send message using: public invokeMessageOutside(type: string, title: string,
Continue readingHow to filter data as per repeat dates in single array element
Issue This is the type of Object Array i already have [ { “date”:”12-09-2019 12:00 PM”, “id”:”1″, “name”:”hello1″ }, { “date”:”12-09-2019 03:00 PM”, “id”:”2″, “name”:”hello2″ }, { “date”:”12-09-2019 07:00 PM”, “id”:”3″, “name”:”hello3″ }, { “date”:”13-09-2019 08:00 AM”, “id”:”4″, “name”:”hello4″ },
Continue readingHow to set returning type Observable?
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
Continue readingcan't binding 'ngModel' also not rendering mat-select in angular material angular 6
Issue I am using Angular Material in application and Mat-select are showing Multiple times based upon loop and some conditions i need to select data by default in mat-select in ngAfterViewInit() Loop which cteate multiple mat-select *ngFor=”let p of GlobalVariableService.controllsApplicationTypeFields;let
Continue readingHow to use proxy in Angular?
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
Continue readingAdding row dynamically by click on the button of the previous row in mat-table angular8?
Issue I want to do add new empty row when a add row button/icon click on the previous row. As of now i am adding new row to the table by click on button which is outside of the table.
Continue readingHow to improve performance of rendering?
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
Continue readingOrderBy date pipe in Angular?
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:
Continue readingHow to save last components changes?
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
Continue readingWhy each time after creating component I have reference to previous data?
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
Continue readingHow to show component inside another dynamically?
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
Continue readingHow to get data in component better?
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
Continue readingWhen we use ngOnInit in services?
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
Continue readingHow to activate component only when data comes from server?
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
Continue readingHide component from any active component?
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
Continue readingWhy (keydown.enter) and (keydown) dont work for list?
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?
Continue readingis it possible to set focus for element?
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
Continue readingCan't bind to 'ngModel' since it isn't a known property of 'input'?
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 {
Continue readingWhy input value is empty after reset?
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
Continue readingIs it possible to listen to an event in a component and change the native element?
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
Continue readingCan't resolve all parameters for service provider?
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]
Continue readingProperty using child component in Angular?
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
Continue readingHow to organize components?
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
Continue readingIs this the right usage of ng-container?
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
Continue readingHow to replace container by components?
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:
Continue readingHow to get data async from socket and display it on page?
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:
Continue readingNo component factory found for UserCommonModalComponent. Did you add it to @NgModule.entryComponents?
Issue I get an error while opening mat model pop am added entry components in associated module but could not solve yet how can we solve give me suggestion pleaseenter image description here Solution If you are using Mat-Dialog you
Continue readingMigration from Angular 4 to 9
Issue It is advisable to migrate Angular 4 to 9 directly, or it would be better to go from 4 to 7 and then from 7 to 9? Solution using this link https://update.angular.io/ to what you have to do for
Continue readingng-bootstrap accordion : How to add class to wrapper of nbg-pannel?
Issue I want to add a class(‘open’) to the wrapper(ie. ‘card’ class) of the ngb-panel selector when ngb-panel is expanded. How can I achieve that? As per my research, I have used (panelChange)=’panelShadow($event)’ event to get the active panel (ie.
Continue readingCompile with angular 8 instead of the 9
Issue I recently installed Angular 9. I would like to experiment by trying to compile my project with Angular 8. Is it possible to choose the version with which to compile? Since I previously had Angular 8? Thanks in advance.
Continue readingAngular Differential loading – How to generate only one polyfill.js file
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”:
Continue readingAngular 9 – Routes
Issue I’m very new at Angular 9. These are my routes: http://localhost:4200/pc_configuration –> then go to login http://localhost:4200/PC2/login — it works fine, but when I login, dashboard overwrite the id (PC2) http://localhost:4200/dashboard/ — it should be http://localhost:4200/PC2/dashboard/ These are my
Continue readingwait Until a second Observable emits
Issue In Rxjs, there is the pipe takeUntil but there isn’t a pipe wait Until, that makes the current observable waiting for a seconde Observable to emit. My Final Goal is to make many Observable still waiting until my Observable
Continue reading