On Sunday, August 14, 2016 at 4:19:55 PM UTC-4, Dawg wrote:
>
> 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.
> In the HTML template the initially setup is to display *glyphicon
> glyphicon-heart-empty *but if isFavorit changes it should set it to
> *glyphicon
> glyphicon-heart if my code is written correctly. *
>
> *as of now im not sure where the flaw is and any help you can provide
> would be greatly appreciated.*
>
> *tanks.*
>
> *authors.component.ts*
>
> import {Component, Input} from '@angular/core';
> import {AuthorsServices} from './services/authors.services';
> *import {FavoriteDirective} from './directives/favorite.directive';*
>
> @Component({
> selector: 'author',
> templateUrl: 'templates/authors.template.html',
> *directives: [FavoriteDirective]*,
> providers: [AuthorsServices]
> })
>
> export class AuthorsComponent{
> @Input() newAuthorTitle;
> @Input() mediaListing;
>
> listOfAutors: any;
> authorTitle = "List of arthors1";
>
> constructor(getAuthorList: AuthorsServices) {
> this.listOfAutors = getAuthorList.getAuthorsServices();
> console.log(this.listOfAutors);
> }
>
> onDelete(){
>
> console.log('delete');
> }
> }
>
> *favorite.directive.ts*
>
> import {Directive, HostBinding, Input} from '@angular/core';
>
> @Directive({
> selector: '[mwFavorite]'
> })
>
> export class FavoriteDirective{
> @HostBinding('class.glyphicon-heart') isFavorite = true;
> *// I need to inc. glyphicon in front of class.glyphicon-heart, but
> how?*
> @Input()
> set mwFavorite(value){
> this.isFavorite = value;
> }
> }
>
> *authors.template.html*
> <div >
> {{mediaListing.name}} <br>
> {{ mediaListing.medium}} <br>
> {{ mediaListing.category}} <br>
> {{ mediaListing.year}} <br>
>
> <a class="delete" (click)="onDelete()"> Delete</a>
> *<span *
> * [mwFavorite] = "mediaListing.isFavorite";*
>
> * class="glyphicon glyphicon-heart-empty"> </span>*
> </div>
>
>
> quick snippet of error received:
> EXCEPTION: Error in templates/authors.template.html:8:7
> ORIGINAL EXCEPTION: InvalidCharacterError: Failed to execute
> 'setAttribute' on 'Element': ';' is not a valid attribute name.
>
>
> I was able to narrow down the problem and I believe this might 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**></span> In my case I'm not sure how to go
> about including the **glyphicon** in front of glyphicon-heart.
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
