Home page

Home page consists of various types of beautifully designed widgets. Which is easy to customize and use. So following are the steps to customize widgets.

Let us assume that you want to customize the service widget from home page. Following is the html code of widget

	
<!-- Service grid -->
           <div class="service section-gap-grid">
               <div class="container">
                   <div class="section-title-wrapper mb-5">
                     <div class="row">
                           <div class="col-sm-12 col-md-10 mx-auto text-center">
                               <h2>Best Solutions Your Business Needs!</h2>
                               <p>Best solutions from worlds class professionals developed with latest trends and designs. </p>
                           </div>
                     </div>
                   </div>
                   <div class="row" angly-servicegrid="" [servicegridcontent]="services"></div>
               </div>
           </div>

As seen in above code snippet h2 and p are the title of the section. So change the title and description of the widget. Main thing is to understand that how the actual content of the section is going to be change.

Go to src >> app >> widgets >> grid >> servicegrid and open serviceGrid.compoment.htmlfile. You will see the following html.

<!-- Service grid -->
<div class="col-sm-12 col-md-4 col-xl-4 mb-4" *ngfor="let content of serviceGridContent ? serviceGridContent.slice(0,3):[]">
    <div class="info-card text-center">
        <div class="icon-wrap mb-3 {{content?.icon?.color}}">
          <i class="{{content?.icon?.name}} font-4x"></i>
        </div>
        <h2 class="mb-4 info-title">{{content?.title}}</h2>
        <p class="mb-3">{{content?.content}}</p>
        <a [routerlink]="['/', content.link]" routerlinkactive="active-link" class="text-uppercase btn {{content?.btnBgClass}} btn-sm">
            SEE MORE
        </a>
    </div>
</div>

If you need to chnage above code then do the changes.

Now to to src >> assets >> data and open service.json file

 "data":[
        {
          "icon":{
             "name":"ion-ios-bulb-outline",
             "color":"text-warning"
          },
          "title":" Innovative Designs ",
          "content":"Innovative designs created with latest trends and feature.Re-usable design block to create new pages which provides a relaxing user experience with joy.",
          "link":"javascript:void(0)",
          "btnBgClass": "btn-outline-warning"
        },
        {
          "icon":{
             "name":"ion-ios-infinite-outline",
             "color":"text-primary"
          },
          "title":" Flexibility ",
          "content":"Flexible fremework to provide you the full control over designs and functionality. Component and modules are flexible and easy to customize to  develope new features and sections with ease.",
          "link":"javascript:void(0)",
          "btnBgClass": "btn-outline-primary"
        },
        {
          "icon":{
             "name":"ion-ios-flash-outline",
             "color":"text-info"
          },
          "title":" Powerful UI ",
          "content":"Convert your site users into your customers and subscribers with powerfull UI and beautifully designed pages. 30+ page templates gives you a variety of designs to showcase your content.",
          "link":"javascript:void(0)",
          "btnBgClass": "btn-outline-info"
        }
    ]
}

In this json file you can edit your data and after editing this file start ng serve again to refect the changes.