Angular JS 2, issue with directive & bootstrap

I’m extremely new to Angular 2 and in the process of going through a tutorial I’m somewhat stuck at implementing the custom directives. I narrowed down the problem but I’m not sure how to implement the script.

I’m using twitter bootstrap and the line I’m having problems with is @HostBinding(‘class.glyphicon-heart’) isFavorite = true;

I need to include glyphicon in front of glyphicon-heart, how do i go about doing this?

import {Directive, HostBinding, Input} from '@angular/core';
@Directive({
    selector: '[mwFavorite]'
})
export class FavoriteDirective{
    **@HostBinding('class.glyphicon-heart') isFavorite = true;** 
    @Input() 
    set mwFavorite(value){
        this.isFavorite = value;
    }
}

It would help if you let us know which tutorial you are working through.

not sure if that matters but if it helps to solve my problem, the tutorial i’m using is from lynda.

It helps so that we can look at the tutorial, and match up their instructions with what you have done. I don’t think though that Lynda would appreciate having their tutorial distributed elsewhere.

As Angular is written in TypeScript (which is different from JavaScript) and the tutorial seems to be locked behind a pay wall, these things do make it more difficult for you to obtain any useful assistance.

Hopefully knowing those limitations, someone here with experience in Angular and/or access to Lynda, will be able to help.

I was able to narrow down the problem and I believe this ght be a bootstrap format issue:

@HostBinding(‘class.glyphicon-heart’) isFavorite = true;

If it was outside the angular word it would be written like so: <span glyphicon glyphicon-heart> In my case I’m not sure how to go about including the glyphicon in front of glyphicon-heart.

I am very familiar with Angular 2 but haven’t used HostBinding. At least from the document, it put the decorator on a method then an attribute

Also, if it’s just changing the class attributes than you can do so using [class] attribute. For example, ```
[class.glyphicon-heart]=“isFavorite”

If you want to set multiple classes then look at this example

I was curious about this feature and looked up sample code.

Personally, I’m not sure if I like to use ‘HostBinding’ as that delutes the logic of presentation layer but glad to know it.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.