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”); } }
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
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
update >=RC.5 You have to import a module in whatever module you want to use components, directives or pipes of the imported module. There is no way around it. What you can do is to create a module that exports several other modules (for instance, the BrowserModule that exports CommonModule. @NgModule({ declarations: [CoolComponent, CoolDirective, CoolPipe], … Read more
When you use [] to bind to an @Input(), it’s basically a template expression. The same way displaying {{abc}} wouldn’t display anything (unless you actually had a variable called abc). If you have a string @Input(), and you want to bind it to a constant string, you could bind it like this: [myText]=” ‘some text’ … Read more
If you just need to add an attribute in order to trigger CSS rules, you can use the below method: (this does not dynamically create/destroy a directive) <button [attr.md-raised-button]=”condition ? ” : null”></button> Applied the same to your plunker: fork Update: How condition ? ” : null works as the value: When its the empty … Read more
This is special Angular binding syntax <div [class.extra-sparkle]=”isDelightful”> This is part of the Angular compiler and you can’t build a custom binding variant following this binding style. The only supported are [class.xxx]=”…”, [style.xxx]=”…”, and [attr.xxx]=”…” ngClass is a normal Angular directive like you can build it yourself <div [ngClass]=”{‘extra-sparkle’: isDelightful}”> ngClass is more powerful. It … Read more
Angular 6.1 and later: Angular 6.1 (released on 2018-07-25) added built-in support to handle this issue, through a feature called “Router Scroll Position Restoration”. As described in the official Angular blog, you just need to enable this in the router configuration like this: RouterModule.forRoot(routes, {scrollPositionRestoration: ‘enabled’}) Furthermore, the blog states “It is expected that this … Read more
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
I think that the object you received in your response payload isn’t an array. Perhaps the array you want to iterate is contained into an attribute. You should check the structure of the received data… You could try something like that: getusers() { this.http.get(`https://api.github.com/search/users?q=${this.input1.value}`) .map(response => response.json().items) // <—— .subscribe( data => this.users = data, … Read more