Category : angular-directive

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, }] }) ..

Read more

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 = ..

Read more

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 ..

Read more

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, ..

Read more

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 ..

Read more