I&#39;m trying to show a checkmark if an answer is the accepted answer:

    template: `&lt;div ngIf=&quot;answer.accepted&quot;&gt;&amp;#10004;&lt;/div&gt;`

But I get this error:

    EXCEPTION: No provider for TemplateRef! (NgIf -&gt;TemplateRef)

What am I doing wrong?

No provider for TemplateRef! (NgIf -&gt;TemplateRef)

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&#39;s a `Timepicker` component from the ng2-bootstrap library, though the specifics shouldn&#39;t matter. After I `detectChanges()` the subcomponent instance is still undefined.

Pseudo-code:
```typescript
@Component({
    template: `
        &lt;form&gt;
            &lt;timepicker
                #timepickerChild
                [(ngModel)]=&quot;myDate&quot;&gt;
            &lt;/timepicker&gt;
        &lt;/form&gt;
    `
})
export class ExampleComponent implements OnInit {
    @ViewChild(&#39;timepickerChild&#39;) timepickerChild: TimepickerComponent;
    public myDate = new Date();
}
    
// Spec
describe(&#39;Example Test&#39;, () =&gt; {
    let exampleComponent: ExampleComponent;
    let fixture: ComponentFixture&lt;ExampleComponent&gt;;

    beforeEach(() =&gt; {
        TestBed.configureTestingModel({
            // ... whatever needs to be configured
        });
        fixture = TestBed.createComponent(ExampleComponent);
    });

    it(&#39;should recognize a timepicker&#39;. async(() =&gt; {
        fixture.detectChanges();
        const timepickerChild: Timepicker = fixture.componentInstance.timepickerChild;
        console.log(&#39;timepickerChild&#39;, timepickerChild)
    }));
});
```
The pseudo-code works as expected until you reach the console log. The `timepickerChild` is undefined. Why is this happening?

Angular 2 unit testing - @ViewChild is undefined

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 `&lt;router-outlet&gt;` so that I can retrieve the data once in the main component and just share it with my sub components. 

Note: If I include the directive `&lt;one&gt;&lt;/one&gt;` in the *main.html* it works but this isn&#39;t my desired behavior.

**Main View:**

    &lt;h1&gt;Details&lt;/h1&gt;   
    &lt;a [router-link]=&quot;[&#39;./sub1&#39;]&quot;&gt;One&lt;/a&gt; | 
    &lt;a [router-link]=&quot;[&#39;./sub2&#39;]&quot;&gt;Two&lt;/a&gt; | 
    &lt;a [router-link]=&quot;[&#39;./sub3&#39;]&quot;&gt;Three&lt;/a&gt;   
    &lt;hr/&gt;  
    &lt;router-outlet [data]=&quot;maindata&quot;&gt;&lt;/router-outlet&gt;

**Sub View 1:**

    &lt;h2&gt;{{ data.name }}&lt;/h2&gt;
    ...

**Main View:**

    @Component({
    	selector: &#39;main-detail&#39;,
    	directives: [ROUTER_DIRECTIVES],
    	templateUrl: &#39;./main.html&#39;
    })
    @RouteConfig([
    	{ path: &#39;/&#39;, redirectTo: &#39;/one&#39; },
    	{ path: &#39;/one&#39;, as: &#39;One&#39;, component: OneComponent },
    	{ path: &#39;/two&#39;, as: &#39;Two&#39;, component: TwoComponent },
    	{ path: &#39;/three&#39;, as: &#39;Three&#39;, component: ThreeComponent }
    ])
    export class MainComponent {
    	maindata: Object = {name:&#39;jim&#39;};
    }

**Sub View 1:**
    
    @Component({
    	selector: &#39;one&#39;,
    	directives: [CORE_DIRECTIVES],
    	inputs: [&#39;data&#39;],
    	templateUrl: &#39;./one.html&#39;
    })
    export class OneComponent {
    	@Input() data;
    }


Angular2 using @Inputs with &lt;router-outlet&gt;s

I need to pass an array of values to a component using binding, e.g.

    @Component({
        selector: &#39;my-component&#39;,
        template: &#39;&lt;div data=&quot;[1, 2, &#39;test&#39;]&quot;&gt;&lt;/div&gt;
    })
    export class MyComponent {
        @Input() data: any[];
        ...
    }

However, it seems Angular treats this as `string`/`string[1]` (in the actual project the array is a route and I need to pass this route on to a component which has the `[routerLink]` directive).

How do I go about this?

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

I have a click event nested one level. When i click on the child the expected function is called but the parent&#39;s function is also called. Here is the code

    &lt;li class=&quot;task-item&quot; *ngFor=&quot;let task of tasks&quot; (click)=&quot;showTask(task.name)&quot;&gt;
	    &lt;input type=&quot;checkbox&quot; [ngModel]=&quot;task.taskStatus&quot; (ngModelChange)=&quot;changeTaskStatus($event)&quot; /&gt;
    &lt;/li&gt;

So when the checkbox changes `changeTaskStatus()` and the `showTask()` called together. I want the parent to keep quiet when checkbox changes. How do I achieve this? It was easy to handle this in Angular 1

Things I&#39;ve tried that failed

Used `$event.stopPropagation()` in the checkbox&#39;s click event that changed nothing 

    &lt;input type=&quot;checkbox&quot; [ngModel]=&quot;task.taskStatus&quot; (click)=&quot;$event.stopPropagation()&quot; (ngModelChange)=&quot;changeTaskStatus($event)&quot; /&gt;

Angular 2 prevent click on parent when clicked on child

In Angular 2 component I have `authbox.component.ts`

    import {Component} from &#39;angular2/core&#39;;
    import {COMMON_DIRECTIVES} from &#39;angular2/common&#39;;
    import {Credentials} from &#39;./credentials&#39;
    @Component({
        selector: &#39;authbox&#39;,
        template: `&lt;div&gt;
           &lt;div class=&quot;login-panel&quot; *NgIf=&quot;!IsLogged&quot;&gt;
                &lt;input type=&quot;text&quot; *NgModel=&quot;credentials.name&quot; /&gt;
                &lt;input type=&quot;password&quot; *NgModel=&quot;credentials.password&quot; /&gt;
    			&lt;button type=&quot;button&quot; (click)=&quot;signIn(credentials)&quot;&gt;→| Sign In&lt;/button&gt;
    		&lt;/div&gt;
    		&lt;div class=&quot;logged-panel&quot; *NgIf=&quot;IsLogged&quot;&gt;
    			&lt;span&gt;{nickname}&lt;/span&gt;&amp;nbsp;&amp;nbsp; &lt;button type=&quot;button&quot; (click)=&quot;signOut()&quot;&gt;|→ Sign out&lt;/button&gt;
    		&lt;/div&gt;
    	&lt;/div&gt;`,
        directives: [COMMON_DIRECTIVES]
    })
    
    
    export class AuthBoxComponent {
    
        private _isLogged: boolean;
    
        get IsLogged(): boolean {
            return this._isLogged
        }
        set IsLogged(value: boolean) {
            this._isLogged = value;
        }
    
        public credentials: Credentials;
    
    }

In browser I got errors &#171;*Can&#39;t bind to &#39;NgModel&#39; since it isn&#39;t a known native property* &#187; and &#171;*Can&#39;t bind to &#39;NgIf&#39; since it isn&#39;t a known native property*&#187;.

I&#39;m using beta 8.

Angular 2: Can&#39;t bind to x since it isn&#39;t a known native property

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:

    &lt;foo [data]=&quot;dataObj&quot;&gt;&lt;/foo&gt;

Assume that &lt;code&gt;data&lt;/code&gt; in &lt;code&gt;Foo&lt;/code&gt; component has some type &lt;code&gt;TData&lt;/code&gt;. However, by default, nothing prevents me from passing &lt;code&gt;dataObj&lt;/code&gt; that does not conform to &lt;code&gt;TData&lt;/code&gt;. Is there a typescript extension for Angular templates that would verify the types in such a case?



Type checking in Angular 2 templates

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, OnInit} from &#39;@angular/core&#39;
    import {BrowserModule} from &#39;@angular/platform-browser&#39;
    
    class MyData {
      xyz : MySubData;
    }
    
    class MySubData {
      name : string;
    } 
    @Component({
      selector: &#39;my-app&#39;,
      template: `
        &lt;div&gt;
          &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
           
          {{abc.xyz.name}}
        &lt;/div&gt;
      `,
    })
    export class App implements OnInit {
      abc : MyData = null;
      constructor() {
        this.name = &#39;Angular2&#39;
      }
      
      ngOnInit() {
        setTimeout(() =&gt; {
          this.abc = new MyData();
          this.abc.xyz = new MySubData();
          this.abc.xyz.name = &quot;Binita&quot;;
        }, 2000);
      }
    }
    
    @NgModule({
      imports: [ BrowserModule ],
      declarations: [ App ],
      bootstrap: [ App ]
    })
    export class AppModule {}


When I am removing the line `{{abc.xyz.name}}` from my template it is running fine.

I have use set time out in my code because I am getting my data from Promise (i.e asynchronous call).

I can understand initially as `abc` is `null`, my code is unable to find abc.xyz.name. But I don&#39;t want to put any if condition to check. Because I have several property inside a JSON and it is not possible for each property to write if condition.


Earlier in angularjs 1 if abc is null then it would automatically replace it with blank string. I want to do the same thing in angular2. Please suggest.

Below is the plunker

https://plnkr.co/edit/u1NqNF0penz7OS55QmoU?p=preview


angular2: Error: TypeError: Cannot read property &#39;...&#39; of undefined

I feel like I am missing something. When I try to use a `data` `attribute` in my `template`, like this:

    &lt;ol class=&quot;viewer-nav&quot;&gt;
        &lt;li *ngFor=&quot;#section of sections&quot; data-sectionvalue=&quot;{{ section.value }}&quot;&gt;
            {{ section.text }}
        &lt;/li&gt;
    &lt;/ol&gt;

`Angular 2` crashes with:

&gt; EXCEPTION: Template parse errors: Can&#39;t bind to &#39;sectionvalue&#39; since
&gt; it isn&#39;t a known native property (&quot;
&gt; 
&gt; 
&gt; &lt;ol class=&quot;viewer-nav&quot;&gt;&lt;li *ngFor=&quot;#section of sections&quot; [ERROR
&gt; -&gt;]data-sectionvalue=&quot;{{ section.value }}&quot;&gt;{{ section.text }}&lt;/li&gt;&lt;/ol&gt;

I&#39;m obviously missing something with the syntax, please help.



How can I write data attributes using Angular?

I dont&#39;t know how to add to my component `&lt;component&gt;&lt;/component&gt;` a dynamic **class** attribute but inside the template html (component.html). 

The only solution I found is to modify the item via &quot;ElementRef&quot; native element. That solution seems a little complicated to do something that should be very simple.

Another problem is that CSS has to be defined outside component scope, breaking component encapsulation.

Is there a simpler solution? Something like `&lt;root [class]=&quot;...&quot;&gt; .... &lt;/ root&gt;` inside the template. 

How to add &quot;class&quot; to host element?

I am writing an Angular application and I have an HTML response I want to display. 

How do I do that? If I simply use the binding syntax `{{myVal}}` it encodes all HTML characters (of course).

I need somehow to bind the `innerHTML` of a `div` to the variable value.



Angular HTML binding

I&#39;m using Angular2 `2.1.0`. When I want to display a list of companies, I got this error.

in `file.component.ts` : 
&lt;!-- language: typescript --&gt;
    public companies: any[] = [
        { &quot;id&quot;: 0, &quot;name&quot;: &quot;Available&quot; },
        { &quot;id&quot;: 1, &quot;name&quot;: &quot;Ready&quot; },
        { &quot;id&quot;: 2, &quot;name&quot;: &quot;Started&quot; }
    ];

In `file.component.html` : 

&lt;!-- language: html --&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor=&quot;let item of companies; let i =index&quot;&gt;
         &lt;td&gt;{{i}}&lt;/td&gt;
         &lt;td&gt;{{item.name}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;

Can&#39;t bind to &#39;ngForOf&#39; since it isn&#39;t a known property of &#39;tr&#39; (final release)

&lt;!-- language-all: lang-ts --&gt;

I came across a strange assignment syntax inside an Angular 2 template.

    &lt;template let-col let-car=&quot;rowData&quot; pTemplate=&quot;body&quot;&gt;
        &lt;span [style.color]=&quot;car[col.field]&quot;&gt;{{car[col.field]}}&lt;/span&gt;
    &lt;/template&gt;

It appears that `let-col` and `let-car=&quot;rowData&quot;` create two new variables `col` and `car` that can then be bound to inside the template.

Source: https://www.primefaces.org/primeng/#/datatable/templating

What is this magical `let-*` syntax called? 

How does it work? 

What is the difference between `let-something` and `let-something=&quot;something else&quot;`?

What is let-* in Angular 2 templates?

Is there a way that I could limit the length of the string to a number characters?
for e.g: I have to limit a title length to 20 `{{ data.title }}`.

Is there any pipe or filter to limit the length?


How to truncate text in Angular2?

I&#39;m trying to implement Dynamic Forms in Angular 2. I&#39;ve added additional functionalities like Delete and Cancel to the dynamic forms.
I&#39;ve followed this documentation: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

[![enter image description here][1]][1]  


  [1]: http://i.stack.imgur.com/aXVYJ.png

I&#39;ve made some changes to the code. I&#39;m getting error here.

How do i make this error go?

You can find the full code here: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview , which is working in plunker but not in my local system.

Html code:

    &lt;div&gt;
      &lt;form [formGroup]=&quot;form&quot;&gt;
    
        &lt;div *ngFor=&quot;let question of questions&quot; class=&quot;form-row&quot;&gt;
          &lt;label [attr.for]=&quot;question.key&quot;&gt;{{question.label}}&lt;/label&gt;
    
      &lt;div [ngSwitch]=&quot;question.controlType&quot;&gt;
    
        &lt;input *ngSwitchCase=&quot;&#39;textbox&#39;&quot; [formControlName]=&quot;question.key&quot;
                [id]=&quot;question.key&quot; [type]=&quot;question.type&quot; [(ngModel)]=&quot;question.value&quot;&gt;
    
        &lt;select [id]=&quot;question.key&quot; [(ngModel)]=&quot;question.value&quot; *ngSwitchCase=&quot;&#39;dropdown&#39;&quot; [formControlName]=&quot;question.key&quot; &gt;
          &lt;option *ngFor=&quot;let opt of question.options&quot; [ngValue]=&quot;opt.key&quot; &gt;{{opt.value}}&lt;/option&gt;
        &lt;/select&gt;
        
        &lt;input *ngSwitchCase=&quot;&#39;checkbox&#39;&quot;  [(ngModel)]=&quot;question.value&quot;
                [id]=&quot;question.key&quot; [type]=&quot;question.type&quot; (change)=&quot;question.value = ck.checked&quot; #ck [ngModelOptions]=&quot;{standalone: true}&quot;&gt;
    
      &lt;/div&gt; 
      &lt;div class=&quot;errorMessage&quot; *ngIf=&quot;!form.controls[question.key].valid&quot;&gt;{{question.label}} is required&lt;/div&gt;
        &lt;/div&gt;
    
        &lt;div class=&quot;form-row&quot;&gt;
          &lt;button type=&quot;submit&quot; [disabled]=&quot;!form.valid&quot; (click)=&quot;onSubmit()&quot;&gt;Save&lt;/button&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; (click)=&quot;cancel()&quot;&gt;Cancel&lt;/button&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; (click)=&quot;clear()&quot;&gt;Clear&lt;/button&gt;
          
        &lt;/div&gt;
      &lt;/form&gt;
    
      &lt;div *ngIf=&quot;payLoad&quot; class=&quot;form-row&quot;&gt;
        &lt;strong&gt;Saved the following values&lt;/strong&gt;&lt;br&gt;{{payLoad}}
      &lt;/div&gt;
    &lt;/div&gt;

Component code:

    import { Component, Input, OnInit }  from &#39;@angular/core&#39;;
    import { FormGroup, REACTIVE_FORM_DIRECTIVES } from &#39;@angular/forms&#39;;
    import { QuestionBase }                 from &#39;./question-base&#39;;
    import { QuestionControlService }       from &#39;./question-control.service&#39;;
    import { ControlGroup }     from &#39;@angular/common&#39;;
    import {ChangeDetectorRef} from &#39;@angular/core&#39;;
    import { FormsModule }   from &#39;@angular/forms&#39;;
    
    @Component({
      selector: &#39;dynamic-form&#39;,
      templateUrl: &#39;app/dynamicform/form.component.html&#39;,
      directives: [REACTIVE_FORM_DIRECTIVES],
      providers:  [QuestionControlService]
    })
    export class DynamicFormComponent implements OnInit {
    
      @Input() questions: QuestionBase&lt;any&gt;[] = [];
      form: FormGroup;
      payLoad:any;
      payLoad2:any;
      questiont: QuestionBase&lt;any&gt;;
      questiond: QuestionBase&lt;any&gt;;
      constructor(private qcs: QuestionControlService, private cdr: ChangeDetectorRef) {  }
      ngOnInit() {
        this.form = this.qcs.toFormGroup(this.questions);
        console.log(&quot;Form Init&quot;,this.questions);
        this.questiont = JSON.parse(JSON.stringify(this.questions));
        this.questiond = JSON.parse(JSON.stringify(this.questions));
      }
      onSubmit() {
        this.payLoad = JSON.stringify(this.form.value);
        this.payLoad2=this.payLoad;
        this.questiont = JSON.parse(JSON.stringify(this.questions));
        console.log(&quot;Submitted data&quot;,this.questions);
      }
      cancel(){
        console.log(&quot;Canceled&quot;);
        this.questions = JSON.parse(JSON.stringify(this.questiont));
      }
      clear(){
        this.questions = JSON.parse(JSON.stringify(this.questiond));
        this.questiont = JSON.parse(JSON.stringify(this.questiond));
        console.log(&quot;Cleared&quot;);
        this.cdr.detectChanges();
      }
    }



Angular 2: Can&#39;t bind to &#39;ngModel&#39; since it isn&#39;t a known property of &#39;input&#39;

`ng-container` is mentioned in the [official documentation][1] but I&#39;m still trying to understand how it works and what are use cases.

It is particularly mentioned in [`ngPlural`][2] and [`ngSwitch`][3] directives.

Does `&lt;ng-container&gt;` do the same thing as `&lt;template&gt;` or does it depend on whether a directive was written to use one of them?

Are

&lt;!-- language: lang-html --&gt;

    &lt;ng-container *ngPluralCase=&quot;&#39;=0&#39;&quot;&gt;there is nothing&lt;/ng-container&gt;

and

&lt;!-- language: lang-html --&gt;

    &lt;template [ngPluralCase]=&quot;&#39;=0&#39;&quot;&gt;there is nothing&lt;/template&gt;

supposed to be the same?

How do we choose one of them?

How can `&lt;ng-container&gt;` be used in a custom directive?

  [1]: https://angular.io/guide/structural-directives#ng-container
  [2]: https://angular.io/api/common/NgPlural
  [3]: https://angular.io/api/common/NgSwitch


&lt;ng-container&gt; vs &lt;template&gt;

Can we use enums in an angular2 view template?

```html
&lt;div class=&quot;Dropdown&quot; dropdownType=&quot;instrument&quot;&gt;&lt;/div&gt;
```

passes the string as input:

```typescript
enum DropdownType {
    instrument,
    account,
    currency
}

@Component({
    selector: &#39;[.Dropdown]&#39;,
})
export class Dropdown {

    @Input() public set dropdownType(value: any) {

        console.log(value);
    };
}
```

But how to pass an enum configuration? I want something like this in the template:

```html
&lt;div class=&quot;Dropdown&quot; dropdownType=&quot;DropdownType.instrument&quot;&gt;&lt;/div&gt;
```

What would be the best practice?


Edited:
Created an example:

```typescript
import {bootstrap} from &#39;angular2/platform/browser&#39;;
import {Component, View, Input} from &#39;angular2/core&#39;;

export enum DropdownType {

    instrument = 0,
    account = 1,
    currency = 2
}

@Component({selector: &#39;[.Dropdown]&#39;,})
@View({template: &#39;&#39;})
export class Dropdown {

    public dropdownTypes = DropdownType;

    @Input() public set dropdownType(value: any) {console.log(`-- dropdownType: ${value}`);};
    constructor() {console.log(&#39;-- Dropdown ready --&#39;);}
}

@Component({ selector: &#39;header&#39; })
@View({ template: &#39;&lt;div class=&quot;Dropdown&quot; dropdownType=&quot;dropdownTypes.instrument&quot;&gt; &lt;/div&gt;&#39;, directives: [Dropdown] })
class Header {}

@Component({ selector: &#39;my-app&#39; })
@View({ template: &#39;&lt;header&gt;&lt;/header&gt;&#39;, directives: [Header] })
class Tester {}

bootstrap(Tester);
```


Pass enums in angular2 view templates

If a variable is declared `private` on a component class, should I be able to access it in the template of that component?


    @Component({
      selector: &#39;my-app&#39;,
      template: `
        &lt;div&gt;
          &lt;h2&gt;{{title}}&lt;/h2&gt;
          &lt;h2&gt;Hello {{userName}}&lt;/h2&gt; // I am getting this name
        &lt;/div&gt;
      `,
    })
    export class App {
      public title = &#39;Angular 2&#39;;
      private userName = &quot;Test Name&quot;; //declared as private
    }


Angular2 - should private variables be accessible in the template?

In my Angular 2 component I have an Observable array

&lt;!-- language: lang-ts --&gt;

    list$: Observable&lt;any[]&gt;;

In my Template I have

&lt;!-- language: lang-html --&gt;

    &lt;div *ngIf=&quot;list$.length==0&quot;&gt;No records found.&lt;/div&gt;
    
    &lt;div *ngIf=&quot;list$.length&gt;0&quot;&gt;
        &lt;ul&gt;
            &lt;li *ngFor=&quot;let item of list$ | async&quot;&gt;item.name&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

But list$.length doesn&#39;t work with in case of Observable array.


**Update:**

It seems that **(list$ | async)?.length** gives us the length but the below code still doesn&#39;t work:

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;
        Length: {{(list$ | async)?.length}}
        &lt;div *ngIf=&quot;(list$ | async)?.length&gt;0&quot;&gt;
            &lt;ul&gt;
                &lt;li *ngFor=&quot;let item of (list$ | async)&quot;&gt;
                    {{item.firstName}}
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;

 Can anyone please guide how do I check length of Observable array.


How to check the length of an Observable array

We&#39;re currently working on a new project with regular updates that&#39;s being used daily by one of our clients. This project is being developed using angular 2 and we&#39;re facing cache issues, that is our clients are not seeing the latest changes on their machines.

Mainly the html/css files for the js files seem to get updated properly without giving much trouble.

Access template reference variables from component class

In this scenario, I&#39;m displaying a list of students (array) to the view with `ngFor`:

    &lt;li *ngFor=&quot;#student of students&quot;&gt;{{student.name}}&lt;/li&gt;

It&#39;s wonderful that it updates whenever I add other student to the list. 

However, when I give it a `pipe` to `filter` by the student name, 

    &lt;li *ngFor=&quot;#student of students | sortByName:queryElem.value &quot;&gt;{{student.name}}&lt;/li&gt;

It does not update the list until I type something in the filtering student name field.

Here&#39;s a link to [plnkr][1].

**Hello_world.html**

    &lt;h1&gt;Students:&lt;/h1&gt;
    &lt;label for=&quot;newStudentName&quot;&gt;&lt;/label&gt;
    &lt;input type=&quot;text&quot; name=&quot;newStudentName&quot; placeholder=&quot;newStudentName&quot; #newStudentElem&gt;
    &lt;button (click)=&quot;addNewStudent(newStudentElem.value)&quot;&gt;Add New Student&lt;/button&gt;
    &lt;br&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;Search&quot; #queryElem (keyup)=&quot;0&quot;&gt;
    &lt;ul&gt;
        &lt;li *ngFor=&quot;#student of students | sortByName:queryElem.value &quot;&gt;{{student.name}}&lt;/li&gt;
    &lt;/ul&gt;

---

**sort_by_name_pipe.ts**

    import {Pipe} from &#39;angular2/core&#39;;
    
    @Pipe({
        name: &#39;sortByName&#39;
    })
    export class SortByNamePipe {
    
        transform(value, [queryString]) {
            // console.log(value, queryString);
            return value.filter((student) =&gt; new RegExp(queryString).test(student.name))
            // return value;
        }
    }


----

  [1]: http://plnkr.co/edit/j1VUdgJxYr6yx8WgzCId?p=preview

NgFor doesn&#39;t update data with Pipe in Angular2

I know that in **angular2** I can disable a button with the 
**`[disable]`** attribute, for example: 
 

    &lt;button [disabled]=&quot;!isValid&quot; (click)=&quot;onConfirm()&quot;&gt;Confirm&lt;/button&gt;

but can I do it using **`[ngClass]`** or **`[ngStyle]`** ? Like so:

    &lt;button [ngStyle]=&quot;{disabled : !isValid}&quot; (click)=&quot;onConfirm()&quot;&gt;Confirm&lt;/button&gt;


Thanks.

Angular2 disable button

I&#39;m using Angular2 and TypeScript and I have an enum: 

```typescript
export enum Role {
    ServiceAdmin, CompanyAdmin, Foreman, AgentForeman, 
    CrewMember, AgentCrewMember, Customer
}
```

I want to use *ngFor to iterate over the enum. What is the best way to do this? Must I create a Pipe? Or is there a simpler way?

How can I use ngFor to iterate over Typescript Enum as an array of strings

I&#39;m not able to translate this code from Angualr 1 to Angular 2:

&lt;!-- language-all: lang-html --&gt;

    ng-repeat=&quot;todo in todos | orderBy: &#39;completed&#39;&quot;

This is what i&#39;ve done following the Thierry Templier&#39;s answer:

**Component  template:**

&lt;!-- language-all: lang-html --&gt;

    *ngFor=&quot;#todo of todos | sort&quot;

**Component code:**

&lt;!-- language-all: lang-js --&gt;

    @Component({
        selector: &#39;my-app&#39;,
        templateUrl: &quot;./app/todo-list.component.html&quot;,
        providers: [TodoService],
        pipes: [ TodosSortPipe ]

    })

**Pipe code:**

&lt;!-- language-all: lang-js --&gt;

    import { Pipe } from &quot;angular2/core&quot;;
    import {Todo} from &#39;./todo&#39;;

    @Pipe({
      name: &quot;sort&quot;
    })
    export class TodosSortPipe {
      transform(array: Array&lt;Todo&gt;, args: string): Array&lt;Todo&gt; {
        array.sort((a: any, b: any) =&gt; {
          if (a &lt; b) {
            return -1;
          } else if (a &gt; b) {
            return 1;
          } else {
            return 0;
          }
        });
        return array;
      }
    }

I&#39;m trying to sort an array of `Todo`s, ordered by the property `completed`. First `todo.completed = false` and then the `todo.complete = true`.

I don&#39;t understand very well the `transform` method and how to pass the arguments in that method and in the `sort` method.

What is the `args: string` argument? What are `a` and `b` and where they come from?

OrderBy pipe issue

Refered to https://angular.io/docs/ts/latest/guide/displaying-data.html and stack https://stackoverflow.com/questions/37111005/how-to-check-empty-object-in-angular-2-template-using-ngif still getting syntax error self context undefined. If I remove *ngIf condition then I am getting values in teamMembers if I push some value into it so I can access values in teamMembers.

my `teamMember` object is `[ ] array` i am trying to check condition array is empty by size.

Tries : 

    &lt;div class=&quot;row&quot; *ngIf=&quot;(teamMembers | json) != &#39;{}&#39;&quot;&gt;

and

    &lt;div class=&quot;row&quot; *ngIf=&quot;teamMembers.length &gt; 0&quot;&gt; //Check length great than
                                                     throwing syntax error
				&lt;div class=&quot;col-md-12&quot;&gt;
					&lt;h4&gt;Team Members&lt;/h4&gt;
					&lt;ul class=&quot;avatar&quot; *ngFor=&quot;let member of teamMembers&quot;&gt;
						&lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;gravatar-image [size]=&quot;80&quot; [email]=&quot;member.email&quot;&gt;&lt;/gravatar-image&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/div&gt;
			&lt;/div&gt;

Component :

    @Component({
    selector: &#39;pbi-editor&#39;,
    })
    export class AppComponent implements OnInit {
    teamMembers: User[];

Any help would be great.

Angular2 *ngIf check object array length in template

Is it possible to have multiple router-outlet in the same template?

If yes then how to configure the routes?

I am using angular2 beta.


Angular2 multiple router-outlet in the same template

I&#39;d like to pass a string value to a component in angular2, but it doesn&#39;t work with the default binding.
I&#39;m thinking of something similar to this:
&lt;!-- language-all: lang-html --&gt;

    &lt;component [inputField]=&quot;string&quot;&gt;&lt;/component&gt;

Unfortunately, only expressions are allowed on the right side of the assignment. Is there a way to do this?

How to pass a string value to a component in angular2

Given a simple `input` element I can do this:
&lt;!-- language: html --&gt;
    &lt;input [(ngModel)]=&quot;name&quot; /&gt; {{ name }}

This doesn&#39;t work for my custom elements:
&lt;!-- language: html --&gt;
    &lt;my-selfmade-combobox [(ngModel)]=&quot;name&quot; values=&quot;getValues()&quot; required&gt;&lt;/my-selfmade-combobox&gt;

How can I implement it?


How to implement ngModel on custom elements?

I&#39;m working on an **Angular2** application, and I need to display -- but `disable` an `&lt;a&gt;` *HTML* element. What is the correct way to do this?

**Updated**

Please note the `*ngFor`, this would prevent the option of using `*ngIf` and not rendering the `&lt;a&gt;` altogether.

    &lt;a *ngFor=&quot;let link of links&quot;
       href=&quot;#&quot; 
       [class.disabled]=&quot;isDisabled(link)&quot; 
       (click)=&quot;onClick(link)&quot;&gt;
       {{ link.name }}
    &lt;/a&gt;

The **TypeScript** component has a method that looks like this:

    onClick(link: LinkObj) {
        // Do something relevant with the object... 
        return false;
    }

I need to actually prevent the element from being clickable, not just appear that it is with the **CSS**. I was assuming that I needed to potentially bind to the `[disabled]` attribute at first, but this is incorrect as the anchor element doesn&#39;t have a `disabled` property.

I looked at and considered using the `pointer-events: none` but this prevents my style of `cursor: not-allowed` from working -- and this is part of the requirement.

Angular2, what is the correct way to disable an anchor element?

In my Angular 2 app when I scroll down a page and click the link at the bottom of the page, it does change the route and takes me to the next page but it doesn&#39;t scroll to the top of the page. As a result, if the first page is lengthy and 2nd page has few contents, it gives an impression that the 2nd page lacks the contents. Since the contents are visible only if a user scrolls to the top of the page.

I can scroll the window to the top of the page in ngInit of the component but, is there any better solution that can automatically handle all routes in my app?

Angular 2 Scroll to top on Route Change

I am developing a component in Angular2 (Beta 8). The component has a textbox and a dropdown. I would like to set the focus in textbox as soon as component is loaded or on change event of dropdown. How would I achieve this in angular2. Following is Html for the component. 

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;
        &lt;form role=&quot;form&quot; class=&quot;form-horizontal &quot;&gt;        
            &lt;div [ngClass]=&quot;{showElement:IsEditMode, hidden:!IsEditMode}&quot;&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                    &lt;label class=&quot;control-label col-md-1 col-sm-1&quot; for=&quot;name&quot;&gt;Name&lt;/label&gt;
                    &lt;div class=&quot;col-md-7 col-sm-7&quot;&gt;
                        &lt;input id=&quot;name&quot; type=&quot;text&quot; [(ngModel)]=&quot;person.Name&quot; class=&quot;form-control&quot; /&gt;

                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-2 col-sm-2&quot;&gt;
                        &lt;input type=&quot;button&quot; value=&quot;Add&quot; (click)=&quot;AddPerson()&quot; class=&quot;btn btn-primary&quot; /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div [ngClass]=&quot;{showElement:!IsEditMode, hidden:IsEditMode}&quot;&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                    &lt;label class=&quot;control-label col-md-1 col-sm-1&quot; for=&quot;name&quot;&gt;Person&lt;/label&gt;
                    &lt;div class=&quot;col-md-7 col-sm-7&quot;&gt;
                        &lt;select [(ngModel)]=&quot;SelectedPerson.Id&quot;  (change)=&quot;PersonSelected($event.target.value)&quot; class=&quot;form-control&quot;&gt;
                            &lt;option *ngFor=&quot;#item of PeopleList&quot; value=&quot;{{item.Id}}&quot;&gt;{{item.Name}}&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;        
        &lt;/form&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

   

Angular2 - Focusing a textbox on component load

I have my custom component:

    @Component({
        selector: &#39;my-custom-component&#39;,
        templateUrl: &#39;./my-custom-component.html&#39;,
        styleUrls: [&#39;./my-custom-component.css&#39;]
    })
    export class MyCustomComponent {
        constructor() {
            console.log(&#39;myCustomComponent&#39;);
        }
    }

I can use it like this:

    &lt;my-custom-component&gt;&lt;/my-custom-component&gt;

But how I can pass a variable? For example:

    &lt;my-custom-component custom-title=&quot;My Title&quot;&gt;&lt;/my-custom-component&gt;
And use this in my component code?

Pass variable to custom component

Using Angular 2, I want to duplicate a line in a template multiple times. Iterating over an object is easy, `*ngFor=&quot;let object of objects&quot;`. However, I want to run a simple `for` loop, not a `foreach` loop. Something like (pseudo-code):

    {for i = 0; i &lt; 5; i++}
      &lt;li&gt;Something&lt;/li&gt;
    {endfor}

How would I do this?

Angular 2: How to write a for loop, not a foreach loop

I have read [NgStyle Documentation For Angular 2][1], and it is a little bit confusing for me. How do I use NgStyle with condition like (if...else) to set background image of any element? 

  [1]: https://angular.io/api/common/NgStyle


Combine [NgStyle] With Condition (if..else)

I am beginning to learn Angular2. I&#39;ve been following the Heroes Tutorial provided at angular.io.
All was working fine until, being annoyed by the clutter of HTML using the template,  I used template URL in its place, and moved the HTML to a file named hero.html.
The error that is generated is, &quot;Cannot read property &#39;name&#39; of undefined&quot;.
Strangely, the heroes variable which points to an array of objects can be accessed so that ngFor will produce the correct amount of &quot;li&quot; tags according to the number of objects in the array. However, the data of the objects of the array cannot be accessed.
Furthermore, even a simple variable holding some text, will not display using {{}} brackets in the HTML (see provided code).

app.component.ts

    import { Component } from &#39;@angular/core&#39;;
    @Component({
      selector: &#39;my-app&#39;,
      templateUrl: &#39;./hero.html&#39;,
      styleUrls:[&#39;./styles.css&#39;]
    })

    export class AppComponent {
      title = &#39;Tour of Heroes&#39;;
      heroes = HEROES;
      selectedHero:Hero;

      onSelect(hero: Hero):void{
          this.selectedHero = hero;
      }
    }

    export class Hero{
       id: number;
       name: string;
    }

    const HEROES: Hero[] = [
       { id: 1, name: &#39;Mr. Nice&#39; },
       { id: 2, name: &#39;Narco&#39; },
       { id: 3, name: &#39;Bombasto&#39; },
       { id: 4, name: &#39;Celeritas&#39; },
       { id: 5, name: &#39;Magneta&#39; },
       { id: 6, name: &#39;RubberMan&#39; },
       { id: 7, name: &#39;Dynama&#39; },
       { id: 8, name: &#39;Dr IQ&#39; },
       { id: 9, name: &#39;Magma&#39; },
       { id: 10, name: &#39;Tornado&#39; }
    ];

hero.html

    &lt;h1&gt;{{title}}&lt;/h1&gt;
    &lt;h2&gt;My Heroes&lt;/h2&gt;
    &lt;ul class=&quot;heroes&quot;&gt;
      &lt;li *ngFor=&quot;let hero of heroes&quot;&gt;
        &lt;span class=&quot;badge&quot;&gt;{{hero.id}}&lt;/span&gt; {{hero.name}}
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;h2&gt;{{hero.name}} details!&lt;/h2&gt;
    &lt;div&gt;
        &lt;label&gt;id: &lt;/label&gt;{{hero.id}}
    &lt;/div&gt;
    &lt;div&gt;
        &lt;label&gt;name: &lt;/label&gt;
        &lt;input [(ngModel)]=&quot;selectedHero.name&quot; placeholder=&quot;name&quot;&gt;
    &lt;div&gt;

Here is a photo:

[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/1SZfP.png

Angular2: Cannot read property &#39;name&#39; of undefined

I have a condition in the template as follows:


    &lt;ng-container&gt;
        &lt;p *ngFor=&quot;let seat of InfoDetails?.seatInfo&quot;&gt;
            &lt;template *ngIf=&quot;seat.section&quot;&gt;
                Section {{seat?.section}} ,
            &lt;/template&gt;
            &lt;template *ngIf=&quot;seat.row&quot;&gt;
                Row {{seat?.row}},
            &lt;/template&gt;
            &lt;template *ngIf=&quot;seat.seatNo&quot;&gt;
                Seat number {{seat?.seatNo}}
            &lt;/template&gt;
        &lt;/p&gt;
    &lt;/ng-container&gt;

I have dataset that contains `row` and `seatNo`, but it does not seem to print in the template. what is the issue here?

why *ngIf doesnt&#39;work with ng-template?

I want to create a list of items in my template, separated by commas, but I don&#39;t want the last item to have a comma:
 
    one, two, three

How do I accomplish this with Angular 2&#39;s template syntax?

Using comma as a list separator in Angular 2

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 &#39;ng generate component &lt;component-name&gt;&#39; command. Then I specified routing in the **app-routing.module.ts** as following.

&lt;pre&gt;import { NgModule } from &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;
import { HomeComponent } from &#39;./home/home.component&#39;;
import { AboutComponent } from &#39;./about/about.component&#39;;
import { UserComponent } from &#39;./user/user.component&#39;;
import { ErrorComponent } from &#39;./error/error.component&#39;;
import { SpecialpageComponent } from &#39;./specialpage/specialpage.component&#39;;

const routes: Routes = [
  {
    path: &#39;&#39;,
    component: HomeComponent
  },
  {
    path: &#39;about&#39;,
    component: AboutComponent
  },
    {
    path: &#39;user&#39;,
    component: UserComponent
  },
  {
    path: &#39;specialpage&#39;,
    component: SpecialpageComponent
  },
  {
    path: &#39;**&#39;,
    component: ErrorComponent
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }
&lt;/pre&gt;

**app.module.ts** is as following.

&lt;pre&gt;
import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;
import { FormsModule } from &#39;@angular/forms&#39;;
import { HttpModule } from &#39;@angular/http&#39;;
import { AppRoutingModule } from &#39;./app-routing.module&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { HomeComponent } from &#39;./home/home.component&#39;;
import { AboutComponent } from &#39;./about/about.component&#39;;
import { ErrorComponent } from &#39;./error/error.component&#39;;
import { UserComponent } from &#39;./user/user.component&#39;;
import { SpecialpageComponent } from &#39;./specialpage/specialpage.component&#39;;

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ErrorComponent,
    UserComponent,
    SpecialpageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
&lt;/pre&gt;

I have not added any modifications for the other components. 
Then I deployed the application using &#39;ng serve&#39; command and the app works fine with the links. 
Eg: http://localhost:4200/about 

[![enter image description here][1]][1]

But when I deploy the project in http-server, the links do not work as expected. I deployed the app using &#39;http-server ./dist&#39;  command and the app gets deployed fine, but the links do not work. When I go to &#39;http://localhost:4200/about&#39;, it gives 404 error. 

[![enter image description here][2]][2]

Am I doing anything wrong? Why &#39;ng-serve&#39; works and &#39;http-server&#39; does not work?

Any help would be appreciated. Thanks in advance. 

I have uploaded my project to [github][3].


  [1]: https://i.stack.imgur.com/HaRAb.jpg
  [2]: https://i.stack.imgur.com/FWOme.jpg
  [3]: https://github.com/kinathru/multiple-page-app

Angular 2 Routing Does Not Work When Deployed to Http Server

I would like to display different template in my component. Only one will show.
If `hasURL` is `true`, I want to show the `&lt;a&gt;&lt;/a&gt;`.
If `hasURL` is `false`, I want to show the `&lt;button&gt;&lt;/button&gt;`.

The problem if hasURL is false, the component show button, but the ng-content is empty. Because it&#39;s already read in the first &quot;`a&gt;&lt;/a&gt;`

Is there a way to solve that please?

            &lt;a class=&quot;bouton&quot; href=&quot;{{ href }}&quot; *ngIf=&quot;hasURL&quot;&gt;
                &lt;ng-content&gt;
                &lt;/ng-content&gt;
            &lt;/a&gt;

            &lt;button class=&quot;bouton&quot; *ngIf=&quot;!hasURL&quot;&gt;
                &lt;ng-content&gt;
                &lt;/ng-content&gt;    
            &lt;/button&gt;



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

How to add class to a div when hovered on the div.

Template - 

    &lt;div class=&quot;red&quot;&gt;On hover add class &quot;.yellow&quot;&lt;/div&gt;

Component - 

    import {Component} from &#39;angular2/core&#39;;
    
    @Component({
      selector: &#39;hello-world&#39;,
      templateUrl: &#39;src/hello_world.html&#39;,
      styles: [`
        .red {
          background: red;
        }
        
        .yellow {
          background: yellow;
        }
      
      `]
    })
    export class HelloWorld {
    }

[Demo][1]


  [1]: https://plnkr.co/edit/J6o3aIMXlFsrb2NOzeLt?p=preview


[ NOTE - I specifically want to add a new class and not modify the existing classes ]

Sigh! It is such a normal use case and I do not see any straight forward solution yet!

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

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 internally.  It doesn&#39;t appear that Angular Material supports Angular 2 yet either.

Can anyone please point me in the right direction or let me know what they are using?

This is what I built so far.  It&#39;s pretty bad and I&#39;d like to find something that looks nice.

&lt;!-- language: lang-ts --&gt;

    import {Component, EventEmitter, Input, Output} from &#39;angular2/core&#39;;
    import {Control} from &#39;angular2/common&#39;;
    import {Observable} from &#39;rxjs/Observable&#39;;
    import {SimpleKeyValue} from &#39;../models/simple-key-value&#39;
    import &#39;rxjs/add/operator/map&#39;;
    import &#39;rxjs/add/operator/debounceTime&#39;;
    import &#39;rxjs/add/operator/distinctUntilChanged&#39;;

    @Component({
    selector: &#39;general-typeahead&#39;,
    template: ` &lt;div&gt;
                &lt;div class=&quot;input-group&quot;&gt;
                &lt;input type=&quot;text&quot; [ngFormControl] = &quot;term&quot; class=&quot;form-control&quot; placeholder={{placeHolder}} &gt;
                &lt;/div&gt;
                &lt;ul&gt;
                    &lt;li class=&quot;item&quot; *ngFor=&quot;#item of matchingItems&quot; (click)=&quot;selectItem(item)&quot;&gt;
                        {{item.value}}
                    &lt;/li&gt;
                &lt;/ul&gt;              
    &lt;/div&gt;`
    })

    export class GeneralTypeahead {
  
      matchingItems: Array&lt;SimpleKeyValue&gt;;
      term = new Control();

      @Input() allItems: Array&lt;SimpleKeyValue&gt;;
      @Input() placeHolder: string;
      @Output() onSelectItem = new EventEmitter&lt;SimpleKeyValue&gt;();

      constructor() {
        this.term.valueChanges
            .distinctUntilChanged()
            .debounceTime(200)
            .subscribe((term : string) =&gt; this.matchingItems = this.allItems.filter(sl =&gt; sl.value.toLowerCase().indexOf(term.toLowerCase()) &gt; -1));
      }

      selectItem(sl: SimpleKeyValue) {
        this.onSelectItem.emit(sl);
      }
    }

Implementing autocomplete

 I have the following HTML but i get the the exception. How to fix it ?

&gt; Parser Error: Got interpolation ({{}}) where expression was expected
&gt; at column 48 in
&gt; [!(editForm.controls.field_item_exportExpression_{{i}}?.dirty &amp;&amp;
&gt; editForm.controls.field_item_exportExpression_{{i}}?.invalid)]

    &lt;div class=&quot;form-group&quot;&gt;
      &lt;label class=&quot;form-control-label&quot; for=&quot;field_exportExpression&quot;&gt;exportExpression&lt;/label&gt;
      &lt;input class=&quot;form-control&quot; type=&quot;text&quot; id=&quot;field_item_exportExpression_{{i}}&quot; name=&quot;item_exportExpression_{{i}}&quot; [(ngModel)]=&quot;datatype.items[i].exportExpression&quot; required&gt;
      &lt;div [hidden]=&quot;!(editForm.controls.field_item_exportExpression_{{i}}?.dirty &amp;&amp; editForm.controls.field_item_exportExpression_{{i}}?.invalid)&quot;&gt;
       &lt;small class=&quot;form-text text-danger&quot; [hidden]=&quot;!editForm.controls.field_item_exportExpression_{{i}}?.errors?.required&quot; dpTranslate=&quot;dataconfiguration.validation.required&quot;&gt; This field is
    							required. &lt;/small&gt;
     &lt;/div&gt;
    &lt;/div&gt;


The following is not working. Saying unwanted token `[` found.
 

    [hidden]=&quot;!editForm.controls.[&#39;item_exportExpression_&#39; + i]?.errors?.required 


The following is not complaining about `[` but complaining `Cannot read property &#39;0&#39; of undefined`

     [hidden]=&quot;!editForm.controls.item_exportExpression_[ i]?.errors?.required 



All Angular2 Template Solutions on Gang of Coders

Total of 43 Angular2 Template Solutions