angular2-directives

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 You need to set $event.returnValue if you want close event popup Inside component @HostListener('window:beforeunload', ['$event']) public beforeunloadHandler($event) { $event.returnValue = "Are you sure?"; } 来源： https:/

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.required && !control.value ? { myRequired: true } : null; } } Sample usage: <form> <p><label><input type=

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/platform-browser'; import { NgModule } from '@angular/core'; import { LocationStrategy, HashLocationStrategy

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, name: 'Aniel'}, { id: 4, name: 'Jess'}, { id: 5, name: 'Jusi'}, ]; } customer.component.ts import {

Im building basic Todo App in angular2 when I click add button to send data from parent to child using input I get No provider for string! (child->string), and no data displayed only button at the child class is shown, what does it mean here is parent component: @Component({ selector : 'parent-component', directives : [child], template : ` <h1 class= "text-center">ToDo App</h1> <div class = "form-group"> <lable>Task</lable> <input type = "text" class = "form-control" #task> <lable>Detail</lable> <input type = "text" class = "form-control" #detail > <button type = "submit" class = "btn btn

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. What I would like to have is this: @ViewChildren(IShape) shapes: QueryList<IShape>; where IShape is an

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); } } And this is app component that uses this directive You need to initialize the output: import {

I'm building a data table component that is being designed as very generic component. The idea is to define the table as this: <app-datatable [items]="currentPageResult"> <app-datatable-column attribute="id" header="ID"></app-datatable-column> <app-datatable-column attribute="name" header="First Name"></app-datatable-column> <app-datatable-column attribute="last_name" header="Last Name"></app-datatable-column> </app-datatable> In this way, we can specify the array into the datatable component, and by defining datatable-columns we can decide witch attributes should display the table. Internally