kfmc_website/src/app/External-Page/new-page/new-page.component.html

<div class="newPage-w">
  <div class="container">
      <div class="containerContent-w">
        <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
            <div class="row">

              <div class="col-12 col-sm-12 col-md-9">
                <div class="firstReport-w">
                  <h2> {{reportData.title}} <span>{{reportData.created_at}}</span> </h2>
                  <div class="img">
                    <img src="{{authSer.pathImg + singleImg.photo}}" />
                  </div>
                  <div class="reprtDetail-w">
                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-6">
                        <div class="socialMedia-w">
                          <ul class="list-unstyled saredLinks-w" style="float:right;">
                            <li><button class="facebook" ceiboShare  [facebook]="{u: repoUrl}"><i class="fab fa-facebook-f"></i></button></li>
                            <li><button class="linkedin" ceiboShare  [linkedIn]="{url:repoUrl}"><i class="fab fa-linkedin-in"></i></button></li>
                            <li><button class="googleplus" ceiboShare  [googlePlus]="{url:repoUrl}"><i class="fab fa-google-plus-g"></i></button></li>
                            <li> <button class="whatsapp"> <a href="{{'http://example.org/?test=' + url}}"><i class="fab fa-whatsapp"></i></a></button></li>
                            <li><button class="twitter" ceiboShare  [twitter]="{url:repoUrl, text:'Checkout this awesome ng2 social share directive', hashtags:'angular2, social, ceiboIT'}"><i class="fab fa-twitter"></i></button></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-12">
                  <div class="descriptionBody-w">
                    <p [innerHTML]="reportData.description"></p>
                  </div>
                </div>
    
                <div class="col-12">
                  <div class="imagesBody-w">
                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-6" *ngFor="let image of reportData.photos; let i = index">
                        <div class="imageNews">
                          <img src="{{authSer.pathImg + image.photo}}"> 
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
              </div>

              <div class="col-12 col-sm-12 col-md-3">
                <div class="items inside_links">
                  <ul>
                    <li *ngFor="let externalSer of externalService; let i = index">
                      <a href="{{externalSer.link}}">
                        <img src="{{authSer.pathImg + externalSer.photo}}" />
                        <span>{{externalSer.name}}</span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>

           

            </div>
        </ng-template>

        <ng-template #englishTemplate>
          <div class="row" style="direction:ltr">
            <div class="col-12 col-sm-12 col-md-8">
              <div class="firstReport-w">
                <h2 style="text-align:left"> {{reportData.title_en}} <span>{{reportData.created_at}}</span>  </h2>
                <div class="img">
                  <img src="{{authSer.pathImg + singleImg.photo}}" />
                </div>
                <div class="reprtDetail-w">
                  <div class="row">
                    <div class="col-6">
                      <div class="socialMedia-w">
                        <ul class="list-unstyled saredLinks-w" style="text-align: left; direction: ltr;float: left !important;width:100%">
                          <li><button class="facebook" ceiboShare  [facebook]="{u: repoUrl}"><i class="fab fa-facebook-f"></i></button></li>
                          <li><button class="linkedin" ceiboShare  [linkedIn]="{url:repoUrl}"><i class="fab fa-linkedin-in"></i></button></li>
                          <li><button class="googleplus" ceiboShare  [googlePlus]="{url:repoUrl}"><i class="fab fa-google-plus-g"></i></button></li>
                          <li> <button class="whatsapp"> <a href="{{'http://example.org/?test=' + url}}"><i class="fab fa-whatsapp"></i></a></button></li>
                          <li><button class="twitter" ceiboShare  [twitter]="{url:repoUrl, text:'Checkout this awesome ng2 social share directive', hashtags:'angular2, social, ceiboIT'}"><i class="fab fa-twitter"></i></button></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-12 col-sm-12 col-md-4">
              <div class="items inside_links eninside_links" style="margin-top:0">
                  <div class="items inside_links">
                      <ul>
                        <li *ngFor="let externalSer of externalService; let i = index">
                          <a href="{{externalSer.link}}">
                              <img src="{{authSer.pathImg + externalSer.photo}}" />
                            <span>{{externalSer.name_en}}</span>
                          </a>
                        </li>
                      </ul>
                    </div>
              </div>
            </div>

            <div class="col-12">
              <div class="descriptionBody-w">
                <p style="text-align:left" [innerHTML]="reportData.description_en"></p>
              </div>
            </div>

            <div class="col-12">
              <div class="imagesBody-w">
                <div class="row">
                  <div class="col-12 col-sm-12 col-md-6" *ngFor="let image of reportData.photos; let i = index">
                    <div class="imageNews">
                      <img src="{{authSer.pathImg + image.photo}}"> 
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </ng-template>
      </div>
  </div>
</div>