You could check whether the user has scrolled to the bottom or not in the below way… Html file <div (scroll)=”onScroll($event)”> … … </div> typescript file onScroll(event: any) { // visible height + pixel scrolled >= total height if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight) { console.log(“End”); } }
If you want to get a reference to a component of the transcluded content, you can use: @Component({ selector: ‘upper’, template: `<ng-content></ng-content>` }) export class UpperComponent { @ContentChild(SomeComponent) content: SomeComponent; } If you wrap <ng-content> then you can access access to the transcluded content like @Component({ selector: ‘upper’, template: ` <div #contentWrapper> <ng-content></ng-content> </div>` }) … Read more
According @CrazyMac’s comment, a good way would be to create a DirectivesModule. Inside this module you can declare and import all your directives then you will be able to import this module anywhere you want. app/modules/directives/directives.module.ts import { NgModule } from ‘@angular/core’; import { HighlightDirective } from ‘./highlight.directive’; @NgModule({ imports: [], declarations: [HighlightDirective], exports: [HighlightDirective] … Read more
Original OP was asking how to use Renderer. I’ve included the @HostBinding for completeness. Using @HostBinding To add a class to an element you can use @HostBinding import { Directive, HostBinding} from ‘@angular/core’; @Directive({ selector: ‘[myDirective]’, }) export class MyDirective { @HostBinding(‘class’) elementClass=”custom-theme”; constructor() { } } Using @HostBinding with multiple classes To make multiple … Read more
You should declare it with declarations array(meta property) of @NgModule as shown below (RC5 and later), import {CoursesComponent} from ‘./courses.component’; @NgModule({ imports: [ BrowserModule], declarations: [ AppComponent,CoursesComponent], //<—-here providers: [], bootstrap: [ AppComponent ] })
That is a feature we are asking for in angular…read this: https://github.com/angular/angular/issues/8785 A quick and dirty way to do it is to use: I have a directive named myHilite (to highlight text), I also have a component named MainComponent.ts. In MainComponent.ts I added this line of code… export class MainComponent { @HostBinding(‘attr.myHilite’) myHiliteDirective = new … Read more
You don’t put a component in directives You register it in @NgModule declarations: @NgModule({ imports: [ BrowserModule ], declarations: [ App , MyChildComponent ], bootstrap: [ App ] }) and then You just put it in the Parent’s Template HTML as : <my-child></my-child> That’s it.
You can use host binding to bind to style attributes: @Directive({ selector: ‘[myHighlight]’, host: { ‘[style.background-color]’: ‘”yellow”‘, } }) or @Directive({ selector: ‘[myHighlight]’, }) class MyDirective { @HostBinding(‘style.background-color’) backgroundColor:string = ‘yellow’; }
You need to make an input property of input and then use the ngOnChanges hook to tell when the input property changes. @Directive({ selector: ‘[number]’ }) export class NumberDirective implements OnChanges { @Input() public number: any; @Input() public input: any; ngOnChanges(changes: SimpleChanges){ if(changes.input){ console.log(‘input changed’); } } } Plunkr Stackblitz
Update: This answer has led to the development of ng2-completer an Angular2 autocomplete component. This is the list of existing autocomplete components for Angular2: ng2-completer ng2-auto-complete ng2-typeahead Credit goes to @dan-cancro for coming up with the idea Keeping the original answer for those who wish to create their own directive: To display autocomplete list we … Read more