angular2-directives

问题 I want to make a nice horizontal scroll bar in one of my div's. Like this ones here: I'm using angular2 CLI project. What I've tried so far: I found this package angular2-slimscroll - the latest updated one is here: - but is not working as expected - i guess it has to do with the final angular 2.0 final release which broke the code. npm install ng2-slimscroll --save In my app.module.ts i have: import {SlimScroll} from 'ng2-slimscroll'; @NgModule({ declarations: [ AppComponent, SlimScroll //

问题 i'm trying to create custom angular 2 validator directive, which inject NgControl like this : @Directive({ selector: '[ngModel][customValidator]', providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}] }) export class CustomValidatorDirective implements Validator { private validateFunction: ValidatorFn; constructor(private control: NgControl) { }; } But i get the following error: Cannot instantiate cyclic dependency! NgControl Does anyone know how i can

问题 How can i flash cell in table that changed its value? <tr *ngFor="#product of products" (click)="onSelect(product)"> <td>{{product.productName}}</td> <td>{{product.price}}</td> </tr> in component i have input for products : @Input() products:Array<ProductModel>; and there is a test timer in parent component that change random product`s price every 3 seconds: var timer = Observable.timer(2000, 3000); timer.subscribe(t => this._changeRandomProduct()); private _changeRandomProduct() { var

问题 Suppose I have a component I want to test that uses a very complex component. Furthermore it calls some of its methods using references obtained by @viewChildren . For example @Component({ moduleId: module.id, selector: 'test', template: '<complex *ngFor='let v of vals'></complex>' , }) export class TestComponent{ vals = [1,2,3,4] @ViewChildren(ComplexComponent) cpxs : QueryList<ComplexComponent> // .... } How can I replace the complex-component for a test double in `TestBed'? Something like

问题 Suppose I have a component I want to test that uses a very complex component. Furthermore it calls some of its methods using references obtained by @viewChildren . For example @Component({ moduleId: module.id, selector: 'test', template: '<complex *ngFor='let v of vals'></complex>' , }) export class TestComponent{ vals = [1,2,3,4] @ViewChildren(ComplexComponent) cpxs : QueryList<ComplexComponent> // .... } How can I replace the complex-component for a test double in `TestBed'? Something like

问题 I have some HTML generated by a third party (plotly), and I would love to apply a directive that we already have on one of the DOM elements it creates. The directive opens a colorPicker on click and sets colors to strings. I can reach the element with querySelector , or getElementById , but how can I transform / wrap it into angular can add a directive to? I tried: const el = document.getElementById('myEl'); const comp = new ElementRef(el) or: const comp = this.renderer.selectRootElement(el)

问题 I am creating reusable table component which will enable editing of objects fields to prepare them for sending to the API. Having an object: person: { name: "John" job: { type: "IT" title: "Software Engineer" } } I would like to pass the object nested field to a component and edit. F.e: <edit-field [field]="person.job.title"></edit-field> Which results in an input field that edits exactly the title field in original object. The problem is that person.job.title is a string, not and object or

问题 I dont know if this is a problem or normal behavior. If we have a form like this: <form #form="ngForm" > <div> <label>field1</label> <input type="text" name="field1" [(ngModel)]="mainVar" [disabled]="someVar" /> </div> <div> <label>field2</label> <input type="text" name="field2" [(ngModel)]="someVar" /> </div> </form> In the same time variables mainVar and someVar are set to empty string in the component: mainVar = ''; someVar = ''; This will result in input with name field1 being disabled,

问题 I'm confused a bit. I need to hide block if result have one of several cases. But seems it not working correctly... <div *ngIf="currentStatus !== 'open' || currentStatus !== 'reopen' "> <p padding text-center class="text-notification">{{message}}</p> </div> It's just appeared with other condition. It doesn't work neither 1 condition nor for 2. Also tried *ngIf="currentStatus !== ('open' || 'reopen') " but it's works ok only for 1 case. 回答1: Besides the redundant ) this expression will always

问题 I'm confused a bit. I need to hide block if result have one of several cases. But seems it not working correctly... <div *ngIf="currentStatus !== 'open' || currentStatus !== 'reopen' "> <p padding text-center class="text-notification">{{message}}</p> </div> It's just appeared with other condition. It doesn't work neither 1 condition nor for 2. Also tried *ngIf="currentStatus !== ('open' || 'reopen') " but it's works ok only for 1 case. 回答1: Besides the redundant ) this expression will always