Introduction

Hopefully, you guys have read Part 1 and have set up the basic development environment. In this part let’s create the master/layout and home page. Depending on the length of an article, I will see if I can add more steps of page development here.

Let’s Start

1. Read Part 1 and follow the steps to create the basic project layout and add necessary library packages.
   1. In this part, we are using two third-party controls, one is Angular Google Map that we would use to show the company’s address. Second is an ngx-carousel control that we would use for top banner and client’s portfolio in a home page. 
   2. Let’s go ahead, install these two packages and add their references in AppModule, drag the bottom panel and go to TERMINAL tab, run the command cd mazharncoweb to go to the Angular project folder and then run the following commands:
      1. Run the command: npm install @agm/core --save
      2. Run the command: npm install ngx-carousel --save
   3. Once these packages are successfully installed, edit the src -> app.module.ts file and add the references like the following:

In this part, we will develop a master or layout page that is actually AppComponent in Angular and create a Homepage. So basically, we would create all HTML, CSS and little typescripts to facilitate UI. There would be no server-side coding in this part. In the end, you should see the following page:

3. Let’s go to src -> app -> app.component.html and remove everything in it. Let’s add some attractive stuff there. We will create a top with logo, social media links, middle with carousel controls, under carousel we would have our menu, search bar, footer, etc.
4. paste the following HTML in app.component.html and let’s understand it:

<div class="main_div">
  <mat-grid-list cols="10" rowHeight="2:1">
    <div>
      <mat-grid-tile>
        <div style="padding-left: 5px;">
          <img src='assets/images/logo1.png' class="mnc-logo" />
        </div>
      </mat-grid-tile>
      <mat-grid-tile [colspan]=8>
        <div class="socail_btn_padding">
          <img src="assets/images/fb_btn1.jpg" class="socail_btn image" />
          <img src="assets/images/skype_btn1.jpg" class="socail_btn image" />
          <img src="assets/images/twtr_btn1.jpg" class="socail_btn image" />
          <img src="assets/images/lkdin_btn1.jpg" class="socail_btn image" />
        </div>
      </mat-grid-tile>
      <mat-grid-tile [colspan]=1>
        <div style="text-align: left">
          <img src="assets/images/login_btn.png" class="lgn_btn image" />
        </div>
      </mat-grid-tile>
    </div>
    <mat-grid-tile [colspan]=10 [rowspan]=3>
      <ngx-carousel [inputs]="carouselBanner" [moveToSlide]="1">
        <ngx-item NgxCarouselItem>
          <div><img src='assets/images/banner_1.jpg' width="100%" /></div>
        </ngx-item>

        <ngx-item NgxCarouselItem>
          <div><img src='assets/images/banner_2.jpg' width="100%" /></div>
        </ngx-item>
        <button NgxCarouselPrev><</button>
        <button NgxCarouselNext>></button>
      </ngx-carousel>
    </mat-grid-tile>
  </mat-grid-list>
  <div>
    <nav class="navbar navbar-default navbar_shadow">
      <div class="container-fluid">

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Management Consulting</a></li>
                <li><a href="#">Information Technology Solutions</a></li>
                <li><a href="#">Tax Compilance</a></li>
                <li><a href="#">Corporate Compilance</a></li>
                <li><a href="#">ISO Quality Services</a></li>
                <li><a href="#">Pre-Job Training</a></li>
                <li><a href="#">On-Job Training</a></li>
                <li><a href="#">Audit</a></li>
                <li><a href="#">Application Management</a></li>
              </ul>
            </li>
            <li><a href="#">Our Clients</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Team</a></li>
              </ul>
            </li>
            <li><a href="#">Contact</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <form class="navbar-form navbar-left">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </div>
  <div class="clearfix" style="padding-top:10px; padding-bottom: 10px">
    <router-outlet></router-outlet>
  </div>

  <div style="padding-top: 30px">
    <mat-card>
      <mat-card-header class="header">
        <div mat-card-avatar class="vst_img"></div>
        <mat-card-title class="header_title">Visit Us</mat-card-title>
      </mat-card-header>
      <mat-card-content class="address_card_content">
        <div class="address_card_content_div">
          <div class="col-md-6">
            <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="false" [zoomControl]="false">
              <agm-marker *ngFor="let m of markers; let i = index"  [latitude]="m.lat" [longitude]="m.lng"
                [label]="m.label">
                <agm-info-window>
                  <strong>Mazhar & Co. Office # 19, First Floor, Mall Plaza, Mall Road                                                                                    
                  Rawalpindi, Pakistan  </strong>
                </agm-info-window>
              </agm-marker>
            </agm-map>
          </div>
          <div class="col-md-1"></div>
          <div class="col-md-5 address">
            Email:<a href="mailto:mazhar_rawalpindi@yahoo.com"> mazhar_rawalpindi@yahoo.com</a>
            <br>Website: <a href="http://www.mazharnco.com"> www.mazharnco.com</a>
            <br> Skype: <a href="skype:plug-shop?mazharmahmood786"> mazharmahmood786</a> 
            <br> Cell: <a href="tel:+92 333 5104584"> +92 333 5104584</a>
            <br> Tel: <a href="tel:+92 51 5680138"> +92 51 5680138</a> & <a href="tel:+92 51 2291858"> +92 51 2291858</a> <br>
            <hr><b> Head Office:</b> 
            <br> Office # 19, First Floor, Mall Plaza, Mall Road 
            <br> Rawalpindi, Pakistan 
            <br> Tel & Fax:
            <a href="tel:+92 51 5562241"> +92 51 5562241 </a><br>
            <hr><b> Branch office: </b>
            <br> H # 24, St # 54, F-11/3
            <br> Islamabad, Pakistan 
            <br> Tel: <a href="tel:+92 51 2291858"> +92 51 2291858</a><br>
          </div>
        </div>
      </mat-card-content>
      <mat-card-actions class="main_footer">
        <div>
          <div>
             © 2018 Mazhar & Co. All Rights Reserved.
            <button mat-button>Privacy Policy</button>
            <button mat-button>Contact Us</button>
          </div>
          <div class="main_footer_cred">
            Designed and Developed by <a style="color:#bfc4cc" href="https://fullstackhub.io" target="_blank"> Fullstack Hub</a>
          </div>
        </div>
      </mat-card-actions>
    </mat-card>
  </div>
  <br>
</div>

5. if you run the command ng serve -o to view it in a browser, you would see just crap because there are a lot of CSS classes that we still didn’t add to it.
6. You can see on a top we put all HTML in one main div and applied one CSS class main_div, that is just to add some padding and avoid horizontal scrollbar, you would see all CSS classes in a later step when we would update the app.component.css file.
7. In the next line, we are using mat-grid-list component from Angular Material, it is almost the same as the Bootstrap grid system but personally, I found it hard to manage, you can define the number of columns, rowspan, and other properties though. I just use it to show how it works, feel free to change it to Bootstrap grid system. This section has our logo, social media links, login button, and carousel control. Feel free to explore ngx-carousel control, it’s amazing.
8. The next section is Bootstrap Navbar control, just defined the menu items, we will add the links in upcoming parts and eventually all menu items would be loaded from a database. 
9. Under navbar control, we have a router-outlet Angular directive to load all our other components. 
10. The next section is the footer. We are using one more third-party control agm-map for Google Maps. Though I am only using it to show the address on a map this is quite comprehensive control so go check it out if you need more Google Map features in your Angular application. The rest is quite self-explanatory.
11. So, we have added the HTML in app.component.html, it’s time to beautify it with CSS. Edit the app -> app.component.css file and replace it’s content (if any) with the following:

12. These are all CSS classes we are using in app.component.html. You can go through and find them in HTML where it is being applied. I like to keep separate CSS file for each component for flexibility, if you want to combine the same CSS classes in one global stylesheet, please add it in src -> style.css file. (I am not using it in this application but just keeping it project)
13. Since we are also using the Bootstrap CSS/JS in our application and there are few images e.g. logo, social website icons, banners, etc. this is the right time to add them to our project. 
14. Browse the folder src -> assets and create the three folders in it. 
    1. images
    2. js
    3. CSS
15. Click on this link to download the images, js, and CSS from it. Please feel free to change the images or get the latest version of bootstrap.
16. After adding the Bootstrap CSS and JS file, we need to add their reference to our application. Edit src -> index.html and add the reference of Bootstrap CSS and Javascript, your final index.html file should look like the following:

<!doctype html>
<html lang="en">

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
  <script src="/assets/js/jquery.min.js"></script>
  <script src="/assets/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>Mazhar and Co</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>
</body>

</html>

17. We also added the jQuery reference cause Bootstrap is dependant on it. We are not using any other feature of it.
18. For Angular Google Map and ngx-carousel control, there are some properties we need to set that we are doing in app.component.ts. You can easily find these settings in these component’s Github pages. Go to app -> app.component.ts and replace it content with following:

19. For Angular Google Map, we are specifying the latitude and longitude of our location that we want to show on Map (I got it through Google Map) and push pin label. 
20. For Carousel, we are taking the setting as it is given in the Github page, just changing the number of slides to 2. You are welcome to play with these properties. 
21. That’s it for our master/layout AppComponent, go ahead and run the command ng serve -o to open the page in the browser, you should be able to see the page with header and footer. Let me know if you have any issues.
22. Next, let’s create a home page where we will have Introduction text, news, and featured client list. Go to TERMINAL and run the command: ng g c client/home to create a new component and add its reference in AppModule. (in ng command g is short for generate and c is short for component, you could save some milliseconds of your precious time to use this shortcut)
23. Edit the app -> client -> home.component.html and replace its content with the following:

<div class="row">
  <div class="col-sm-8">
    <mat-card class="card_size mat-card-noshadow">
      <mat-card-header class="header">
        <mat-card-title class="header_title"><i class="material-icons" style="vertical-align: middle">turned_in</i> Welcome to Mazhar & C0.</mat-card-title>
      </mat-card-header>
      <mat-card-content class="card_cntnt">
        <div>
          <p>CONNECTING YOUR BUSINESS TO THE TECHNOLOGY RESOURCES YOU NEED</p>
          <p>
            MMC , a firm of Cost & Management Accountants, provides quality services in the areas of Cost & Financial Accounting, Audit,
            Tax & Corporate Compliance, Management Consulting, Business Management, Quality Management, Research & Development,
            performance audit, feasibility reports, PPRA rules, Information Technology Solutions, Website development, anti
            dumping / antitrust, bridging the gap between investor and businessman, HR policy and any kind of business solution
            as per requirement of clients.
          </p>
        </div>
        <div>
          <div class="col-sm-4">
            <mat-card>
              <mat-card-header class="subheader">
                <mat-card-title class="subheader_title"><i class="material-icons icon">visibility</i> Vision</mat-card-title>
              </mat-card-header>
              <mat-card-content style="height: 160px" class="card_cntnt">
                To add the value in the business to make it competent both at national and international level.
              </mat-card-content>
            </mat-card>
          </div>
          <div class="col-sm-4">
            <mat-card>
              <mat-card-header class="subheader">
                <mat-card-title class="subheader_title"><i class="material-icons icon">brightness_auto</i> Values</mat-card-title>
              </mat-card-header>
              <mat-card-content style="height: 160px" class="card_cntnt">
                Respect, honesty, customer satisfaction and team work at both within and out side the organization is our core value.
              </mat-card-content>
            </mat-card>
          </div>
          <div class="col-sm-4">
            <mat-card>
              <mat-card-header class="subheader">
                <mat-card-title class="subheader_title"><i class="material-icons icon">my_location</i> Mission</mat-card-title>
              </mat-card-header>
              <mat-card-content style="height: 160px" class="card_cntnt">
                To induce the business community to adopt the culture of using the IT based Financial and Accounting information for enhancing
                their capabilities regarding economy, efficiently & effectiveness.
              </mat-card-content>
            </mat-card>
          </div>
        </div>
      </mat-card-content>
    </mat-card>
  </div>

  <div class="col-sm-4">
    <div>
      <mat-card>
        <mat-card-header class="header">
          <mat-card-title class="header_title"><i class="material-icons"></i> Latest News</mat-card-title>
        </mat-card-header>
        <mat-card-content class="card_cntnt card_cntnt_scoll" >
          <div>
            <ul>
              <li>Download Community Entrepreneurship Economic Model (CEEM)<a href="http://www.mazharnco.com/Executive_Summary.pdf"> <i style="vertical-align: bottom" class="material-icons">file_download</i></a>
              <li>Check Client Work Status (coming soon)
              <li>Download Community Entrepreneurship Economic Model (CEEM)<a href="http://www.mazharnco.com/Executive_Summary.pdf"> <i style="vertical-align: bottom" class="material-icons">file_download</i></a>
            </ul>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
    <div style="padding-top: 35px;">
      <mat-card>
        <mat-card-header class="header">
          <mat-card-title class="header_title"><i class="material-icons">rate_review</i> Clients Reviews</mat-card-title>
        </mat-card-header>
        <mat-card-content style="height: 165px">
          <div class="slider">
            <input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav" />
            <input type="radio" name="slider" title="slide2" class="slider__nav" />
            <input type="radio" name="slider" title="slide3" class="slider__nav" />
            <input type="radio" name="slider" title="slide4" class="slider__nav" />
            <div class="slider__inner">
              <div class="slider__contents">
                <h2 class="slider__caption">codepen</h2>
                <p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis
                  minima!
                </p>
              </div>
              <div class="slider__contents">
                <h2 class="slider__caption">newspaper-o</h2>
                <p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis
                  minima!
                </p>
              </div>
              <div class="slider__contents">
                <h2 class="slider__caption">television</h2>
                <p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis
                  minima!
                </p>
              </div>
              <div class="slider__contents">
                <h2 class="slider__caption">diamond</h2>
                <p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis
                  minima!
                </p>
              </div>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>
<div class="clearfix" style="padding-bottom: 30px"></div>
<div>
  <mat-card>
    <mat-card-header class="header">
      <div mat-card-avatar class="clnt_img"></div>
      <mat-card-title class="header_title">Our Client</mat-card-title>
    </mat-card-header>
    <ngx-carousel [inputs]="carouselTile">
      <ngx-tile NgxCarouselItem *ngFor="let Tile of carouselTileItems" style="text-align: center;">
        <img [src]='Tile.url' class="carsoul_img" />
        <div class="clients_slider"><a target="_blank" href='{{Tile.web}}'><i style="vertical-align: bottom" class="material-icons"></i></a>          {{Tile.name}}</div>
        <div class="clients_slider">Service: <b> {{Tile.work}}</b></div>
      </ngx-tile>
      <span NgxCarouselPrev></span>
      <span NgxCarouselNext></span>
    </ngx-carousel>
  </mat-card>
</div>

24. So on this page, we are using a couple of my favorite mt-card components from the Angular Material components library. Here I am using the Bootstrap grid system that looks more easy to use. Almost all code is self-explanatory but in the almost end, you would see div class="slider", this is actually client testimonials control that I took from a codepen page, this is very simple pure CSS control. In the end, we are using ngx-carousel but this time it shows the images in tiles that we are dynamically generating by an Angular ngFor loop. 
25. Next, let’s add the CSS for Home Page, edit the app -> client -> home.component.css and replace its content with following:

mat-card
{
  margin: 0px;
  padding: 0px;
}

mat-card-noshadow{ 
    background: #ECECF4;
    box-shadow: none !important;
}

mat-card-content{
  margin: 0px;
  padding: 0px;
}

.header
{
background: #45484d;
border-bottom: 5px solid #393B3E;
height: 50px;
padding-left: 5px;
}

.subheader
{
height: 40px;
background: #5B5C60;
}

.subheader_title{
    vertical-align:baseline;
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
    font-size: 13pt;
    font-family: Arial, Helvetica, sans-serif;
    color: #C8CCD2;
}

.header_title{
    vertical-align:baseline;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 5px;
    font-size: 16pt;
    font-family: Arial, Helvetica, sans-serif;
    color: #A1A9AF;
}

.card_cntnt
{
    padding: 15px;
    padding-bottom: 15px;
}

.card_cntnt_scoll
{
    padding-top:5px;
    padding-bottom: 5px;
    height: 150px;
    overflow-y: auto;
}

.card_size{
    height:450px;
}
.sub_card_size
{
    height: 60px;
}
.icon
{
    vertical-align:bottom; 
    text-shadow: 1px 1px 2px #928B8B, 0 0 25px #46464A, 0 0 5px #BFBFCA;
}

  .leftRs {
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      width: 50px;
      height: 50px;
      box-shadow: 1px 2px 10px -1px rgba(22, 3, 3, 0.30);
      border-radius: 999px;
      left: 0;
  }

  .rightRs {
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      width: 50px;
      height: 50px;
      box-shadow: 1px 2px 10px -1px rgba(38, 5, 5, 0.30);
      border-radius: 999px;
      right: 0;
  }

  .carsoul_img{
    max-width: 150px;;
    height: 130px;
    text-align: center;
  }

  .clients_slider
  {
      background-color: rgb(51, 53, 57);
      color: #D1D1DB;
      text-decoration:none;
  }

  .clnt_img
  {
    width: 48px;
    height: 48px;
    background-image: url("../../../assets/images/clients-icon.png");
    background-size: cover;
  }


  




  *, *:before, *:after {
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
  }
  
  body {
    color: #444;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
  }
  
  .slider {
    height: 100%;
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .slider__nav {
    width: 12px;
    height: 12px;
    margin: 2rem 12px;
    border-radius: 50%;
    z-index: 10;
    outline: 6px solid #ccc;
    outline-offset: -6px;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  .slider__nav:checked {
    -webkit-animation: check 0.4s linear forwards;
            animation: check 0.4s linear forwards;
  }
  .slider__nav:checked:nth-of-type(1) ~ .slider__inner {
    left: 0%;
  }
  .slider__nav:checked:nth-of-type(2) ~ .slider__inner {
    left: -100%;
  }
  .slider__nav:checked:nth-of-type(3) ~ .slider__inner {
    left: -200%;
  }
  .slider__nav:checked:nth-of-type(4) ~ .slider__inner {
    left: -300%;
  }
  .slider__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    height: 100%;
    -webkit-transition: left 0.4s;
    transition: left 0.4s;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
  }
  .slider__contents {
    height: 100%;
    padding: 2rem;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .slider__image {
    font-size: 2.7rem;
        color: #2196F3;
  }
  .slider__caption {
    font-weight: 500;
    margin: 2rem 0 1rem;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
  }
  .slider__txt {
    color: #999;
    margin-bottom: 3rem;
    max-width: 300px;
  }
  
  @-webkit-keyframes check {
    50% {
      outline-color: #333;
      box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
    }
    100% {
      outline-color: #333;
      box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
    }
  }
  
  @keyframes check {
    50% {
      outline-color: #333;
      box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
    }
    100% {
      outline-color: #333;
      box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
    }
  }
  

26. Again, I am keeping CSS the component-wide but you are free to use it globally by putting them in app -> style.css file. All slider CSS classes are for codepen testimonial control so you kind of doesn’t need to understand it thoroughly, rest is quite self-explanatory. 
27. Now, we need to update the home.component.ts to have client tiles that have client name, website and provided services. Edit the app -> client -> home.component.ts and replace its content with the following:

28. These settings are taken from the ngx-carousal official website except we are creating carousalTileItems variable having JSON object of client information that we are traversing in home.component.html using ngFor loop. 
29. The last step we need to implement is to create a route of the home component. Right-click on the app folder and select the New File option. Enter the name app-routing.module.ts and press enter. Edit this file and paste the following: 

30. In the first route path, we are defining if the default URL is entered without any path, redirect it to a home route. We will keep updating it when creating more pages.
31. Enter the command: ng serve -o in TERMINAL and view the page. You should have a complete working page as following:

Cool, so that’s it for this part. We will continue our development to add more pages.