Implement order select and display using document.querySelectorAll in Angular

This is a part of an e-commerce app in which customers can select an order and go to checkout. A group of similar buttons that have a data- attribute, with respective extensions to data-something. I am able to implement this well in JavaScript and Html 5. I want to know how to achieve exactly the same using Angular.
Here I only show a small part of HTML code to maintain simplicity.

        <div class="financials oriental">
          <div class="pf-icons">
            <i class="fab"></i>
          </div>

          <table>
            <caption class="text-white">
              Package Brand & Details.
            </caption>
            <thead>
              <tr>
                <th colspan="2">
                  <h2 class="product-header">Aladdin Basic</h2>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><h3 class="table-key text-white">Minimum</h3></td>
                <td>
                  <h3 class="table-value min-amount text-white">K 50</h3>
                </td>
              </tr>
              <tr>
                <td><h3 class="table-key even">Maximum</h3></td>
                <td><h3 class="table-value even max-amount">Unlimited</h3></td>
              </tr>
              <tr>
                <td><h3 class="table-key text-white">Interest</h3></td>
                <td>
                  <h3 class="table-value text-white percentage-earning">
                    100% in 48Hrs.
                  </h3>
                </td>
              </tr>
            </tbody>
          </table>

          <button data-plan="aladdin">Select Plan</button>
        </div>

Below is JavaScript I wish to implement in Angular,

// Select Plan Logic
    const planButtons = document.querySelectorAll("button[data-plan]");

    planButtons.forEach((button) => {
      button.addEventListener("click", (e) => {
        const button = e.currentTarget;
        const container = button.parentNode;
        const grandParent = container.parentNode;

        const plan = {
          id: button.getAttribute("data-plan"),
          containerClassList: container.getAttribute("class"),
          // iconClasses: container.querySelector(".fas").getAttribute("class"),
          title: container.querySelector(".product-header").innerText,
          minAmount: container.querySelector(".min-amount").innerText,
          maxAmount: container.querySelector(".max-amount").innerText,
          percentageEarning: container.querySelector(".percentage-earning")
            .innerText,
        };

        localStorage.setItem("plan", JSON.stringify(plan));

        const url = window.location.href.split("dashboard", 1)[0];
        window.location.href = `${url}plan`;
      });
    });

    displayOrder = () => {
      const order = localStorage.getItem("plan");
      const submitInput = document.getElementById("submittedAmount");
      const planInput = document.getElementById("plan");

      if (order) {
        const packageOrder = JSON.parse(order);

        const package = document.querySelector(".financials");

        const title = package.querySelector(".product-header"),
          icon = package.querySelector(".fas"),
          minAmount = package.querySelector(".min-amount"),
          maxAmount = package.querySelector(".max-amount"),
          percentageEarning = package.querySelector(".percentage-earning"),
          duration = package.querySelector(".duration");

        package.setAttribute("class", `${packageOrder.containerClassList}`);
        icon.setAttribute("class", `${packageOrder.iconClasses}`);
        title.innerText = packageOrder.title;
        minAmount.innerText = packageOrder.minAmount;
        maxAmount.innerText = packageOrder.maxAmount;
        percentageEarning.innerText = packageOrder.percentageEarning;

        whitenText = () => {
          // Make Text White for Package visibility
          const dataArr = document.querySelectorAll("h3");

          dataArr.forEach((item) => {
            item.classList.add("text-white");
          });
        };

        if (title.innerText === "PP1") {
          planInput.value = "pp1";
          submitInput.setAttribute("placeholder", "Enter amount 100");
          whitenText();
        } else if (title.innerText === "PP2") {
          planInput.value = "pp2";
          submitInput.setAttribute("placeholder", "Enter amount 200");
        } else if (title.innerText === "PP3") {
          planInput.value = "pp3";
          submitInput.setAttribute("placeholder", "Enter amount 500");
          whitenText();
        } else if (title.innerText === "SP1") {
          planInput.value = "sp1";
          submitInput.setAttribute("placeholder", "Enter amount 200");
          whitenText();
        } else if (title.innerText === "UP1") {
          planInput.value = "up1";
          submitInput.setAttribute("placeholder", "Enter amount 500");
          whitenText();
        } else if (title.innerText === "UP2") {
          planInput.value = "up2";
          submitInput.setAttribute("placeholder", "Enter amount 1000");
          whitenText();
        } else if (title.innerText === "UP3") {
          planInput.value = "up3";
          submitInput.setAttribute("placeholder", "Enter amount 2000");
          whitenText();
        }
      }
    };

    if (urlPath === "/plan") {
      displayOrder();
    }