CODEWITHSUNDEEP
angular
Jordi
Jordi

Reputation: 23247

angular2: Can't bind to 'x' since it isn't a known property of 'y'

I'm using angular 2.3.0. I'm getting the next message:

Can't bind to 'type' since it isn't a known property of 'alert'.

Template related code is (complete template code on here):

<alert *ngFor="let alert of alerts; let i = index" [type]="alert.type + ' alert-sm'" (close)="closeAlert(i)" dismissible="true">
    <div [innerHTML]="alert.msg"></div>
</alert>

As you can guess, I'm getting each alert from alerts property.

Component related code:

@Component({
  selector: 'signin',
  styleUrls: [ './signin.style.scss' ],
  templateUrl: './signin.template.html',
  encapsulation: ViewEncapsulation.None,
  host: {
    class: 'signin-page app'
  },
  providers: [ UsersService ]
})
export class Signin implements OnInit {

    private alerts: Array<Object>;

    constructor()
    {
        this.alerts = [
        {
            type: 'success',
            msg: '<span class="fw-semi-bold">Success:</span> You successfully read this important alert message.'
        }];
    }
}

I don't quite to figure out what's wrong. Any ideas?

Upvotes: 2

Views: 2454

Answers (1)

ranakrunal9
ranakrunal9

Reputation: 13558

Change you HTML as below :

<div *ngFor="let alert of alerts; let i = index" [attr.type]="alert.type + ' alert-sm'" (close)="closeAlert(i)" dismissible="true">
    <div [innerHTML]="alert.msg"></div>
</div>

Upvotes: 1

Related Questions