<div class="card-wrapper" fxLayout="row wrap" fxLayoutAlign="start start">
  <div
    class="card active-card"
    fxFlex="25"
    *ngFor="let category of categories"
    (click)="categoryClick(category)"
  >
    <picture>
      <img [src]="category.imageLocation" />
    </picture>
    <div class="card-overlay" fxLayout="row wrap" fxLayoutAlign="center end">
      <span class="card-title" fxFlex="100">{{ category.title }}</span>
      <div class="card-buttons" fxFlex="100" fxLayout="row">
        <ul class="list-inline text-center member-icons ">
          <li class="list-inline-item">
            <button mat-icon-button disableRipple class="btn btn-primary" routerLink="/mtl"  (click)="open(content)"><i class="fa-solid fa-share"></i></button>
          </li>
          <span fxFlex></span>
        </ul>
        <!-- <button mat-icon-button disableRipple>
          <heart-icon></heart-icon>
        </button> -->
        <!-- <span fxFlex></span> -->
        <!-- <button mat-icon-button disableRipple> -->
          <!-- <download-icon></download-icon> -->
       <!--  </button> -->
      <!--   <button mat-icon-button disableRipple>
          <share-icon></share-icon>
        </button> -->
      </div>
    </div>
  </div>
</div>
<section
  class="cragcity-container p-t-5"
  fxLayout="row"
  fxLayoutAlign="space-between start"
>
  <div style="margin: auto">
    <img class="socmed-icon m-r-15" src="./assets/icons/facebook.webp" />
    <img class="socmed-icon m-r-15" src="./assets/icons/skype.webp" />
    <img class="socmed-icon" src="./assets/icons/instagram.webp" />
  </div>
</section>
<ng-template #content let-modal>
	<div class="modal-header">
		<h4 class="modal-title" id="modal-basic-title">Share Social Media</h4>
		<button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
	</div>
	<div class="modal-body">
    <form>
			<div class="mb-3">
				<label for="Social Media"></label>
        <div class="share-btn-container">
          <a #facebook href="#" class="facebook-btn">
            <i class="fab fa-facebook"></i>
          </a>
          <a href="#" class="twitter-btn">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="#" class="pinterest-btn">
            <i class="fab fa-pinterest"></i>
          </a>
          <a href="#" class="linkedin-btn">
            <i class="fab fa-linkedin"></i>
          </a>
          <a href="#" class="whatsapp-btn">
            <i class="fab fa-whatsapp"></i>
          </a>
        </div>
				<!-- <div class="input-group">
					<input
						name="dp"
						ngbDatepicker
						#dp="ngbDatepicker"
					/>
					<button class="btn btn-outline-secondary bi bi-calendar3" (click)="dp.toggle()" type="button"></button>
				</div> -->
			</div>
		</form>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Close</button>
	</div>
</ng-template>
<app-cragcity-footer></app-cragcity-footer>

this.link1.nativeElement.setAttribute("href",`https://www.facebook.com/sharer.php?u=${this.url}`)

import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit, ViewChildren } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { DataService } from 'src/app/core/services/data.service';
import { category } from '../models/category';
import { ModalDismissReasons, NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.scss']
})
export class LandingComponent implements OnInit, AfterViewInit {
  public categories = new Array<category>();
  @Input() name;
  url:string;
  title:string;
  closeResult: string | undefined;
  constructor(private _dataService: DataService, private router: Router, private modalService: NgbModal, private route: ActivatedRoute) {
  }
  ngOnInit(): void {
    this.retrieveCategories();
  }
  @ViewChildren("facebook")link1: ElementRef;
  ngAfterViewInit() {
    this.url = this.router.url;
    /* this.link1.nativeElement = this.url; */
    this.title = encodeURI("Facebook");
    this.link1.nativeElement.setAttribute("href",`https://www.facebook.com/sharer.php?u=${this.url}`)
    /* console.log(this.link1);
    console.log(this.url);
 */
    /* this.link1.nativeElement.setAttribute('xlink:href') */
  }
  retrieveCategories() {
    const actionUrl = 'v1/category';
    const params = {};
    this._dataService.get<any>(actionUrl, params)
      .subscribe(data => {
        if (data !== null) {
          if (!data.isError) { this.categories = data.result; }
        }
      });
  }
  categoryClick(data: category) {
    if (data.subCategory.length > 0)
      this.router.navigate(['mtl', data.id]);
  }
  open(content) {
		this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(
			(result) => {
				this.closeResult = `Closed with: ${result}`;
			},
			(reason) => {
				this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
			},
		);
	}
  private getDismissReason(reason: any): string {
		if (reason === ModalDismissReasons.ESC) {
			return 'by pressing ESC';
		} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
			return 'by clicking on a backdrop';
		} else {
			return `with: ${reason}`;
		}
	}
}

<a #facebook [href]="facebookLink" class="facebook-btn">
  <i class="fab fa-facebook"></i>
</a>

facebookLink: string = "https://facebook.com";

linkObjects = [{iconClassI: "fab fa-facebook", iconClassA: "facebook-btn", link: "http://facebook.com"}, {... all other links}]

<div class="share-btn-container">
  <a *ngFor="let item of linkObjects" [href]="item.link" [class]="item.iconClassA">
    <i [class]="item.iconClassI"></i>
  </a>
</div>