Can't bind to 'name' since it isn't a known native property in angular2 font-awesome

[puvaasam]

Hi, I'm getting an error while integrating Font-awesome in angular2 application, I followed fa document for systemjs.config.js setup.

Error message platform-browser.umd.js:962 Error: Uncaught (in promise): Template parse errors: Can't bind to 'name' since it isn't a known native property ("

<li *ngFor="let author of authors">
        <a>
         <fa [ERROR ->][name]="rocket" [border]=true></fa>
        </a>
    </li>
"): AuthorComponent@7:13
Can't bind to 'border' since it isn't a known native property ("
    <li *ngFor="let author of authors">
        <a>
         <fa [name]="rocket" [ERROR ->][border]=true></fa>
        </a>
    </li>

also, i tried with FaComponet and FaDirective.

Code:

import {Component} from '@angular/core';
import {AuthorServices} from '../../service/author.services'
import {AutoGrow} from "../../directive/autoGrow";
import {FaDirective} from 'angular2-fontawesome/directives';

@Component({
    selector: 'author',
    templateUrl: './app/component/author/author.html',
    providers: [AuthorServices],
    directives: [AutoGrow, FaDirective]
})
export class AuthorComponent{
    title: string;
    authors: any;
    authorName: string;

    constructor(private authorServices: AuthorServices){
        this.title = 'Authors Names';
        this.authors = authorServices.getAuthors();
    }

    onClick(author){
        this.authorServices.addAutors(this.authorName);
        this.authorName = '';
    }
}

author.html

<h2> Authors: {{authorName}} </h2>
{{title}}
<input #authorText type="text" [(ngModel)]="authorName"  autoGrow/>
<button  (click)="onClick(authorName); name = ''">Add</button>
<ul>
    <li *ngFor="let author of authors">
        <a>
         <fa [name]="rocket" [border]=true></fa>
        </a>
    </li>
</ul>

systemjs.config.js

(function(global) {
    // map tells the System loader where to look for things
    var map = {
        'app':                        'app', // 'dist',
        '@angular':                   'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs':                       'node_modules/rxjs',
        'angular2-fontawesome':       'node_modules/angular2-fontawesome'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
        'angular2-fontawesome':       { defaultExtension: 'js' }
    };

Thanks..

[travelist]

@puvaasam Thanks for the comment:) Would you like to confirm your html tag is like following example?

<i fa [name]="times" border=true></i>

If we use directive, we have to add fa attribute.

[puvaasam]

It's resolved my issue, Could tell me how to declare fa [name] property html.

When i do an inspect element my dom is like (fa-undefined)

<ul>
    <!--template bindings={}--><li>
       Author A<i fa="" class="fa fa-undefined fa-border"></i>
    </li><li>
       Author B<i fa="" class="fa fa-undefined fa-border"></i>
    </li><li>
       Author C<i fa="" class="fa fa-undefined fa-border"></i>
    </li><li>
       Author D<i fa="" class="fa fa-undefined fa-border"></i>
    </li>
</ul>

[puvaasam]

Ok, I got it

<i fa [name]="'times'" [border]=true></i>

[ivorobioff]

In the manual it's said that the component can be used like <fa ....> but it throws the same error. So, is it possible to use the component or not? Should we use only directives?