Stack Overflow
Stack Overflow

Questions tagged [angular2-template]

For questions referencing Angular Template Syntax including: interpolation, input(property) bindings, output(event) bindings, two-way binding, local variables, star syntax, etc. This tag is specific to angular version 2.x and above

Tag content based loosely off Victor Savkin's Angular Template Syntax article

2881 questions
68
votes
1 answer

How to use multiple ng-content in the same component in Angular 2?

I would like to display different template in my component. Only one will show. If hasURL is true, I want to show the . If hasURL is false, I want to show the . The problem if hasURL is false, the component show button, but…
Steffi
  • 6,835
  • 25
  • 78
  • 123
68
votes
3 answers

Using comma as a list separator in Angular 2

I want to create a list of items in my template, separated by commas, but I don't want the last item to have a comma: one, two, three How do I accomplish this with Angular 2's template syntax?
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
67
votes
8 answers

How can I add a class to an element on hover?

How to add class to a div when hovered on the div. Template -
On hover add class ".yellow"
Component - import { Component } from 'angular2/core'; @Component({ selector: 'hello-world', templateUrl:…
Ajey
  • 7,924
  • 12
  • 62
  • 86
67
votes
3 answers

Angular 2 prevent click on parent when clicked on child

I have a click event nested one level. When i click on the child the expected function is called but the parent's function is also called. Here is the code
  • Ashik Basheer
    • 1,531
    • 3
    • 16
    • 36
    • 66
    votes
    19 answers

    Angular 2 Routing Does Not Work When Deployed to Http Server

    I am going to develop a simple Angular 2 application. I have created a project with routing, using Angular CLI and added several components to the app using 'ng generate component ' command. Then I specified routing in the app-routing.module.ts as…
    kinath_ru
    • 4,488
    • 3
    • 21
    • 26
    62
    votes
    4 answers

    Got interpolation ({{}}) where expression was expected

    I have the following HTML but i get the the exception. How to fix it ? Parser Error: Got interpolation ({{}}) where expression was expected at column 48 in [!(editForm.controls.field_item_exportExpression_{{i}}?.dirty && …
    Saurabh Kumar
    • 16,353
    • 49
    • 133
    • 212
    61
    votes
    7 answers

    Angular 2 unit testing - @ViewChild is undefined

    I am writing an Angular 2 unit test. I have a @ViewChild subcomponent that I need to recognize after the component initializes. In this case it's a Timepicker component from the ng2-bootstrap library, though the specifics shouldn't matter. After I…
    ebakunin
    • 3,621
    • 7
    • 30
    • 49
    60
    votes
    14 answers

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

    I am stuck in a situation here. I am getting an error like this. compiler.es5.js:1694 Uncaught Error: Unexpected value 'LoginComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation. at syntaxError…
    Krishna
    • 1,332
    • 5
    • 20
    • 35
    59
    votes
    7 answers

    Implementing autocomplete

    I am having trouble finding a good autocomplete component for Angular2. Just anything that I can pass a list of key-label objects to and have a nice autocomplete on an input field. Kendo does not support Angular 2 yet and that it what we mostly use…
    Mort
    • 837
    • 1
    • 14
    • 20
    56
    votes
    4 answers

    Angular2 using @Inputs with s

    I have a sub-navigation in my page that displays some subviews below a common main view. I would like to pass an object to the subviews through the so that I can retrieve the data once in the main component and just share it with my…
    JRulle
    • 7,448
    • 6
    • 39
    • 61
    54
    votes
    3 answers

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

    I need to pass an array of values to a component using binding, e.g. @Component({ selector: 'my-component', template: '
    }) export class MyComponent { @Input() data: any[]; ... } However, it seems…
    Thorsten Westheider
    • 10,572
    • 14
    • 55
    • 97
    52
    votes
    3 answers

    angular2: Error: TypeError: Cannot read property '...' of undefined

    I have attached the plunker of my angular2 code piece. I want to print a field from my JSON but unable to print that as initially my Object is null and it is being populated via a Promise. This is my component file import {Component, NgModule,…
    Partha Sarathi Ghosh
    • 10,936
    • 20
    • 59
    • 84
    52
    votes
    5 answers

    How to detect scroll to bottom of html element

    I have this element that I'm referencing by Id: let infiniteScrollElement = document.getElementById('th-infinite-scroll-tracker'); I need to listen when the browser is has reached the bottom of the element. How to achieve this?
    CommonSenseCode
    • 23,522
    • 33
    • 131
    • 186
    52
    votes
    2 answers

    Angular 2: Can't bind to x since it isn't a known native property

    In Angular 2 component I have authbox.component.ts import {Component} from 'angular2/core'; import {COMMON_DIRECTIVES} from 'angular2/common'; import {Credentials} from './credentials' @Component({ selector: 'authbox', template: `
    …
    Arman Hayots
    • 2,459
    • 6
    • 29
    • 53
    51
    votes
    7 answers

    Type checking in Angular 2 templates

    We are building an application in Angular 2 and TypeScript. We try to statically check types where it is possible. Is there any way to check types in templates? Consider the following fragment: Assume that data in Foo…
    jfu
    • 1,700
    • 1
    • 22
    • 31
    1 2
    3
    …
    99 100