In the previous section, we have created our Create Listing page. In this section, we will learn to implement the page layout for our Edit Listing page. Take a look at the example we will implement. Does it not look exactly the same as the Create Listing page? That's correct.

The layout of the Create and Edit Listing pages will mostly be the same, except for the fact that there is data loaded when we launch the Edit page, whereas in the Create screen, there will be no data loaded initially:

Now, it's time for some code action. We will create a new component in our Angular project named edit-listing and, in the component template file, we will reuse the same code to create the layout from the Create Listing page to quickly get the Edit Listing page ready:

<h1>Edit Listing</h1>

<div fxLayout="row" fxLayoutAlign="space-between">
    Logo Here
  </div>
  
  <div class="bounds">
  
      <div class="content" 
         fxLayout="row" class="menu">
         
            <div fxFlexOrder="1">Manage Listings</div>
            <div fxFlexOrder="2">Manage Photos</div>
            <div fxFlexOrder="3">Manage eCard</div>
            <div fxFlexOrder="4">Business Opportunity</div>
         
      </div>
      
    <div class="content" 
         fxLayout="row"
         fxLayout.xs="column" 
         fxFlexFill >
         
        <div fxFlex="60" class="sec1" fxFlex.xs="55">
            
            <form action="/action_page.php">
              
              <label for="lprice">Listing Price</label>
              <input type="text" id="lprice" name="lprice" 
                   placeholder="Listing price">

              <label for="country">Property Type</label>
              <select id="country" name="country">
                <option value="australia">USA</option>
                <option value="canada">UK</option>
                <option value="usa">UAE</option>
              </select>

              <label for="laddress">Street Address</label>
              <input type="text" id="laddress" name="laddress" 
                    placeholder="Street Address">
          
              <label for="city">City</label>
              <input type="text" id="city" name="city" 
                    placeholder="City">
              
              <label for="state">State/Province</label>
              <select id="state" name="state">
                <option value="New York">Australia</option>
                <option value="New Jersey">Canada</option>
                <option value="Texas">USA</option>
              </select>
             
              <label for="pcode">Postal Code</label>
              <input type="text" id="pcode" name="pcode" 
                   placeholder="postal code">

              <label for="sfoot">Square Foot</label>
              <input type="text" id="sfoot" name="sfoot" 
                   placeholder="Square Foot">

              <label for="bedrooms"># Bedrooms</label>
              <input type="text" id="bedrooms" name="bedrooms" 
                    placeholder="Bedrooms">

              <label for="bathrooms"># Bathrooms</label>
              <input type="text" id="bathrooms" name="bathrooms" 
                     placeholder="bathrooms">
            
              <input type="submit" value="Submit">
            </form>
        </div>
        <div fxFlex="40" class="sec2" >
            
            <label for="ldescription">Listing Description</label>
            <textarea id="ldescription" name="ldescription" 
                 placeholder="Listing price"></textarea>

        </div>
     
    </div>

In the preceding code, we are creating two rows,  one for the header section and the other for the content row. Inside the content row, we are creating two child columns using fxRow, which will be populated with the form input field elements. The output will be exactly the same as that of the Create Listing page.