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 class="panel-body">
  <div class='row'>
   <div class='col-md-2'>Filter by:</div>
   <div class='col-md-4'>
    <input type='text' />
  <div class='row'>
   <div class='col-md-6'>
    <h3>Filtered by: </h3>
  <div class="table-responsive">
   <table class="table">
       <button class="btn btn-primary">Show Image</button>
      <th>5 Star Rating</th>

Share this

Related Posts