angular2-directives

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 nodes being added. Long Version Angular 1 In our project we'd prefer most of our code to have no direct

There is some restrictions in name field so I am trying to validate name field using directive as below. Inside directive I am using regular expression to check valid name and then replacing valid name into textbox using valueAccessor.writeValue(newVal) Here issue is when I am trying to type middle of some word in textbox cursor jump at the end. @Directive({ selector: '[validateName]', host: { '(ngModelChange)': 'onInputChange($event, false)', '(keydown.backspace)': 'onInputChange($event.target.value, true)', '(focusout)': 'removeClass()' } }) export class NameValidator { constructor(public

I am developing an Angular application. I need to add special behavior to all links. In AngularJS would just write a directive like this: angular.module('whatever.module', []).directive('href', function() { return { restrict: 'A', link: function($scope, $element, $attrs) { // do stuff } }; }); In Angular I can write a directive like this: @Directive({ selector: '[href]', }) export class MyHrefDirective { constructor() { // whatever } } But how can I tell the application to use that directive globally? I have a ton of views with links on them. Do I have to import it and specify it in the

my app got many images with descriptions. When user navigates these text is coming first and image is loading with some delay. I would like to add a spinner here. A directive which shows spinner while loading the image and shows image like <myimgdir [src]='myimage.png'></myimgdir> How to add spinner and track the image is loaded or not and display it? In your controller, add a function to to handle the 'onLoad' event, setting the state to {loading: false} : loading: boolean = true onLoad() { this.loading = false; } In your template, render a loading gif (or whatever you want) while the state

What is the best practice to check if user has scrolled to the bottom of the page in Angular2 without jQuery? Do I have access to the window in my app component? If not should i check for scrolling to the bottom of the footer component, and how would I do that? A directive on the footer component? Has anyone accomplished this? mayur // You can use this. @HostListener("window:scroll", []) onScroll(): void { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { // you're at the bottom of the page } } For me the bottom of my chatbox wasn't at the bottom of the page, so I

This question already has an answer here: Angular 2 external inputs 4 answers can someone please advice me how to read/bind attribute value to @component class, which seems to be undefined in ngOnInit method? Here's a plunker demo: http://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw?p=preview I'd like to read value of "someattribute" attribute <my-app [someattribute]="'somevalue'"> inside the App class (src/app.ts) ngOninit method. Thanks! Thierry Templier You can notice that such parameters can't be used for root component . See this question for more details: Angular 2 input parameters on root

Given a simple input element I can do this: <input [(ngModel)]="name" /> {{ name }} This doesn't work for my custom elements: <my-selfmade-combobox [(ngModel)]="name" values="getValues()" required></my-selfmade-combobox> How can I implement it? Thierry Templier I think this link will answer your question: Angular 2 custom form input We need to implement two things to achieve that: A component that provides the logic of your form component. It doesn't need an input since that will be provided by ngModel itself A custom ControlValueAccessor that will implement the bridge between this component