Building a Template

In this step, we will be building Product List Component from our Application Architecture.



There are few ways to define template in a component. ie inline template and linked template.



To continue with our app, we have to build product list template. So, we will be creating a folder called 'products' inside app folder and 'product-list.component.html' file inside products folder. For the time being, we can add static html inside that html file.



Sample HTML Code
Note: We are using bootstrap for all html classes
<div class="panel panel-primary">
 <div class="panel-heading">
  Product List
 </div>
 <div class="panel-body">
  <div class='row'>
   <div class='col-md-2'>Filter by:</div>
   <div class='col-md-4'>
    <input type='text' />
   </div>
  </div>
  <div class='row'>
   <div class='col-md-6'>
    <h3>Filtered by: </h3>
   </div>
  </div>
  <div class="table-responsive">
   <table class="table">
    <thead>
     <tr>
      <th>
       <button class="btn btn-primary">Show Image</button>
      </th>
      <th>Product</th>
      <th>Code</th>
      <th>Available</th>
      <th>Price</th>
      <th>5 Star Rating</th>
     </tr>
    </thead>
    <tbody>
     
    </tbody>
   </table>
  </div>
 </div>
</div>

Share this

Related Posts