Creating the PWA view

Author: Damian Gemza

-

Creating the application view

What is an application without a view? Nothing! After all, users must click on something, read something, and the data must be displayed somewhere. For this purpose we will prepare a very simple application layout. We will use the navigation bar, a footer, two buttons, a modal and some text.

Let's start with the navigation bar. Open app.component.html, and paste in the code below, which is responsible for rendering the navigation bar.


        <!--Navbar-->
        <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark blue">
          <mdb-navbar-brand class="mx-auto">
            <a class="logo navbar-brand white-text"><strong>MDB Angular Sample PWA</strong></a>
          </mdb-navbar-brand>
        </mdb-navbar>
        <!--/.Navbar-->
      

Once we have the navigation bar, it is time to take care of the footer. Paste the following code right after the end of the navigation bar in the app.component.html file


        <footer class="footer-copyright fixed-bottom blue py-3 text-center text-white">
          © 2018 Copyright:
          <a class="text-white" href="https://mdbootstrap.com/docs/angular/"> MDBootstrap.com </a>
        </footer>
      

If you refresh the page at this point, you will see that our application is slowly taking shape - great! It's now time to add the last piece of code to our template, which will present the final application. To do this, copy the code below between the navigation bar and the footer.


        <div class="container">

          <h2 class="text-center h2-responsive mt-5">MDB Angular Progressive Web App</h2>

          <div class="row">
            <div class="col-md-12 mx-auto my-5 d-flex flex-center">
              <button mdbBtn color="primary" outline="true" class="waves-effect" mdbWavesEffect (click)="checkForUpdates()">Check
                For Updates</button>
              <button mdbBtn color="primary" outline="true" class="waves-effect" mdbWavesEffect (click)="forceUpdate()">Force
                Update</button>
            </div>
          </div>

          <h3 class="text-center h3-responsive">Change me to observe app update!</h3>
          <div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
                    <span aria-hidden="true">×</span>
                  </button>
                  <h4 class="modal-title w-100" id="myModalLabel">New version</h4>
                </div>
                <div class="modal-body">
                  A new version of the application has appeared. Do you want to update?
                </div>
                <div class="modal-footer">
                  <button type="button" mdbBtn color="danger" class="waves-light" aria-label="Close" (click)="basicModal.hide()"
                    mdbWavesEffect>Don't update</button>
                  <button type="button" mdbBtn color="success" class="relative waves-light" mdbWavesEffect (click)="forceUpdate()">Update!</button>
                </div>
              </div>
            </div>
          </div>

        </div>
      

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Damian Gemza
Damian is a front-end developer. He is passionate about everything related to the world of Web Development. He is interested in the subject matter of Angular and everything that is connected with it. He knows and uses the Ionic framework and Progressive Web Apps technology. Recently he has started to write tutorials related to the Web Development.