angular2-directives

I upgraded my Angular from 4 to 6, and consequently had a problem with my click-off policy, it stopped working on all components. my directive: import { Directive, Output, EventEmitter, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[clickOutside]' }) export class ClickOutsideDirective { constructor(private _elementRef : ElementRef) { } @Output() public clickOutside = new EventEmitter(); @HostListener('document:click', ['$event.target']) public onClick(targetElement) { const clickedInside = this._elementRef.nativeElement.contains(targetElement); if (!clickedInside) {

I'm wanting to setup a string property on a component in my constructor, but when I try something like this @Component({ selector: 'wg-app', templateUrl: 'templates/html/wg-app.html' }) export class AppComponent { constructor(private state:string = 'joining'){ } } I get a DI Exception EXCEPTION: No provider for String! (AppComponent -> String) Clearly, the injector is trying to find a 'string' provider, and can't find any. What sort of pattern should I be using for this type of thing? Eg. passing initial parameters to a component. Should it be avoided? Should I be Injecting the initial string?

I'm trying to create my own directive in Angular 4. But, I got this error when bind the property of class into component template. Console error: Unhandled Promise rejection: Template parse errors: Can't bind to 'data' since it isn't a known property of 'tree'. ("<tree [ERROR ->][data]="data"></tree>"): My tree-view-component.ts: @Component({ selector: 'app-tree-view', template: '<tree [data]="data"></tree>' }) export class TreeViewComponent implements OnInit { @Input() data: any[]; constructor() { this.data = [ { label: 'a1', subs: [ { label: 'a11', subs: [ { label: 'a111', subs: [ { label:

I'm trying to understand the HTML bindings as I'm new to angular. Can someone please explain the difference between the following syntax: <!-- 1 --> <button name1 = "name2" >test</button> <!-- 2 --> <button (name1) = "name2" >test</button> <!-- 3 --> <button [name1] = "name2" >test</button> <!-- 4 --> <button ([name1]) = "name2" >test</button> I have seen above in multiple places but could not understand the purpose of each case. Thank you for the help! There are two different thinks.. bindings and events: Here's a live-demo: https://plnkr.co/edit/gfJL9RCyYriqzP9zWFSk?p=preview Binding binds

Is there any angular2 image crop directive like ngImgCrop Yes we can use ng2-img-cropper component for the same, you just have to install the package named as ng2-img-cropper from the node using npm install ng2-img-cropper --save than just use the component by importing import {ImageCropperComponent, CropperSettings, Bounds} from 'ng2-img- cropper'; Working plunker here For more info see here, https://www.npmjs.com/package/ng2-img-cropper 来源： https://stackoverflow.com/questions/38149250/any-angular2-image-crop-directive-available

I am trying to figure out a way to compile everything I need from the angular 2 node_modules folder into one file.. It seems that there is a crazy amount of http calls when my site is loading and surely thats not optimal or the recommended process of the new and improved angular.. Im not concerned with my own typescript files as i know how to handle them but what are your approaches to concatenating the node_modules files etc ? If you're using SystemJS 1. package.json : add these to devDependencies "devDependencies": { "gulp": "^3.9.1", "systemjs-builder": "^0.15.16" } 2. do npm install 3.