angular2-template

Angular2 SVG xlink:href

by

SVG elements doen’t have properties, therefore attribute binding is required most of the time (see also Properties and Attributes in HTML). For attribute binding you need <use [attr.xlink:href]=”iconHref”> or <use attr.xlink:href=”https://stackoverflow.com/questions/35082657/{{iconHref}}”> Update Sanitization might cause issues. See also https://github.com/angular/angular/issues/9510) https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizationService-class.html Update DomSanitizationService is going to be renamed to DomSanitizer in RC.6 Update this should be … Read more

Type checking in Angular 2 templates

by

Since Angular 9 the solution is strictTemplates flag of Angular compile options, see Strict mode section of Template type checking guide. Enable the flag in tsconfig.json file: { … “compilerOptions”: { … }, “angularCompilerOptions”: { “strictTemplates”: true … } } Original answer: Unfortunately, It seems that current Angular version doesn’t check types of component inputs … Read more

angular2: Error: TypeError: Cannot read property ‘…’ of undefined

by

That’s because abc is undefined at the moment of the template rendering. You can use safe navigation operator (?) to “protect” template until HTTP call is completed: {{abc?.xyz?.name}} You can read more about safe navigation operator here. Update: Safe navigation operator can’t be used in arrays, you will have to take advantage of NgIf directive … Read more

How to detect scroll to bottom of html element

by

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”); } }

How can I pass an array as Input() from the component template?

by

You need to wrap the property with [] otherwise it is not processed by Angular at all: [data]=”[1, 2, ‘test’]” Your example seems to set data from inside the component. This is not how binding works. What you can do with your component is <my-component [data]=”[1, 2, ‘test’]”></my-component> to pass data from the outside to … Read more

Angular2 using @Inputs with s

by

If it’s simple data you can pass them through RouteParams <a [router-link]=”[‘./sub3′],{name:’jim’}”>Three</a> then in your sub view @Component({ selector: ‘one’, directives: [CORE_DIRECTIVES], templateUrl: ‘./one.html’ }) export class OneComponent { data: any; constructor(params: RouteParams){ this.data = params.get(‘data’); } } You can also setup the route to always pass params from the component by moving the RouterConfig … Read more

Angular 2 unit testing – @ViewChild is undefined

by

I think it should work. Maybe you forgot to import some module in your configuration. Here is the complete code for test: import { TestBed, ComponentFixture, async } from ‘@angular/core/testing’; import { Component, DebugElement } from ‘@angular/core’; import { FormsModule } from ‘@angular/forms’; import { ExampleComponent } from ‘./test.component’; import { TimepickerModule, TimepickerComponent } from … Read more

Please add a @Pipe/@Directive/@Component annotation. Error

by

Not a solution to the concrete example above, but there may be many reasons why you get this error message. I got it when I accidentally added a shared module to the module declarations list and not to imports. In app.module.ts: import { SharedModule } from ‘./modules/shared/shared.module’; @NgModule({ declarations: [ // Should not have been … Read more

Implementing autocomplete

by

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