angular-directive

@Component({ selector: '.donation', template: ` <figure id="donation" move> <img src="image/qrcode.png"/> <figcaption> Buy me a cup of coffee. </figcaption> </figure> ` }) export class DonationComponent{} @Directive({ selector: '[move]' }) export class MoveDirective{} Hey,I want to get element's width/height within MoveDirective and DonationComponent,I read the document several times but still can not find a way to this answer.Do somebody know this please help me,thanks a lot! You can use ElementRef as shown below, DEMO : https://plnkr.co/edit/XZwXEh9PZEEVJpe0BlYq?p=preview check browser's

I'm trying to write a directive that get the parent controller and parent form controller and pass them as a single object to my controller, this is what I have: HTML: <div ng-controller="ParentController as self" ng-form="ParentForm"> <div ng-controller="ChildController1 as self" my-parent="self.parent"> ChildController1 parent:<br/> {{self.parent}} </div> <br/> <div ng-controller="ChildController2 as self" my-parent="self.parent"> ChildController2 parent:<br/> {{self.parent}} </div> </div> JS: myApp.directive('myParent', function() { var directive = { restrict: 'A', link: link }; return

I am trying to make a simple directive. When the image is loading, the img src will be set to an @Input() string field. On load, the image will be set to the original src value (or at least how I am trying to implement it). I was using the answer here: https://stackoverflow.com/a/38837619/843443 but is isn't a directive, and thus would require a number of changes wherever I use images. My first attempt: loading-img.directive.ts: import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[tohLoadingImg]' }) export class LoadingImgDirective { imgSrc:

I may just be attempting to combine too many "new-to-me" concepts at once, but I am trying to write a custom Angular directive using a TypeScript class. At the moment, I'm not trying to do anything terribly useful, just a POC. I have a TypeScript file that looks like this: module App { 'use strict'; export class appStepper { public link:(scope:angular.IScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) => void; public template:string = '<div>0</div><button>-</button><button>+</button>'; public scope = {}; public restrict:string = 'EA'; constructor(){ } public static Factory(

I am trying to create a directive that modifies the element's innerHTML by adding links to those substrings which start with @ symbol. This is what I have tried so far, linkify.directive.ts constructor(private elementRef: ElementRef, private renderer: Renderer2) { let elementText = this.elementRef.nativeElement.innerHTML; // elementText = '@user mentioned you'; console.log(`Element Text: ${elementText}`); this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', this.stylize(elementText)); } and I'm using it like this <p linkify> Hey @user check this out! </p> While debugging I

Recently i started unit testing on my typescript code using karma-jasmine. After creating and running test case for a service and a simple directive, i created one test case for custom directive which has one controller(which is injecting one service) and is using 4 scope variable for communicating with outside world. It's a simple unit test case to check whether directive is rendering its template or not. While running this unit test case, karma throws some error 09 03 2016 19:59:27.056:INFO [framework.browserify]: bundle built 09 03 2016 19:59:27.063:INFO [karma]: Karma v0.13.21 server