Create Custom Social Share Buttons in angular

I will appreciate any ideas and support for this issue

I have an angular project and I try to create icons share buttons for social media.
I have a component named landing.component. in the HTML file I implemented a Modal popup to allow showing a new windows where I have the icons. Please, follow screenshots below

Below, is the new windows

the HTML code is here

<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>

In the facebook option, I created a variable #facebook that will allow me to use viewchildren in the ts file to do an elementref and find the element in the DOM.
In the viewchildren option, I created a variable link1.

then, in the ngAfterViewInit I created two variables url and title. the url variable will take the link of my page to be share and the title is just message.
Finally, I used this command:

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

(this is what I believe is the same in js document.location.href) but used in ts

The code is not working, basically when I click the facebook icon only close the windows and that's it and the web shows me this error here bbelwo:

the landing. component.ts code is here below:

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}`;
		}
	}

}

I really appreciate any help

Regards

First it is a different between @ViewChild and @ViewChildren. The first will search one element, the second multiple elements. So in your case use @ViewChild("facebook") link1: any;

But a better approach is to let Angular do this thing and don't use setAttribute to the native element. So you can bind anything to the href attribute like this:

HTML

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

Code

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

You can generate the links with a ngFor loop, too for more flexibility.

CODE

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

HTML

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