I have created a custom input formControl, so I need to get/set its value via [(ngModel)]: import { Component, Injector, OnInit, forwardRef } from ‘@angular/core’; import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, FormGroup } from ‘@angular/forms’; @Component({ selector: ‘time-picker’, template: `<input type="text" class="clockpicker" [formControl]="selectedTime" />`, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true, }] }) ..
Category : angular-directive
I have the below code to instance the component using the resolveComponentFactory. The ComponentFactoryResolver accept the type T @Input() field: IComponentConfig; @Input() group: FormGroup; componentRef: any; constructor( private resolver: ComponentFactoryResolver, private container: ViewContainerRef ) { } ngOnInit() { if (this.field.componentType !== undefined) { const factory = this.resolver.resolveComponentFactory(this.field.componentType); this.componentRef = this.container.createComponent(factory); this.componentRef.instance.field = this.field; this.componentRef.instance.group = ..
We have recently migrated our app to Angular 10. We have a structural directive that add/remove "disabled" attribute to/from a form element based on conditions (like ngIf). By default the elementRef we get in the structural directive is the placeholder comment node Angular generates, we need to get the button node with elementRef.nativeElement.nextSibling as Angular ..
I created a directive which allows to dynamically replace a component according to its selector. The problem is that my directive does not know the Inputs because they are dynamic depending on the component on which it is placed. Is there a way to simulate the Input decorator in the constructor or to bind the ..
We are making heavy use of the HTML5 picture Tag in our Angular 9 Application. We now want to show a fallback image, when the actual src returns 404. I created a directive that replaces the img src like this answer suggests: @Directive({ selector: ‘[fallbackSrc]’, }) export class FallbackImageDirective { constructor( @Attribute(‘fallbackSrc’) public fallbackSrc: string, ..
I have this custom Angular directive which converts Arabic and Persian numerals to English numerals as the user is typing. In Safari though, the caret jumps to the end of the input text and won’t let you manually move it back. If the user wants to change something they’ve written, then they have to delete ..
I have the following code. According to my requirement, If I press tab from keyboard, then <div> element should be focused and (click) event should work – it is working fine currently but if I click the same <div> element with mouse click, then this <div> element should not be focused and (click) event should ..
I want to add custom emojis to a chat room (Angular 10 app). These custom emojis are stored in the following json file. emojis.json: [ { "text": "customEmoji1", "imageUrl": "https://github.githubassets.com/images/icons/emoji/octocat.png" }, { "text": "customEmoji2", "imageUrl": "https://github.githubassets.com/images/icons/emoji/octocat2.png" } ] Some examples of possible inputs: Hello world customEmoji1 → customEmoji1 will be replaced by an image (the ..
I have various tooltips, so I decided to load them using directive. it works fine. But the thing is it’s not loading inside the host or appended div. without loading the component with created child div, I am finding no use. any one please help me? here is my directive: import { DOCUMENT } from ..
I am new to Angularjs, I want to show received data from API in the modal popup. we are using Swal for failure/success popups. Is it possible to use swal pop up to show grid ? What would be the best approach to show grid in the popup ? Source: Ask Javascript..
Javascript Development Company
Recent Comments