I&#39;m confused a bit. I need to hide block if result have one of several cases. But seems it not working correctly...

    &lt;div *ngIf=&quot;currentStatus !== &#39;open&#39; || currentStatus !== &#39;reopen&#39; &quot;&gt;
    
        &lt;p padding text-center class=&quot;text-notification&quot;&gt;{{message}}&lt;/p&gt;
    
    &lt;/div&gt;

It&#39;s just appeared with other condition. It doesn&#39;t work neither 1 condition nor for 2. Also tried `*ngIf=&quot;currentStatus !== (&#39;open&#39; ||  &#39;reopen&#39;) &quot;` but it&#39;s works ok only for 1 case. 

angular 4: *ngIf with multiple conditions

I am trying to import component from one file another root component file.
it give error as ..

&gt; zone.js:484 Unhandled Promise rejection: Template parse errors:
&#39;courses&#39; is not a known element:
1. If &#39;courses&#39; is an Angular component, then verify that it is part of this module.
2. If &#39;courses&#39; is a Web Component then add &quot;CUSTOM_ELEMENTS_SCHEMA&quot; to the &#39;@NgModule.schema&#39; of this component to suppress this message. (&quot;&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;[ERROR -&gt;]&lt;courses&gt;&lt;/courses&gt;&quot;): AppComponent@0:31 ; Zone: &lt;root&gt; ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
&#39;courses&#39; is not a known element:

My app.component.ts be like [root component file]


&lt;!-- language: lang-js --&gt;

    import { Component } from &#39;@angular/core&#39;;
    import {CoursesComponent} from &#39;./courses.component&#39;;

    @Component({
      selector: &#39;my-app&#39;,
      template: &#39;&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;&lt;courses&gt;&lt;/courses&gt;&#39;,
      directives:[CoursesComponent],
    })

    export class AppComponent { }



and my courses.component.ts be ;


&lt;!-- language: lang-js --&gt;

    import { Component } from &#39;@angular/core&#39;;
    @Component({
      selector: &#39;courses&#39;,
      template: &#39;&lt;h1&gt;courses&lt;/h1&gt;&#39;
    })
    export class CoursesComponent { }



while importing courses component from courses.component.ts file inside app.component i am not able declare directive inside `@Component{}`

`directives:[CoursesComponent]` giving error to me

Please advise solution over it.

How to import component into another root component in Angular 2

I&#39;m new at Angular and I&#39;m still trying to understand it. I&#39;ve followed the course on the Microsoft Virtual Academy and it was great, but I found a little discrepancy between what they said and how my code behave! Specifically, I&#39;ve tried to &quot;put a component inside another component&quot; like this:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-ts --&gt;

    @Component({
        selector: &#39;parent&#39;,
        directives: [ChildComponent],
        template: `
                &lt;h1&gt;Parent Component&lt;/h1&gt;
                &lt;child&gt;&lt;/child&gt;
            `
        })
        export class ParentComponent{}
        
     
    @Component({
        selector: &#39;child&#39;,    
        template: `
                &lt;h4&gt;Child Component&lt;/h4&gt;
            `
        })
        export class ChildComponent{}
        

&lt;!-- end snippet --&gt;

This is the same example that they make on the course, but in my code doesn&#39;t work! In particular VisualStudio says to me that the &#39;directives&#39; property doesn&#39;t exist in the component decorator. How can I solve this? 

How to put a component inside another component in Angular2?

I&#39;m trying to detect when the **value** of an input changed in a directive. I have the following directive:
```js
    import { ElementRef, Directive, Renderer} from &#39;@angular/core&#39;;
    
    @Directive({
        selector: &#39;[number]&#39;,
        host: {&quot;(input)&quot;: &#39;onInputChange($event)&#39;}
    })
    
    export class Number {
    
        constructor(private element: ElementRef, private renderer: Renderer){
    
        }
        onInputChange(event){
            console.log(&#39;test&#39;);
        }
    }
```
The problem in this directive is that it detects only when there is an input and not when the value changes programatically. I use reacive form and sometimes I set the value with the `patchValue()` function. How can I do so the change function gets triggered?

Detect when input value changed in directive

In the given examples of Attribute directives (i.e. a directive to add appearance/behaviour), we have a fairly simple setting of a style on the host element.. e.g.

    import {Directive, ElementRef } from &#39;angular2/core&#39;;
    @Directive({
        selector: &#39;[myHighlight]&#39;
    })
    export class HighlightDirective {
        constructor(element) {
           element.nativeElement.style.backgroundColor = &#39;yellow&#39;;
        }
    
    static get parameters(){
        return [[ElementRef]];
    }

Rather than setting the style, can i use a styles instead? e.g.

    @Directive({
        selector: &#39;[myHighlight]&#39;,
        styles: [&#39;:host { background-color: yellow; }&#39;]
    })

This doesn&#39;t seem to work for me?

I&#39;m doing something slightly more complex which has led to a fair amount of monolothic code, setting lots of styles, using AnimationBuilder etc etc. feels to me like it would be much better to seperate this out into classes and animations in a CSS.

ViewEncapsulation = emulated/default if that matters?


Angular2 Styles in a Directive

How to dynamically add (&lt;strike&gt;inject&lt;/strike&gt;) a directive into host?

I have a myTooltip directive and I would like to add mdTooltip directive to it&#39;s host. I have tried `setAttribute()` of `ElementRef.nativeElement`, but it doesn&#39;t create the mdTooltip directive.

mytooltip.directive.ts:

    @Directive({
      selector: &#39;[my-tooltip]&#39;,
      host: {
        &#39;(mouseenter)&#39;: &#39;show()&#39;,
        &#39;(mouseleave)&#39;: &#39;hide()&#39;,
      }
    })
    export class myTooltip {
      @Input(&#39;my-tooltip&#39;) message;

      constructor() { }
    
      show() {
        /* TODO: How to add md-tooltip directive to elementref (host)? */
      }
    
      hide() {
        /* TODO: remove md-tooltip directive from elementref (host) */
      }
    }

By host I mean the element that has myTooltip directive:

    &lt;span my-tooltip=&quot;tooltip hint&quot;&gt;Click here&lt;/span&gt;

**The result** wouldn&#39;t change above html but on mouseenter it would have md-tooltip directive in span.


BTW, the reason I am using a wrapper and not directly md-tooltip is that I want to later modify the showing delay, hiding delay and customize material tooltip&#39;s behaviour in other means as well.  

**Edit** Apparently adding directives dynamically is not currently supported :( I think this question should still be here in case it material team updates that

How to dynamically add a directive?

I&#39;m trying to set the `routerLink` value in a directive based on a dynamic set of items from the component. But an error is being thrown from Angular2:

    EXCEPTION: Template parse errors:
    Parser Error: Got interpolation ({{}}) where expression was expected at column 1 in [ {{item.routerLink}} ] in AppHeader@5:40 (&quot;
        &lt;a *ngFor=&quot;let item of headerItems&quot; [ERROR -&gt;][routerLink]=&quot; {{item.routerLink}} &quot;&gt;
          {{item.text}}
        &lt;/a&gt;
    &quot;): Header@5:40

**header.component.ts**

    import {Component} from &#39;@angular/core&#39;;
    import {ROUTER_DIRECTIVES} from &#39;@angular/router-deprecated&#39;;
    
    @Component({
      selector: &#39;app-header&#39;,
      templateUrl: &#39;./app/components/header/header.component.html&#39;,
      directives: [ROUTER_DIRECTIVES]
    })
    export class AppHeader {
      headerItems: Object[] = [];
    
      constructor() {
        this.headerItems.push(
          { classes: &#39;navLink&#39;, routerLink: [&#39;/Home&#39;], text: &#39;Home&#39; }
        );
      }
    }

**header.component.html**

    &lt;div id=&quot;HeaderRegion&quot;&gt;
      &lt;nav class=&quot;nav&quot;&gt;
        &lt;a *ngFor=&quot;let item of headerItems&quot; [routerLink]=&quot; {{item.routerLink}} &quot;&gt;
          {{item.text}}
        &lt;/a&gt;
      &lt;/nav&gt;
    &lt;/div&gt;



Dynamic routerLink value from ngFor item giving error &quot;Got interpolation ({{}}) where expression was expected&quot;

I am using Material 2 to add `md-raised-button`. I want to apply this directive only if certain condition becomes true.

For example: 

    &lt;button md-raised-button=&quot;true&quot;&gt;&lt;/button&gt;

Another example:
I created a basic dynamic reactive form in plunker.
I am using `formArrayName` directive of reactive form for array of controls.
I want to apply `formArrayName` directive only if specific condition becomes true, otherwise don&#39;t add `formArrayName` directive.

Here is a [plunker link][1].


  [1]: https://plnkr.co/edit/oPZ7PyBSf8jjYa2KVh4J?p=preview

Apply a directive conditionally

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 have just started working with Angular 2. 

I was wondering what are the differences between components and directives in Angular 2?


What is the difference between component and directive?

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?

What am I doing wrong?

&lt;!-- language: lang-ts --&gt;

    import {bootstrap, Component} from &#39;angular2/angular2&#39;

    @Component({
      selector: &#39;conf-talks&#39;,
      template: `&lt;div *ngFor=&quot;let talk in talks&quot;&gt;
         {{talk.title}} by {{talk.speaker}}
         &lt;p&gt;{{talk.description}}
       &lt;/div&gt;`
    })
    class ConfTalks {
      talks = [ {title: &#39;t1&#39;, speaker: &#39;Brian&#39;, description: &#39;talk 1&#39;},
                {title: &#39;t2&#39;, speaker: &#39;Julie&#39;, description: &#39;talk 2&#39;}];
    }
    @Component({
      selector: &#39;my-app&#39;,
      directives: [ConfTalks],
      template: &#39;&lt;conf-talks&gt;&lt;/conf-talks&gt;&#39;
    })
    class App {}
    bootstrap(App, [])

The error is

    EXCEPTION: Template parse errors:
    Can&#39;t bind to &#39;ngForIn&#39; since it isn&#39;t a known native property
    (&quot;&lt;div [ERROR -&gt;]*ngFor=&quot;let talk in talks&quot;&gt;

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

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&#39;m confused a little.

See this simple directive:

   

     @Directive({
          selector: &#39;[myDirective]&#39;
        })
        export class MyDirective {
        
          private text: string;
          private enabled: boolean;
        
          @Input() myDirective:string;
        
          @Input(&#39;myText&#39;)
          set myText(val: string) {
            this.text = val;
          }
        
          @Input(&#39;myEnabled&#39;)
          set myEnabled(val: boolean) {
            this.enabled = val;
          }
        
          ngOnInit() {
         
            console.log(&quot;myDirective string: &quot; + this.myDirective);
            console.log(&quot;myText string: &quot; + this.text); 
            console.log(&quot;myEnabled boolean: &quot; + this.enabled);
        }
    }

if my html will look like this:

    &lt;div [myDirective]=&quot;myDefaultText&quot; [myEnabled]=&quot;true&quot;  [myText]=&quot;abc&quot;&gt;&lt;/div&gt;

The output will be:

    myDirective string: myDefaultText real value  // good
    myEnabled boolean: true                       // good
    myText string: undefined                      // Why?

If I REMOVE the [] from `myText`:

    &lt;div [myDirective]=&quot;myDefaultText&quot; [myEnabled]=&quot;true&quot;  myText=&quot;abc&quot;&gt;&lt;/div&gt;

The output will be:

    myDirective string: myDefaultText real value  // good
    myEnabled boolean: true                       // good
    myText string: abc                            // GOOD

I can also remove the `[]` from `myEnabled` and it will work too.
So here is my confusion - when I need to use square brackets `[]` and when not, while I want the user who is going to use `myDirective` will never need to wonder if or if not, I think the square brackets `[]` should always be there. Aren&#39;t they?

When to use square brackets [ ] in directives @Inputs and when not?

What is the difference in Angular 2 between the following snippets:

&lt;!-- language: html --&gt;
    &lt;div [class.extra-sparkle]=&quot;isDelightful&quot;&gt;
    &lt;div [ngClass]=&quot;{&#39;extra-sparkle&#39;: isDelightful}&quot;&gt;
    


Difference between [ngClass] vs [class] binding

I have a directive to initializes a jQueryUI sortable on a DOM element. The jQueryUI sortable also has a set of callback events that trigger on certain actions. For example, when you [start][1] or [stop][2] sorting elements.

I&#39;d like to pass the return parameters from such an event through the `emit()` function, so I can actually see what happend in my callback function. I just haven&#39;t found a way to pass parameters through an `EventEmiiter`.

I currently have the following.

My directive:

&lt;!-- language-all: typescript --&gt;

    @Directive({
        selector: &#39;[sortable]&#39;
    })
    export class Sortable {
        @Output() stopSort = new EventEmitter();
    
        constructor(el: ElementRef) {
          console.log(&#39;directive&#39;);
            var options = {
              stop: (event, ui) =&gt; {
                this.stopSort.emit(); // How to pass the params event and ui...?
              }
            };
    
            $(el.nativeElement).sortable(options).disableSelection();
        }
    }

And this is my `Component` that uses the event emiited by the directive:

    @Component({
      selector: &#39;my-app&#39;,
      directives: [Sortable],
      providers: [],
      template: `
        &lt;div&gt;
          &lt;h2&gt;Event from jQueryUI to Component demo&lt;/h2&gt;
          
          &lt;ul id=&quot;sortable&quot; sortable (stopSort)=&quot;stopSort(event, ui)&quot;&gt;
            &lt;li class=&quot;ui-state-default&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-arrowthick-2-n-s&quot;&gt;&lt;/span&gt;Item 1&lt;/li&gt;
            &lt;li class=&quot;ui-state-default&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-arrowthick-2-n-s&quot;&gt;&lt;/span&gt;Item 2&lt;/li&gt;
            &lt;li class=&quot;ui-state-default&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-arrowthick-2-n-s&quot;&gt;&lt;/span&gt;Item 3&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      `
    })
    export class App {
      constructor() {
        
      }
      
      stopSort(event, ui) { // How do I get the &#39;event&#39; and &#39;ui&#39; params here?
        console.log(&#39;STOP SORT!&#39;, event);
      }
    }

How can I get the `event` and `ui` params in my `stopSort()` function?

Here is a demo of what I have so far: http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info

  [1]: http://api.jqueryui.com/sortable/#event-start
  [2]: http://api.jqueryui.com/sortable/#event-stop

Pass parameters with EventEmitter

I have a component whose template looks something like this:

    &lt;div [my-custom-directive]&gt;Some content here&lt;/div&gt;

I need access to the `MyCustomDirective` class instance used here. When I want to get access to a child component, I use a `ViewChild` query.

Is there an equivalent feature to get access to a child directive?

Get reference to a directive used in a component

I have *Angular components* and first component uses the second one as a *directive*.
They should share the same model **object**, which is initialized in the first component.
How can I pass that model to the second component? 

How to pass object from one component to another in Angular 2?

I need to do a progress arc based on the calculated percentage, I have created a custom directive to access the svg attributes from the user, while updating that in my template, I am getting the following error:

&gt; Can&#39;t bind to &#39;cx&#39; since it isn&#39;t a known native property   
Can&#39;t bind to &#39;cy&#39; since it isn&#39;t a known native property      

etc.. 

I am getting these sorts of errors for all the svg attributes. 

Below is my code in jade:

    progress-arc([size]=&quot;200&quot;, [strokeWidth]=&quot;20&quot;, [stroke]=&quot;red&quot;, [complete]=&quot;0.8&quot;)

Below is my directive code:

    import {Component,Input,AfterViewInit} from &#39;@angular/core&#39;;
    
    @Component({
      selector:&#39;progress-arc&#39;,
      template:`
       &lt;svg height=&quot;100&quot; width=&quot;100&quot;&gt;
          &lt;circle fill=&quot;white&quot;
              cx=&quot;{{parsedSize/2}}&quot;
              cy=&quot;{{parsedSize/2}}&quot;
              r=&quot;{{radius}}&quot;
              stroke=&quot;{{stroke}}&quot;
              stroke-width=&quot;{{strokeWidthCapped}}&quot;
              stroke-dasharray=&quot;{{circumference}}&quot;
              stroke-dashoffset=&quot;{{(1 - parsedComplete) * circumference}}&quot;/&gt;
      &lt;/svg&gt;`,
      providers: [],
      directives: []
    })
    export class ProgressArc implements AfterViewInit {
     @Input(&#39;size&#39;) size:string;
     @Input(&#39;strokeWidth&#39;) strokeWidth:string;
     @Input(&#39;stroke&#39;) stroke:string;
      @Input(&#39;complete&#39;) complete:string;
      parsedStrokeWidth:number;
      parsedSize:number;
      parsedComplete:number;
      strokeWidthCapped:number;
      radius:number;
      circumference:number;
    
      ngAfterViewInit() {
        this.parsedSize = parseFloat(this.size);
        this.parsedStrokeWidth = parseFloat(this.strokeWidth);
        this.parsedComplete = parseFloat(this.complete);
        this.strokeWidthCapped = Math.min(this.parsedStrokeWidth, this.parsedSize / 2 - 1);
        this.radius = Math.max((this.parsedSize - this.strokeWidthCapped) / 2 - 1, 0);
        this.circumference = 2 * Math.PI * this.radius;
      }
    }


Can someone tell me where I am going wrong?



svg circle - Can&#39;t bind to cx since it isn&#39;t a known native property

What am I doing wrong?

    import {bootstrap, Component} from &#39;angular2/angular2&#39;

    @Component({
      selector: &#39;conf-talks&#39;,
      template: `&lt;div *ngFor=&quot;talk of talks&quot;&gt;
         {{talk.title}} by {{talk.speaker}}
         &lt;p&gt;{{talk.description}}
       &lt;/div&gt;`
    })
    class ConfTalks {
      talks = [ {title: &#39;t1&#39;, speaker: &#39;Brian&#39;, description: &#39;talk 1&#39;},
                {title: &#39;t2&#39;, speaker: &#39;Julie&#39;, description: &#39;talk 2&#39;}];
    }
    @Component({
      selector: &#39;my-app&#39;,
      directives: [ConfTalks],
      template: &#39;&lt;conf-talks&gt;&lt;/conf-talks&gt;&#39;
    })
    class App {}
    bootstrap(App, [])

The error is

    EXCEPTION: Template parse errors:
    Can&#39;t bind to &#39;ngFor&#39; since it isn&#39;t a known native property
    (&quot;&lt;div [ERROR -&gt;]*ngFor=&quot;talk of talks&quot;&gt;

Exception: Can&#39;t bind to &#39;ngFor&#39; since it isn&#39;t a known native property

Im following [this tutorial][1]. On the way to get list of users from api.github Im getting error:  

&gt; Cannot find a differ supporting object &#39;[object Object]&#39;

 I think its related to 

     &lt;ul&gt;
     &lt;li *ngFor = &quot;#user of users&quot;&gt;
     {{user | json}}
     &lt;/li&gt;
     &lt;/ul&gt;

In my code because before it there was no any error, and im unsure if data come from get request, just clicking didnt give any error, here is my code so far

    @Component({
    selector: &#39;router&#39;,
    pipes : [],
    
    template: `
    &lt;div&gt;
    &lt;form [ngFormModel] = &quot;searchform&quot;&gt;
          &lt;input type = &#39;text&#39; [ngFormControl]= &#39;input1&#39;/&gt;
    &lt;/form&gt;
         &lt;button (click) = &quot;getusers()&quot;&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
    &lt;div&gt;
    &lt;ul&gt;
        &lt;li *ngFor = &quot;#user of users&quot;&gt;
        {{user | json}}
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
    directives: [FORM_DIRECTIVES]
    })
    export class router {
    searchform: ControlGroup;
    users: Array&lt;Object&gt;[];
    input1: AbstractControl;

    constructor(public http: Http, fb: FormBuilder) {
        this.searchform = fb.group({
            &#39;input1&#39;: [&#39;&#39;]
        })
        this.input1 = this.searchform.controls[&#39;input1&#39;]
    }
    getusers() {
        this.http.get(`https://api.github.com/
    search/users?q=${this.input1.value}`)
            .map(response =&gt; response.json())
            .subscribe(
            data =&gt; this.users = data,
            error =&gt; console.log(error)
            )
    }
    }
    bootstrap(router, [HTTP_PROVIDERS])


  [1]: https://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-depth/

Angular: Cannot find a differ supporting object &#39;[object Object]&#39;

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?

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 understand that provider is for getting service from another class but what is multi-provider and token thing?

And also when we do `multi=true` ?

    provide(NG_VALIDATORS, { useExisting: class),    multi: true })

All Angular2 Directives Solutions on Gang of Coders

Total of 24 Angular2 Directives Solutions