I had the same problem. You have to add the directive into the AppModule: @NgModule({ declarations: [ AppComponent, …, YourDirective, ], imports: [ … ], providers: […], bootstrap: [AppComponent], entryComponents: [components to inject if required] })
Here’s how I’ve been unit testing my input-based directives (Lots of code omitted for clarity!) The important line you are after is: angular.element(dirElementInput).val(‘Some text’).trigger(‘input’); Here’s the full unit test: it(‘Should show a red cross when invalid’, function () { dirElement = angular.element(‘<ng-form name=”dummyForm”><my-text-entry ng-model=”name”></my-text-entry></ng-form>’); compile(dirElement)(scope); scope.$digest(); // Find the input control: var dirElementInput = dirElement.find(‘input’); … Read more
Just copying the angular docs, since they put it in the best way I can think. Understanding Components In Angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure. This makes it easier to write an app in a way that’s similar to … Read more
If you want to send data to directive then you should try like this: This is my custom directive, and I am going to share two value from component or HTML to the directive. test.directive.ts: import { Directive, ElementRef, Input, OnInit } from ‘@angular/core’; @Directive({ selector: ‘[input-box]’ }) export class TestDirectives implements OnInit { @Input() … Read more
You can use ElementRef as shown below, DEMO : https://plnkr.co/edit/XZwXEh9PZEEVJpe0BlYq?p=preview check browser’s console. import { Directive, Input, Output, ElementRef, Renderer } from ‘@angular/core’; @Directive({ selector:”[move]”, host:{ ‘(click)’:”show()” } }) export class GetEleDirective{ constructor(private el:ElementRef) { } show(){ console.log(this.el.nativeElement); console.log(‘height—‘ + this.el.nativeElement.offsetHeight); //<<<===here console.log(‘width—‘ + this.el.nativeElement.offsetWidth); //<<<===here } } Same way you can use it within … Read more
I think that you should use something like that: <div class=”profile-image” [ngStyle]=”{ ‘background-image’: ‘url(‘ + image + ‘)’}”> where image is a property of your component. See this question: How to add background-image using ngStyle (angular2)?
If myCustomDirective has an output @Output() someEvent:EventEmitter = new EventEmitter(); then you can use <div myCustomDirective (someEvent)=”callSomethingOnParent($event)”>HELLO</div>
Since some people asked for the throttleTime directive, I’ll add it below. I chose to go this route because the debounceTime waits for the last click before firing the actual click event. throttleTime will not allow the clicker to click the button again until that time is reached and instead fires the click event immediately. … Read more
As a general (see Stackblitz here: https://stackblitz.com/edit/angular-gh2rjx): HTML <select [(ngModel)]=”selectedOption”> <option *ngFor=”let o of options”> {{o.name}} </option> </select> <button (click)=”print()”>Click me</button> <p>Selected option: {{ selectedOption }}</p> <p>Button output: {{ printedOption }}</p> Typescript export class AppComponent { selectedOption: string; printedOption: string; options = [ { name: “option1”, value: 1 }, { name: “option2”, value: 2 } … Read more
EDIT 2/2/16: The 1.5 documentation now covers components: https://docs.angularjs.org/guide/component Some thoughts based on some reading (links below): Components aren’t replacements for directives. A component is a special type of directive that organizes a controller with a template. Components do not have a link function and controllers still are not where you’d handle DOM manipulation. If … Read more