Angular 2 component not working

Question

I'm just staring Angular and have a simple angular component (the glyphicon glyphicon-star you see on the left in stack over flow questions) which i want to display but I can only get a non clickable star .

here is my code: favorite.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'favorite',
    template: `    
 <i 
        class="glyphicon"
        [class.glyphicon-star-empty] ="!isFavorite"
        [class.glyphicon-star]="isFavorite"
        (click)="onClick()">
    </i>
    `
})
export class FavoriteComponent { 
    isFavorite = false;

    onclick() {
        this.isFavorite = !this.isFavorite;
    }
}

In app.component I'm trying to render this 'favorite' component:

import {Component} from 'angular2/core';
import {CoursesComponent} from './courses.component'
import {AuthorsComponent} from './authors.component'
import {FavoriteComponent} from './favorite.component'



@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1><courses></courses><authors></authors><button class ="btn btn-primary">Submit</button><br><favorite></favorite>',
    directives: [CoursesComponent, AuthorsComponent] 
})
export class AppComponent { }

How do I render the component in my app.component ?

Full code here : https://github.com/aindriu80/Angular2withTypeScript

The code doesn't load up the component - i only get the favorite favorite

i myself new into angular2, however in many tutorial they tend to have their app.module to list the component you wanted to use and bootstrap the module in the main.ts file by importing platformbrowserdynamic — himawan_r
– himawan_r, Commented Apr 11, 2017 at 10:40
what do you mean the module definition ? I just have one componet favorite.component.ts the typescrpypt — Aindriú
– Aindriú, Commented Apr 11, 2017 at 10:42
i suggest that you create a favorite.html and insert your template in there and pass the template url instead of the template. Make sure you reference the path from the web route like templateUrl: client/favorite.html — Ulug Toprak
– Ulug Toprak, Commented Apr 11, 2017 at 10:43
I have the full code Im working on in github - if you go to the link above and select commits - then favorite initial and download that version thats all the files. — Aindriú
– Aindriú, Commented Apr 11, 2017 at 10:47

Devidas Kadam · Accepted Answer · 2017-04-11 10:49:32Z

1

try this.

Remove the extra double quote '"',

<i 
    class="glyphicon"
    [class.glyphicon-star-empty] ="!isFavorite"
    [class.glyphicon-star]="isFavorite"
    (click)="onClick()">
</i>

if not working, try following

<i class="glyphicon" [ngClass]="{'glyphicon-star-empty':!isFavorite,'glyphicon-star':isFavorite}"
    (click)="onClick()">
</i>

answered Apr 11, 2017 at 10:49

Devidas Kadam

9549 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aindriú Over a year ago

im not getting anything on the main page to begin with, i think there might be a problem with '<favorite></favorite>'

andreim · Accepted Answer · 2017-04-11 10:58:12Z

1

Please note that JavaScript identifiers are case-sensitive.

Your component template has (click)="onClick()" but the component class defines onclick() { ... }.

Also try structuring a bit the code as the app folder holds all the files and is difficult to follow. Check the official style guide: https://angular.io/docs/ts/latest/guide/style-guide.html#!#04-04

answered Apr 11, 2017 at 10:58

andreim

3,49327 silver badges22 bronze badges

4 Comments

Aindriú Over a year ago

yes its a bit confusing starting out. I tried onclick but no luck.

andreim Over a year ago

I see that you are using an older version of Angular2 (beta7). Is this the thing you are trying to achieve? Starting with a beta version? Currently the Angular v4 is already released - angularjs.blogspot.ro/2017/03/angular-400-now-available.html

andreim Over a year ago

If your purpose is to start a project based on Angular2 I think the best would be to use Angular CLI which has it this time version 1.0 which is stable - github.com/angular/angular-cli This is a command-line tool which will speed up your development.

andreim Over a year ago

So you can: 1) install Angular CLI - npm install -g @angular/cli; 2) create a new project - ng new Angular2withTypeScript; 3) copy all your files to the newly app directory or use ng generate ... to start generating new components, services, ...; 4) finally when all is done start the development server - ng serve - this will be available at localhost:4200 if not configured in any other way;

Ofer Herman · Accepted Answer · 2017-04-11 11:05:56Z

1

You can wrap it in a tag and move the click event to it:

import {Component} from 'angular2/core';

@Component({
    selector: 'favorite',
    template: `
    <a (click)="onClick()">
        <i 
            class="glyphicon"
            [class.glyphicon-star-empty]="!isFavorite"
            [class.glyphicon-star]="isFavorite"
            >
        </i>
    </a>
    `
})
export class FavoriteComponent { 
    isFavorite = false;

    onClick() {
        this.isFavorite = !this.isFavorite;
    }
}

edited Apr 11, 2017 at 11:05

answered Apr 11, 2017 at 10:48

Ofer Herman

3,0681 gold badge23 silver badges23 bronze badges

4 Comments

Aindriú Over a year ago

Thanks ! but the glyphicon is not showing up at all ?

Ofer Herman Over a year ago

sorry, had some missing double quotes

Aindriú Over a year ago

no worries, not working. not displaying anything just <favorite></favorite> in the console browser in chrome

Ofer Herman Over a year ago

you should move to the latest angular version otherwise it'll be really hard to say why are you getting errors.

Umesh Shende · Accepted Answer · 2017-04-11 12:21:15Z

1

if i would have chance i do this in following way

import {Component} from 'angular2/core';

@Component({
    selector: 'favorite',
    template: `
    <a (click)="onClick()">
        <i class="glyphicon" *ngIf="isFavorite" [ngClass]="glyphicon-star">
        </i>

         <i class="glyphicon" *ngIf="!isFavorite" [ngClass]="glyphicon-star-empty">
        </i>
    </a>
    `
})
export class FavoriteComponent { 
    isFavorite = false;

    onClick() {
        this.isFavorite = !this.isFavorite;
    }
}

answered Apr 11, 2017 at 12:21

Umesh Shende

831 silver badge11 bronze badges

1 Comment

Aindriú Over a year ago

its not working. I have another angular file called app.component.ts which loads up the favorite.components.ts but nothing is display on screen - only <favorite></favorite> in view source

Aindriú · Accepted Answer · 2017-04-11 15:50:01Z

I got it. I had a missing directive in my app.components.ts file. Thanks for pointing out the case sensitivity.

app.component.ts

    import {Component} from 'angular2/core';
import {CoursesComponent} from './courses.component'
import {AuthorsComponent} from './authors.component'
import {FavoriteComponent} from './favorite.component'



@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1><courses></courses><authors></authors><button class ="btn btn-primary">Submit</button><br><favorite></favorite>',
    directives: [CoursesComponent, AuthorsComponent, FavoriteComponent] 
})
export class AppComponent { }

Also I didn't have a capitalized c on onClick() in the favorite.components.ts file.

favorite.component.ts :

import {Component} from 'angular2/core';

@Component({
    selector: 'favorite',
    template: `    
 <i 
        class="glyphicon"
        [class.glyphicon-star-empty]="!isFavorite"
        [class.glyphicon-star]="isFavorite"
        (click)="onClick()">
    </i>
    `
})
export class FavoriteComponent { 
    isFavorite = false;

    onClick(){
        this.isFavorite = !this.isFavorite;
    }
}

Collectives™ on Stack Overflow

Angular 2 component not working

5 Answers 5

1 Comment

4 Comments

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related