angular2-directives

Using observables in an Angular 2 template with *ngFor

梦想的初衷 提交于 2020-01-04 09:18:22
问题 I am unable to access a property of an object provided by the async pipe if I build the access chain using *ngFor. In the example below, suppose that Parking in the test line and the ?.[filter.propName] two lines beneath represent the same key on the same object. The test line will evaluate to true, but the checked property does not. Why? How do I access the propery when stamping these out with *ngFor? For example, if {{(compModel | async)?.Parking?.Garage}} === true I would expect {{

What is the analog of the 'controllerAs' directive's property in Angular 2 component?

元气小坏坏 提交于 2020-01-03 15:17:31
问题 I started to migrate one of my Angular 1 directives to the Angular 2 component. The directive I am currently on has the controllerAs: 'ctrl' property and the directive's template uses 'ctrl.' prefix when it access properties. Looking at the official ComponentMetadata doc I do not see any properties that can be used instead of this one. 回答1: There is no equivalent to controllerAs in Angular 2. For example, given this controller class and template: @Component({ selector: 'component-a', template

What is the analog of the 'controllerAs' directive's property in Angular 2 component?

為{幸葍}努か 提交于 2020-01-03 15:16:27
问题 I started to migrate one of my Angular 1 directives to the Angular 2 component. The directive I am currently on has the controllerAs: 'ctrl' property and the directive's template uses 'ctrl.' prefix when it access properties. Looking at the official ComponentMetadata doc I do not see any properties that can be used instead of this one. 回答1: There is no equivalent to controllerAs in Angular 2. For example, given this controller class and template: @Component({ selector: 'component-a', template

Angular2 Error when using angular2-img-cropper in Visual Studio Type FileReader is not assignable to type FileReader

孤街浪徒 提交于 2020-01-03 04:48:12
问题 I just tried to explore plugin angular2-img-cropper (https://github.com/cstefanache/angular2-img-cropper) and added some of the sample code from the plunker https://embed.plnkr.co/V91mKCNkBQZB5QO2MUP4/ to my app. But when I try to compile my app in Visual Studio 2015, its giving below error: Type FileReader is not assignable to type FileReader. Property onloadend is missing in type FileReader The actual error is in the below piece of code from above plunker: fileChangeListener($event) { var

Angular2: Change detection timing for an auto-scroll directive

倾然丶 夕夏残阳落幕 提交于 2020-01-02 20:30:29
问题 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

Using Angular Library in Non-Angular App

我的未来我决定 提交于 2020-01-02 08:01:39
问题 I have building a library with Angular 2.x/4.x to use in another projetcs. The problem is that : Some app's are legacy, not build in Angular, like ASP NET MVC. I have tried using the bundle '.js' of my Angular module, generated in by the build of project, but I get error's of Angular depedencies . That's possible ? If, yes. How can i do that ? 来源: https://stackoverflow.com/questions/46849587/using-angular-library-in-non-angular-app

Any angular2 image crop directive available?

和自甴很熟 提交于 2020-01-01 17:04:06
问题 Is there any angular2 image crop directive like ngImgCrop 回答1: 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 回答2: also check this for multiple uploader and

Dynamically bind model and template to at DOM node in Angular 2

喜夏-厌秋 提交于 2020-01-01 05:02:12
问题 Short version This Plunker defines a <view> component which can render an arbitrary model+template. This needs to be changed to replace the previously rendered contents rather than appending new peers. EDIT: This is working now, thanks to the response by user3636086. One problem still remains: unlike Angular 1, Angular 2 forces me to create a nested component to update a template (since templates are effectively a static property of a component's class ), so I have a bunch of unnecessary DOM

Angular 2 Focus on first invalid input after Click/Event

孤人 提交于 2019-12-31 12:18:07
问题 I have an odd requirement and was hoping for some help. I need to focus on the first found invalid input of a form after clicking a button (not submit). The form is rather large, and so the screen needs to scroll to the first invalid input. This AngularJS answer would be what I would need, but didn't know if a directive like this would be the way to go in Angular 2: Set focus on first invalid input in AngularJs form What would be the Angular 2 way to do this? Thanks for all the help! 回答1:

Angular2: replace host element with component's template

China☆狼群 提交于 2019-12-31 08:19:09
问题 I'm new to angular in general and to angular2 specifically. I'm trying to write a container component, which should have child components in it. For example, container component : @Component({ selector: 'my-list', template: ` <ul> <ng-content></ng-content> </ul> ` }) export class MyList { } Child component: import { Component } from 'angular2/core' @Component({ selector: 'my-item', template: ` <li> <ng-content></ng-content> </li> ` }) export class MyItem { } I'd like to make this structure: