Angular custom directive not working on input pattern

Issue I’m trying to set a regex pattern with a custom Angular directive: import { Directive, ElementRef } from ‘@angular/core’; @Directive({ selector: ‘[appPasswordRegex]’, }) export class PasswordRegexDirective { constructor(private el: ElementRef) { this.el.nativeElement.pattern = ‘^(?=.*?[a-zA-Z])(?=.*?[0-9]).*$’; } } HTML: <input appPasswordRegex

Continue reading

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

TypeError: _parentScope.$watchCollection is not a function Angular – datatables

Issue Getting this error when trying to load Angular-datatables. Includes: <script src=”//code.jquery.com/jquery-3.1.1.min.js”></script> <script src=”https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js”></script> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.5.5/angular-datatables.js”></script> Error: angular.min.js:63 TypeError: _parentScope.$watchCollection is not a function at Object.render (angular-datatables.js:901) at angular-datatables.js:124 at h (angular.min.js:78) at angular.min.js:78 at Object.$eval (angular.min.js:89) at

Continue reading

Dynamic ngClass name

Issue I have a task to add several classes to an element, one of them has to be conditional. I looked in docs and found this: <some-element [ngClass]=”{‘first’: true, ‘second’: true, ‘third’: false}”>…</some-element> But the problem is that the other

Continue reading

why it is necessary to import CommonModule to other custom/child modules when it is being imported and re-exported in the root module (AppModulle)

Issue Assume I have an app that has two modules AppModule MyChildModule CommonModule is imported and re-exported by AppModule MyChildModule is imported to AppModule app.module.ts @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, CommonModule, MyChildModule ], exports:[ CommonModule ], providers:

Continue reading

I have created an angular directive for styling a table. But table loses the styles defined in the directive when pagination is clicked

Issue I have created the following custom directive in Angular: @Directive({ selector: ‘[tableTheme]’ }) export class TableThemeDirective implements OnInit, AfterViewInit { tableElement: HTMLTableElement; constructor(private el: ElementRef, private renderer: Renderer2) {} ngOnInit(): void { this.tableElement = this.el.nativeElement; this.renderer.setStyle(this.tableElement, ‘width’, ‘100%’); this.renderer.setStyle(this.tableElement,

Continue reading

testing directive with jasmine

Issue I have this directive but Im struggling with the jasmine test for it, any ideas? import { Directive, Output, EventEmitter, HostListener } from ‘@angular/core’; @Directive({ selector: ‘[ctrlKeys]’, }) export class CtrlKeysDirective { @Output() ctrlZ = new EventEmitter(); @Output() ctrlY

Continue reading

How to Subscribe to some event of component using a Directive

Issue This is my components Pagination. <pagination [boundaryLinks]="true" [(ngModel)]="currentPage" [totalItems]="100" previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" (pageChanged)="pageChanged($event)" [maxSize]="5" my-pagination="tableTwo" ></pagination> And this is my Directive @Directive ({ selector: "pagination[my-pagination]" }) export class MyPagination { constructor( private el: ElementRef){ console.log(this.el.nativeElement.getAttribute(‘my-pagination’)) } ngOnInit(){ }

Continue reading

Angular: access FormControl from Directive

Issue I would like to add validators dynamically to my FormControl via a custom Directive. @Directive({ selector: “[idNumber]”, }) export class IdNumberDirective implements OnInit { constructor(private formControl: FormControl) { } ngOnInit() { this.addValidators(this.formControl); } addValidators(formControl: FormControl) { formControl.setValidators(Validators.compose( [Validators.required, Validators.minLength(3),

Continue reading

ngIf on input value

Issue I have field which get the input of the user and according to it the below element will show what has been written <label>message</label> <input type=”text” name=”name” [(ngModel)]=”person.message”class=”form-control”> <label class=”label”>you’ve written this </label> <input type=”text” name=”name” disabled value=”{{message}}” class=”form-control”>

Continue reading

Angular 8 Directive for role based views

Issue I am looking at this example for displaying components based on the role of a user: https://blog.strongbrew.io/display-a-component-based-on-role/ My code won’t compile because of missing arguments in my constructor inside has-role.directive.spec.ts. From has-role.directive.ts it takes 3 arguments: ViewContainerRef and TemplateRef

Continue reading

UI-Bootstrap Number Input Spinner

Issue What I want: <input class="form-control" type="number" spinner ng-model="$scope.someNumber"/> <!– notice the `spinner` directive –> What I have: <input class="form-control" type="number" ng-model="$scope.someNumber"/> Are there directives for better number spinners? I’ve tried searching Google, but I’m not finding anything (spinner is

Continue reading

Angular directive listen to element style change

Issue Hi I Have this directive to add the background color to a element: import {Directive, ElementRef, AfterViewInit, Input} from ‘@angular/core’; @Directive({ selector: ‘[bg-color]’ }) export class BgColorDirective implements AfterViewInit { private el: HTMLElement; @Input(‘bg-color’) backgroundColor: string; constructor(el: ElementRef) {

Continue reading

Angular 6 numberonly directive not working

Issue I have created a directive from https://www.davebennett.tech/angular-4-input-numbers-directive/ so that I can restrict users to input only digits in phone number. In src/app/app.sharerd.module.ts file, I did the below code to import the directive: import { NumberOnlyDirective } from ‘./number.directive’; declarations:

Continue reading

Image src in Angular 2+

Issue Is there a difference between these? <img src=”{{url}}”> <img [src]=”url”> I know in AngularJS we had ng-src directive which was prefered to used to prevent loading image from {{url}} before angular takes over. Is this the same case? Solution

Continue reading

using directive to capitalize input

Issue I have an input I want to capitalize while user writes. I create a directive to do this: @Directive({ selector: ‘[uppercase]’ }) export class UppercaseDirective { constructor() { } @Output() outputUpper: EventEmitter<string> = new EventEmitter(); value: string; @HostListener(‘input’, [‘$event’])

Continue reading

Angular custom ngIf directive 'as' syntax

Issue I’m creating a custom *ngIf directive to replace content with a placeholder while it’s loading. I have everything working as I want and modeled it after the *ngIf directive (https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts) The only thing not working is the ‘as’ syntax

Continue reading

Using CSS hover property in Angular directive?

Issue Here is the directive, the default one. import { Directive, Input, Renderer2, ElementRef } from ‘@angular/core’; @Directive({ selector: ‘[newBox]’ }) export class BoxDirective { @Input() backgroundColor = ‘#fff’; constructor(private el: ElementRef, private renderer: Renderer2) {} ngOnInit(): void { this.renderer.setStyle(this.el.nativeElement,

Continue reading

css selector in angular directive

Issue Looking at the documentation for angular directives they list valid selectors. https://angular.io/api/core/Directive element-name: Select by element name .class: Select by class name. [attribute]: Select by attribute name. [attribute=value]: Select by attribute name and value. :not(sub_selector): Select only if the

Continue reading