You can use exportAs property of the @Directive annotation. It exports the directive to be used in the parent view. From the parent view, you can bind it to a view variable and access it from the parent class using @ViewChild(). Example With a plunker: @Directive({ selector:'[my-custom-directive]’, exportAs:’customdirective’ //the name of the variable to access … Read more
I typed in instead of of in the ngFor expression. Befor 2-beta.17, it should be: <div *ngFor=”#talk of talks”> As of beta.17, use the let syntax instead of #. See the UPDATE further down for more info. Note that the ngFor syntax “desugars” into the following: <template ngFor #talk [ngForOf]=”talks”> <div>…</div> </template> If we use … Read more
Basically there are three types of directives in Angular2 according to documentation. Component Structural directives Attribute directives Component It is also a type of directive with template,styles and logic part which is most famous type of directive among all in Angular2. In this type of directive you can use other directives whether it is custom … Read more
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
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 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”); } }
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 ] })
For one-way data binding from parent to child, use the @Input decorator (as recommended by the style guide) to specify an input property on the child component @Input() model: any; // instead of any, specify your type and use template property binding in the parent template <child [model]=”parentModel”></child> Since you are passing an object (a … 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
I made a version that uses character length rather than div size. import { Component, Input, ElementRef, OnChanges} from ‘@angular/core’; @Component({ selector: ‘read-more’, template: ` <div [innerHTML]=”currentText”> </div> <a [class.hidden]=”hideToggle” (click)=”toggleView()”>Read {{isCollapsed? ‘more’:’less’}}</a> ` }) export class ReadMoreComponent implements OnChanges { @Input() text: string; @Input() maxLength: number = 100; currentText: string; hideToggle: boolean = true; … Read more