angular2-directives

Conditional required validator directive in Angular 2

由 耗尽温柔 提交于 2019-12-07 12:41:29
问题 I need to make certain form fields required or not based on the value of other fields. The built-in RequiredValidator directive doesn't seem to support this, so I created my own directive: @Directive({ selector: '[myRequired][ngControl]', providers: [new Provider(NG_VALIDATORS, { useExisting: forwardRef(() => MyRequiredValidator), multi: true })] }) class MyRequiredValidator { @Input('myRequired') required: boolean; validate(control: AbstractControl): { [key: string]: any } { return this

Angular 2 declarations in specific component

由 ╄→гoц情女王★ 提交于 2019-12-07 10:24:48
问题 Last time I use Angular2 the directives are still present but now there is so called declarations in app.modules.ts. Question is, if I am going to use a directive only in specific component and not on the main, how can I do that? customers.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-customers', templateUrl: 'app/customer/customers.component.html' }) export class CustomersComponent { customers = [ { id: 1, name: 'Mix'}, { id: 2, name: 'Ian'}, { id: 3,

Using three.js in Angular2

由 久未见 提交于 2019-12-07 07:05:33
问题 I am trying to integrate a three.js scene into a angular 2 page. I am a beginner in Angular 2 and javascript, I have included the three.js file in the script tag, in index.html, i.e, and in the scene.component.ts file I have the code like this... //scene.component.ts import { Component } from 'angular2/core'; import { THREE } from 'three-js/three'; @Component({ selector: 'ps-scene', templateUrl: 'app/webgl/scene.component.html' }) export class SceneComponent{ scene = new THREE.Scene(); } ////

Angular 2 Custom validation unit testing

由 余生颓废 提交于 2019-12-07 06:42:55
问题 i'm writing custom angular(Angular 2.0.0) validation, following this guide https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#custom-validation . @Directive({ selector: '[ngModel][emailValidator]', providers: [{provide: NG_VALIDATORS, useExisting: EmailValidatorDirective, multi: true}] }) export class EmailValidatorDirective implements Validator Now i'm trying to add unit test to my custom validation directive. beforeEach(() => { fixture = TestBed.createComponent(EmailComponent

Can the ViewChildren Decorator in Angular2 work with Interfaces?

由 人走茶凉 提交于 2019-12-07 04:56:41
问题 The way I understand Angular 2, the ViewChildren decorator allows a Component to get a Query for other Components or Directives. I can get this to work in Typescript when I know the specific Type of the Component, but I would like to be able to get a QueryList when I just know the interface of the component. That way, I can iterate through the view components. For example, in the component I may have this: @ViewChildren(Box) shapes: QueryList<Box>; where Box is a concrete TypeScript class.

angular2 directive `Cannot read property 'subscribe' of undefined` with outputs metadata

由 ☆樱花仙子☆ 提交于 2019-12-07 01:26:35
问题 Regarding Angular2 directive, I wanted to use outputs instead of using @Output because I have many custom events and wanted to keep DRY. However, I am having TypeError: Cannot read property 'subscribe' of undefined , and I don't know why it's happening. http://plnkr.co/edit/SFL9fo?p=preview import { Directive } from "@angular/core"; @Directive({ selector: '[my-directive]', outputs: ['myEvent'] }) export class MyDirective { constructor() { console.log('>>>>>>>>> this.myEvent', this.myEvent); }

Angular2: Change detection timing for an auto-scroll directive

由 别说谁变了你拦得住时间么 提交于 2019-12-06 19:31:34
I've been working on a simple auto-scroll directive for chat-display: @Directive({ selector: "[autoScroll]" }) export class AutoScroll { @Input() inScrollHeight; @Input() inClientHeight; @HostBinding("scrollTop") outScrollTop; ngOnChanges(changes: {[propName: string]: SimpleChange}) { if (changes["inScrollHeight"] || changes["inClientHeight"]) { this.scroll(); } }; scroll() { this.outScrollTop = this.inScrollHeight - this.inClientHeight; }; } This directive will work when I've set enableProdMode() and when the ChangeDetectionStrategy is set to default, but when in "dev mode" I get an exception

Angular 2 Change Class On Condition

由 荒凉一梦 提交于 2019-12-06 17:45:42
问题 I have three buttons in a view and on page load I am displaying the first buttons content. Once a button is clicked the button becomes active but on page load the initial button is not set to active. In order to show the first button active I added this to the div: [ngClass]="'active'" The problem with this is now when another button is clicked the first button keeps the active class. I am evaluating the data being show based on a string. On click of each button the string changes. How can I

Detect when input value changed in directive

由 馋奶兔 提交于 2019-12-06 16:34:46
问题 I'm trying to detect when the value of an input changed in a directive. I have the following directive: import { ElementRef, Directive, Renderer} from '@angular/core'; @Directive({ selector: '[number]', host: {"(input)": 'onInputChange($event)'} }) export class Number { constructor(private element: ElementRef, private renderer: Renderer){ } onInputChange(event){ console.log('test'); } } The problem in this directive is that it detects only when there is an input and not when the value changes

Angular: how to make NgControl react to valueChanges only of the host <input>

由 你离开我真会死。 提交于 2019-12-06 15:29:28
I am using a directive on an <input> -element and get a reference to its controls like this: @ContentChild(NgControl) private readonly _inputNgControl: NgControl; But when I listen to model-changes like so: ngAfterContentInit(): void { this._inputNgControl.control.valueChanges .distinctUntilChanged() .subscribe(value => { // ... }); } it appears that this._inputNgControl.control refers not to the input that the directive is sitting on, but to ALL inputs in my parent component (which contains multiple <input> -elements with the same directive) because I get changes from all of those inputs in
订阅 angular2-directives