2,385 questions
1
vote
2
answers
87
views
Angular: Numbers only directive
I have this piece of code
<input matInput type="number" [(ngModel)]="value"
(ngModelChange)="onChange(true)" />
But I want to be able to enter only numbers, ...
- 376
-1
votes
0
answers
67
views
Dynamic Directive not applying, in reusable controller
I'm trying to create a reusable controller for textbox, textarea, dropdown. etc, there are plenty of directives in my project. so I tried to render it dynamically
validation-mask.directive.ts:
@...
- 67
2
votes
1
answer
102
views
How does the order of the imports in angular works ? Why is not working with one order and working with the other?
I created a directive that allow me to change the routerLink of my links.
I encountered an error where the routerLink was not updated in one component, but was correctly updated in an other.
I found ...
- 823
4
votes
1
answer
86
views
Should we use NgZone.runOutsideAngular() when handling fromEvent with filters in Angular
I came across this implementation of the outsideCLick directive
ngOnInit() {
this._ngZone.runOutsideAngular(() => {
fromEvent<MouseEvent>(document, DomEventsEnum.MOUSEDOWN, { ...
- 121
2
votes
1
answer
152
views
Project structural directive using ng-content in Angular
I am working on an Angular project and I've made my own table <app-table> component by wrapping an existing table component from the team, let's say <inner-table>, inside it. Please keep ...
- 21
1
vote
1
answer
109
views
Can't access inputs from host directive to HTML template
In the docs for Angular host directive, it's stated that I can use my inputs/outputs in the template like this.
@Component({ ...
template: "ID {{someId}}",
hostDirectives: [ { directive: ...
- 40.3k
-1
votes
1
answer
83
views
Test IntersectionObserver's callback's actual code in an Angular directive
I am facing difficulties reaching the callback of the following IntersectionObserver's callback (which is inside a directive) in angular test code and thus are not being able to fulfill the test ...
- 1,421
2
votes
1
answer
92
views
Getting class attribute from ng-template
@Directive({
selector: "ng-template[model]",
standalone: false,
})
export class ViewSelector {
@Input() get model() { return this._model; }
set model(value: Object) {
...
- 29.2k
4
votes
1
answer
58
views
Double <ng-template> nesting with directive and contentChild = can't get second-level directive
Today I tried to make a custom table component. It must take column keys, default column template and column templates for some special columns to override their view. I use angular v19.2.
I have this ...
- 63
0
votes
3
answers
85
views
New @for Directive in Angular – Dynamic Array Issue
I'm creating a dynamic FormArray within a FormGroup. The only change I've made is switching from *ngFor to the new @for. The issue occurs when I try to remove an element from the FormArray.
Previously,...
1
vote
1
answer
281
views
Angular Directive Composition: How to Pass a Computed Input?
I have a custom directive (myDirective) that composes a third-party directive (ThirdPartyDirective) via the hostDirectives property in Angular.
I’m passing several inputs directly, but one of them ...
- 1,284
1
vote
1
answer
116
views
How to get the old state in a input by doing Undo (Ctrl + Z) when the value is formatted using a directive?
I'm creating a thousand separator directive where 1234 will be shown as 1,234 visually but behind the scene it will be 1234 only. So after everything is working expected. Problem is happening when I'm ...
- 1,154
1
vote
0
answers
144
views
How to make angular standalone directive globally available?
I have a few simple helper directives which I want to use throughout the entire app. With modules this was easy to do, but with standalone I don't know how we can do it.
One example of such a simple ...
- 138
0
votes
0
answers
139
views
Using @HostListener in Angular, on doing ctrl+v, Paste event not triggered when keydown event is also there AND on keydown event, ctrl+v not detected
On input type="text", I am using two directives - keydown and paste.
My requirement is:
I need to validate user input string character by character which will be done in keydown event,
I ...
1
vote
1
answer
69
views
How to provide different test cases by use of one test component for a directive which changes the element stlye in ngOnInit() in Angular 19?
I have a directive which looks like the following:
import { Directive, ElementRef, Input, Renderer2, OnInit } from '@angular/core';
@Directive({
selector: '[appChangeStyle]'
})
export class ...
- 55
1
vote
1
answer
44
views
Directive cant bind to MatSelect with ContentChild
I'm having trouble with a directive that worked in Angular 8 but isn't binding to MatSelect in Angular 16. The directive is created, but @ContentChild never succeeds in binding to MatSelect.
Directive ...
- 126
0
votes
0
answers
196
views
ngx-mask custom directive on primeng components
I need some help to uderstand why i'm struggling to do this :
I got a primeNG datepicker that has an input inside.
I would like to apply the ngx-mask directive to that input, but i can't find a way ...
1
vote
1
answer
57
views
Custom directive and [ngClass] on same element does not work
I have a custom Directive which puts a class when the mouse hovers an element :
@Directive({
selector: '[hover-class]'
})
export class HoverClassDirective {
@Input('hover-class') hoverClass: ...
1
vote
1
answer
62
views
String interpolation via directive
Most commonly you would set the mat-option text in a way like this.
<mat-option [value]="type.key">{{ type.value }}</mat-option>
The thing is I have a directive that processes ...
- 59
1
vote
1
answer
270
views
Angular 19: Implement Directive like FormControlName
I want to implement my own Property directive which should act similar to the existing FormControlName directive.
It should use the name of the given Property to act as if it where given as ...
- 5,780
0
votes
0
answers
49
views
Multiple validation is not working properly in template driven form
I having issue multiple validation is not working properly. For example validate1 method checking input is empty or not , validation2 method checking name1 and name2 value are equal or not equal. ...
- 67
1
vote
3
answers
340
views
Can we use <mat-error></mat-error> inside a *For* loop in Angular
I have created a common component. I am stuck in a problem where I am using angular material and using mat-form-field. I am using @if in angular 18 to check for a condition then mat-error is working ...
- 13
2
votes
1
answer
57
views
Binding a property using a function depending on the DOM element
I'm trying to adapt the following code into Angular, concerning the Text element:
function setAxisValue(name, value)
{
var axis = document.getElementById(name)
if(!axis)
return
...
- 55
-1
votes
1
answer
38
views
ControlValueAccessor using implemented formatand parser in form fieldcheckbox but Input data is changing ,it is not reflecting checkbox
one TrueFalseValueComponent used for if checkbox is checked , I will get 1, if checked is false i will get 0.
For example I am selected first record selection value 0. Now checkbox is not checked. I ...
- 67
1
vote
1
answer
61
views
Formatters and Parsers , ng-true-value & ng-false-value directive for Angular make workable
Currently I am created two directive to project . But one directive useed for if checkbox is checked , I will get 1, if checked is false i will get 0. Another Directive is used for convert value &...
- 67
2
votes
2
answers
131
views
Validator in not a function in angular
I have created own directive for adding validation and removing validation based input parameters of directive. I am getting error when loading and form field value changing validator is not working ...
- 67
1
vote
2
answers
857
views
Angular 18 Directive - Change color of button on hover
I'm learning how to create a simple custom directive using Angular 18 that can change the background color of an element. I'm referring to the code provided in the Angular documentation here but it ...
- 11
1
vote
2
answers
49
views
Angular insert default values into a library component
I'm wondering if it's possible to somehow insert default values into a component from a library (but not wrapping it into another component which does this) to set default values.
e.g. i don't want ...
- 53
3
votes
1
answer
570
views
Angular hostDirectives API Not Passing @Input Values Correctly in Composed Directives
I'm encountering an issue with Angular's hostDirectives API, specifically when trying to pass values through @Input in composed directives.
I have a standalone directive PgcTypoDirective that applies ...
- 1,969
1
vote
1
answer
117
views
How to Access ngControl Property Inside a Directive in Angular 17
I'm trying to use a simple radio button group with ngModel in Angular 17. Additionally, I have a directive (appTest) and inside this directive, I need to access the ngControl property.
<div class=&...
- 267
0
votes
1
answer
30
views
Angular Directive Failing to Affect Input Fields in Child and Grandchild Components
I’m having trouble getting my Angular directive to work on input fields that are located in child and grandchild components. While the directive functions correctly for input fields that are directly ...
- 449
1
vote
3
answers
114
views
Use directive to change @Input attribute of component
I have the following components :
@Directive()
export abstract class AbstractControlComponent<T> implements ControlValueAccessor {
...
@Input() warnings: string[] = [];
...
}
@Component({
...
- 583
1
vote
1
answer
112
views
Angular directive css class selector is not working when class added by ngClass directive
Angular directive css class selector is not working when class added by ngClass directive.
This is my code example and I will also add playground at link
@Directive({
selector: '.test',
standalone:...
- 11
2
votes
1
answer
641
views
How to set an inputSignal of a component from a directive
I wanted to create a directive that sets an inputSignal of a component, when it's used together, but I was not able to.
@Component({
selector: '[my-component]',
standalone: true,
template: `{{...
- 1,622
0
votes
1
answer
336
views
Template/view using for directive is not getting updated with signal
I have this code. In debug I can see that WorkersComponent#workers are updated properly. Unfrotunatelly ui is not updated. What's wrong?
@Component({
selector: 'app-planning-workers',
templateUrl: ...
1
vote
1
answer
157
views
How to get instance of attributed directive from an element dynamically in code behind
I'm wondering if there any way to get instance of a directive on DIV element?
There's lots of divs, and I would not like handle a list in component.
<div class="item"
(click)="...
- 279
0
votes
0
answers
55
views
How to unit test a keyDown directive on input with Angular?
I tried many variations based on answers here but none worked, the KeyboardEvent never sets value on the input.
How can I simulate a user typing characters?
Unit test:
@Component({
selector: 'app-...
- 4,198
1
vote
1
answer
73
views
I would like to iterate over a list of svg icons in angular using the *ngFor directive
Here is a list of svg icons in an array; I want to iterate through them in the template.
aboutTags = <AboutTags[]>([
{
title: "1 year of",
sub: "Professional ...
- 11
2
votes
2
answers
483
views
Angular directive @Input ignored when added to component via directive composition
I think I'm missing something very basic here, but I've been staring at this for too long. According the docs and everything else I've seen, an Angular directive's @Input() will be accessible on a ...
- 1,449
1
vote
1
answer
122
views
Angular - Validator not working when pasting the value to control with Phone Directive to format value
We are using Angular 17 along with Reactive forms in our project.
We have written a custom directive which formats the output to US phone number format 111-222-3333.
What we are seeing is that when ...
- 842
2
votes
0
answers
222
views
How to change Google Material Symbol fill on demand using Angular directive?
I currently have my own npm font icon library that I created and I have been asked to implement the modality where, using my directive below, if someone writes <div icon="search fill"> ...
- 35
1
vote
2
answers
975
views
Angular: Some Google Material icons not showing in browser
I am developing a custom icon library for my Angular project, as many of the icons in Font Awesome now are not free.
I used Google Material Icons, implementing them as a stylesheet. Then I created an ...
- 35
0
votes
2
answers
183
views
Does routerLink not always work in displaying components?
I am currently using the new AnalogJS and I added a routerLink to a component that takes in the role (String) which can be either Designer/Creator. The route takes in a role param and the component ...
- 1
1
vote
1
answer
59
views
Confusion regarding scope of button inside angular
(click) event in one instance of a component is triggering function in another instance. I don't know how to explain this. I've attached a stackblitz example.
Clicking on both the buttons print same ...
2
votes
2
answers
258
views
Using union types & type guards in template when using ngForOf in Angular
If I do array: (A | B)[] in an *ngFor seems like the option is to use $any() all over the template.
Is there a way to do this properly?
I avoided typing altogether with $any() but it feels bad. All ...
- 21
2
votes
1
answer
4k
views
Angular 17 custom Directive rendering don't work
I'm learning Angular.
I want to create custom directive, but doesn't work ! (it's not app for production, it's a discover app ^^)
I have no error, the project build ! But the directive don't work !
To ...
- 79
-1
votes
1
answer
103
views
Drag and Drop Directive touchend and touchstart event target is the same
I create a custom directive for drag and drop, i don't use drag and drop from Angular material because can drag just vertical or horizontal.
The problem is for mobile touch, for touchstart and ...
1
vote
3
answers
1k
views
Angular Window Resize performance
I'm creating an Angular responsive app where I have more than 10 breakpoints in which I have to group the elements in different containers. Having this in mind I believe that I can't get advantage of ...
- 66
0
votes
1
answer
176
views
Error. No provider for _SlickCarouselComponent found in NodeInjector. Angular 17
I have Angular: 17.2.0 application. I want use ngx-slick-carousel: ^17.0.0, I have already download all dependencies for this library, I follow to instruction, but I still have issue.
This error ...
- 106
0
votes
1
answer
85
views
Prevent html input accept "لا" char
I'm working on an Angular app, and I have an input that shouldn't accept any character except for English letters, numbers and some symbols.
I prevent the input from accepting arabic letters by ...
