Angular CLI won't show CSS

Question

I use angular cli 1.4.3, node 6.11.3, npm 5.4.2, I want to read the records by using angular2. The output at localhost should be like this:

but the output that I get is like this:

here the html code:

<div class="row m-b-18px">
<div class="col-md-12">
    <!-- button to create new product -->
    <a (click)="createProduct()" class='btn btn-primary pull-right'>
        <span class='glyphicon glyphicon-plus'></span> Create Product
    </a>
</div>
</div>

<div class="row">
<div class="col-md-12">

    <!-- HTML table for our list of product records -->
    <table class='table table-hover table-responsive table-bordered'>

        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Description</th>
            <th>Category</th>
            <th>Actions</th>
        </tr>

        <!-- Use *ngFor directive to loop throught our list of products. -->
        <tr *ngFor="let product of products">
            <td>{{product.name}}</td>
            <td>{{product.price}}</td>
            <td>{{product.description}}</td>
            <td>{{product.category_name}}</td>
            <td>
                <!-- read one product button -->
                <a (click)="readOneProduct(product.id)" class='btn btn-
                primary m-r-5px'>
                    <span class='glyphicon glyphicon-eye-open'></span> Read
                </a>

                <!-- edit product button -->
                <a (click)="updateProduct(product.id)" class='btn btn-info 
                m-r-5px'>
                    <span class='glyphicon glyphicon-edit'></span> Edit
                </a>

                <!-- delete product button -->
                <a (click)="deleteProduct(product.id)" class='btn btn-danger 
                m-r-5px'>
                    <span class='glyphicon glyphicon-remove'></span> Delete
                </a>
            </td>
        </tr>
    </table>
</div>
</div>

Here the css code:

.m-b-18px{ margin-bottom: 18px; }
.m-r-5px{ margin-right: 5px; }
.w-40-pct{ width: 40%; }
.text-align-center{ text-align: center; }

Thank you

It looks like you want to use bootstrap. Did you add the link to the bootstrap files in your angular-cli.json? "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ] And don`t forget to add the js files aswell — jhen
– jhen, Commented Sep 27, 2017 at 8:57
Can you show your Typescript file with your component? You should include HTML and CSS files from there. — aljazerzen
– aljazerzen, Commented Sep 27, 2017 at 9:06

aljazerzen · Accepted Answer · 2017-09-27 09:02:02Z

1

Looks like you do not include Bootstrap in your project. First, install it:

npm install --save bootstrap

Then go to angular-cli.json file, find styles properties and add "../node_modules/bootstrap/dist/css/bootstrap.min.css" so it looks like this:

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],

answered Sep 27, 2017 at 9:02

aljazerzen

4911 gold badge5 silver badges21 bronze badges

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

Comments

Nagy István · Accepted Answer · 2017-09-27 08:58:08Z

0

Are you use the View encapsulation in the component?

answered Sep 27, 2017 at 8:58

Nagy István

1313 bronze badges

Collectives™ on Stack Overflow

Angular CLI won't show CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related