Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Angular Basics Angular Components Component Templates and Styles

Jedhai Pimentel
Jedhai Pimentel
9,473 Points
Posted by Jedhai Pimentel
Jedhai Pimentel
9,473 Points

My description isn`t looking like the one in the video

I followed the instructions and my image description is showing just as a plain phrase instead of looking like the one on the video.

What is should look like: https://i.imgur.com/lgpHrGl.png

What mine looks like: https://i.imgur.com/Z8T4nWQ.png

my code from the entry.component.html:

<h2>{{title}}</h2>
<figure>
    <img src="{{photo}}">
    <figcaption>{{description}}</figcaption>
</figure>

3 Answers

Alexander La Bianca
Alexander La Bianca
15,959 Points
Alexander La Bianca
Alexander La Bianca
15,959 Points

This is just a styling thing. Do you have anything in the entry.component.css file? Or in your entry.component.ts file - in the @Component({}) You may be missing a 'styling' property that was set.

Jedhai Pimentel
Jedhai Pimentel
9,473 Points
Jedhai Pimentel
Jedhai Pimentel
9,473 Points

My entry.component.css is empty and so is the one in the video :(

(during the video he will style the css, but my problem happens before that)

Alexander La Bianca
Alexander La Bianca
15,959 Points
Alexander La Bianca
Alexander La Bianca
15,959 Points

Can you post your contents of entry.component.ts vs the contents of entry.component.ts from the video? From looking at both the images you posted, it seems that the title and description are styled in the video, but not in yours.

Jedhai Pimentel
Jedhai Pimentel
9,473 Points
Jedhai Pimentel
Jedhai Pimentel
9,473 Points

My entry.component.ts:

import {Component} from '@angular/core';

@Component({
    selector: "app-entry",
    templateUrl: "entry.component.html",
    styleUrls: ["entry.component.css"]
})

export class EntryComponent {
    title:string = "my fisrt photo";
    photo:string = "http://placehold.it/800x500?text=Angular Basics";
    description:string = "A description of My First Photo";
}

the videos:

import { Component } from '@angular/core';

@Component({
    selector: 'app-entry',
    templateUrl: 'entry.component.html',
    styleUrls: ['entry.component.css']
})

export class EntryComponent {
    title: string = 'My First Photo';
    photo: string = 'http://placehold.it/800x500?text=Angular Basics';
    description: string = 'A Description of My First Photo';
}
Jedhai Pimentel
Jedhai Pimentel
9,473 Points
Jedhai Pimentel
Jedhai Pimentel
9,473 Points

Btw, at the end of the video i manage to get everything looking equal to the video, but i still can't figure out why it was diferent during the process

Alexander La Bianca
Alexander La Bianca
15,959 Points
Alexander La Bianca
Alexander La Bianca
15,959 Points

Ok - since you are saying that both css files are empty I believe it is related to bootstrap. Does the instructor load bootstrap in his videos? You should have a file in your project called '.angular-cli.json' if you open that file you should see a key called 'styles'. In there the instructor may have loaded bootstrap.css.

You can install bootstrap with npm install bootstrap --save. Then in the .angular-cli.json file in the styles array add '../node_modules/bootstrap/dist/css/bootstrap.min.css'.

The other thing that could be going on is that the instructor has styles defined in the global 'styles.css' file which should also be somehwere in your project. However, the styles in the image look very 'bootstappy'