angular2-directives | 易学教程

Angular2 issue: There is no directive with “exportAs” set to “ngForm”

阅读更多关于 Angular2 issue: There is no directive with “exportAs” set to “ngForm”

问题 I 'am facing this frustrating issue There is no directive with "exportAs" set to "ngForm" (" ]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal"> "): ng:///ComponentsModule/EquipeComponent.html@8:12 Error: Template parse errors: There is no directive with "exportAs" set to "ngForm" (" ]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal"> "): ng:///ComponentsModule/EquipeComponent.html@8:12 This is what my app.module.ts contains import { BrowserModule } from '@angular

Angular2 passing a function to a directive via attribute

阅读更多关于 Angular2 passing a function to a directive via attribute

问题 I'm trying to bind a function in a parent component into a property on a child component. This is what I have @Component({ selector: 'awesome', templateUrl: 'awesome.html' }) export class AwesomeComponent { @Input() callback: Function; ngOnInit() { this.callback();//Error, this.callback is not a function, but contains a string value on the fuction call } } This is how i'm using it <awesome callback="nameOfFuncFromAnotherComponent"></awesome> but it doesn't seem to work 回答1: Your code only

How to use nested ngFor in angular2 [duplicate]

阅读更多关于 How to use nested ngFor in angular2 [duplicate]

问题 This question already has answers here : Nested loops in angular 2 (3 answers) Closed 2 years ago . I would display some data person = [ {name: 'Jacob', color: 'Red', date: '2015-03-15', info: [ 'info1', 'info2', 'info3', 'info4', 'info5' ]}, {name: 'Jack', color: 'Red', date: '2017-04-25'}, {name: 'Jared', color: 'Red', date: '2016-11-15'}, ]; I know how to display single data but i wonder how to dipslay exactly whole array of info. <ul *ngFor="let pers of person"> <li> {{pers.name}} {{pers

Angular 2+ Currency Mask

阅读更多关于 Angular 2+ Currency Mask

问题 I tried a couple of the currency masks out there for Angular 2+ but my requirements don't really fit them so I'm trying to create a Directive myself. Here's what I need: Allow for null values. Keep the value as a number, not a string. On Focus remove currency format. On blur re-format. Enter number from right to left (so for $250.00 the user would have to type [2] -> 5 -> 0. (so not starting from the decimal point) Don't allow users to type anything but numbers and decimal separator. Text

Angular 2 AoT Heep Errors

阅读更多关于 Angular 2 AoT Heep Errors

问题 AoT compilation resulting in " JavaScript heap out of memory" error I am trying to compile my project by following the AoT guide available on angular.io Below is my typesccript configuration file for aot { "compilerOptions": { "emitDecoratorMetadata": true, "experimentalDecorators": true, "module": "es2015", "moduleResolution": "node", "noImplicitAny": false, "suppressImplicitAnyIndexErrors": true, "noEmitOnError": true, "removeComments": true, "sourceMap": false, "target": "es5", "outDir": "

ngFor not updating when @Input updated from google map marker event

阅读更多关于 ngFor not updating when @Input updated from google map marker event

I'm trying to build a simple app with angular2, I have the below component: @Component({ selector: 'map-menu', templateUrl: './angular-app/components/map-menu.html' }) export class MapMenuComponent { @Input() selectedMarkers: Array<google.maps.Marker>; constructor() { // setInterval(() => { // console.log(this); // }, 1000); } } when my map-menu.html is: <ul class="nav nav-sidebar"> <li *ngFor="#marker of selectedMarkers #i = index"><a href="#">{{marker.data.name}}</a></li> </ul> and in my app html I have: <map-menu [selectedMarkers]="selectedMarkers"></map-menu> and the list is not being

Format input value after Angular2 ngModel is applied

阅读更多关于 Format input value after Angular2 ngModel is applied

问题 I am trying to create a directive that will format the input value to a currency format. I am able to do what I have to do on focus and on blur, and in the ngOnInit hook (and any other hook), the input element does not yet have any values applied to it. How do I "watch" for the input's value, and format it when it's initial value is applied? Here is my directive: import { Input, Directive, HostListener, ElementRef, Renderer, OnInit } from '@angular/core'; import { NgModel } from '@angular

How to change app wide css in Angular 2?

阅读更多关于 How to change app wide css in Angular 2?

问题 In my application I have different CSS file like fire.css, lake.css each giving different look to complete application. Currently, I implemented with only 1 file main.css and added this file to index.html <link rel="stylesheet" href="resources/styles/main.css"> <link rel="stylesheet" href="resources/styles/themes.css"> <link rel="stylesheet" href="resources/styles/common.css"> <link rel="stylesheet" href="resources/styles/plugins.css"> Now I wanted to change this dynamically as user select

Angular 2 RC 5 Bootstrap custom HTTP class

阅读更多关于 Angular 2 RC 5 Bootstrap custom HTTP class

问题 In Angular 2 RC 4 I have a class HttpLoading which extends the original Http of Angular2 I was able to use that in bootstrap without any issue using the below code: bootstrap(AppComponent, [ HTTP_PROVIDERS, provide(RequestOptions, { useClass: DefaultRequestOptions }), provide(Http, { useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new HttpLoading(backend, defaultOptions), deps: [XHRBackend, RequestOptions] }) ]).catch(err => console.error(err)); My DefaultRequest Options

Browser Close Event in angular4

阅读更多关于 Browser Close Event in angular4

问题 How can i detect browser close event in angular 4.0.2 I have tried @HostListener('window:unload', ['$event']) unloadHandler(event) { ... } @HostListener('window:beforeunload', ['$event']) beforeunloadHandler(event) { ... } But not properly working for me. Can anyone help me out. If i refresh page than also this event fires Need Separate browser close event in angular2/4 回答1: You need to set $event.returnValue if you want close event popup Inside component @HostListener('window:beforeunload',