I 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 reading

Why 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 reading

Click 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 reading

How 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 reading

How 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 reading

How 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 reading

How 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 reading

What 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 reading

How 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 reading

How 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 reading

Why 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 reading

How 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 reading

How 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 reading

Why 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 reading

How 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 reading

How 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 reading

How 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 reading

Why 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 reading

How 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 reading

How 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 reading

Why (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 reading

is 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 reading

Why 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 reading

Can'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 reading

How 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 reading

Is 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 reading

Angular 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 reading