javascript – Page 4677 – Blancer.com Tutorials and projects

Tabla en html a partir de JSON [closed]

Quisiera saber cómo crear una tabla con HTML, también como colocar datos de un archivo JSON dentro de esta con javascript, además como darle el formato de tabla con css.

No conseguí relacionar los datos de JSON con la traba.

Onclick Send Event JS Being Removed From Template When Rendering

I’ve added an onclick event to the hits item template but when it renders the onclick JS is missing. It seems to be getting stripped as the rest of the button renders correctly.

instantsearch.widgets.hits({
    container: "#hits",
    templates: {
        item: (hit, { html, sendEvent }) => html`
            <div class="product" data-id="${hit.objectID}">
                <a href="${hit.url}">
                    <img
                        src="${hit.thumbnail
                            ? hit.thumbnail
                            : "/wp-content/uploads/woocommerce-placeholder-150x150.png"}"
                        align="left"
                        alt="${hit.title}"
                    />
                </a>
                <div class="hit-name">
                    <h4>${hit.title}</h4>
                    <p>${hit.content}</p>
                    <button class="btn btn-primary"
                        onclick="${() =>
                            sendEvent("click", hit, "my-click-event")}"
                    >
                        Click event
                    </button>
                </div>
            </div>
        `,
        empty: "<div>No results have been found for {{ query }}</div>",
    },
}),

Any ideas why it’s removing my JS?

Need help identifying the underlying plot of a website for scraping purposes (selenium stopped working, only workable with JavaScript execution )

I’ve been running a python script to extract items we purchased from a website(so it’s behind the login page. We can download them as a file but it’s missing certain details) for more than a few years now, but it suddenly stopped working.

To fix it I’m encountering some challenges in understanding its behavior. I’m seeking assistance in identifying the underlying plot or structure of the website, particularly with regards to the following aspects:

I have to open the page with JavaScript Execution: The desired page seem to be accessible only after executing JavaScript code, specifically javascript:linkOpen(). Without this step, it forces the client to redirect to its top page.
URL Changes: After the initial page load, the website appends a string, such as #list_0_****, to the end of the URL. I’m curious about the purpose and significance of this URL modification.
Element Accessibility: Although the desired elements such as /html/body/div[1]/table/tbody/tr/td[1]/div/div[12]/table/tbody/tr/td/table/tbody/tr[1]/td[1]/form/select are present in the page source inspector and can also be identified in the output of driver.page_source, I’m still unable to locate them with Selenium selectors. I suspect that the website developer may have implemented some techniques or structures that make the elements inaccessible through traditional means. So far only way to access it I’ve found is to access it via JavaScript.
(*As you can see in the above full path it’s not in another frame. I checked this multiple times.Event the top most element in the page is inaccessible)

So I developed a function to make it feel like its usual Selenium selector.

def execute_js_action(action, target, value=None):
    if action == "find_by_id":
        js_code = f"return document.getElementById('{target}');"
    elif action == "find_by_xpath":
        js_code = f"return document.evaluate('{target}', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;"
    elif action == "read_selected":
        js_code = f"return document.getElementById('{target}').options[document.getElementById('{target}').selectedIndex].value;"
    elif action == "select_option":
        js_code = f"document.getElementById('{target}').value = '{value}';"
    elif action == "click_element":
        js_code = f"document.getElementById('{target}').click();"
    else:
        raise ValueError("Invalid action provided.")

    return driver.execute_script(js_code)

Any insights or workarounds for accessing these elements with traditional selenium selector would be greatly appreciated.

Is there a way to detect KeyPress events in address bar AND document body in Google Chrome Extensions?

I’m trying to write a chrome extension that plays a sound every time a key is pressed in the browser (whether that’s inside the document of a website, in the chrome address bar, or in about:blank). I’m trying to find something in the Chrome Extension API to get an eventlistener or something I can attach an event listener to. Does such a thing exist?

Initially, I tried just injecting the following into content scripts of every website I came across.

document.addEventListener("keypress", () => {
    //Insert sound playing code here
});

However, the event listener did not fire for about:blank and when typing in the chrome address bar.

I then tried using chrome.input.ime. However, it apparently doesn’t work (deprecated?) for manifest v3.

Receiving error when making a axios POST request in a twilio function to USAePAY API

I’m making a POST request using axios to create a recurring schedule with the USAePAY API in a TWILIO function.

Everything was working fine, till I edited a drop of the code and seemed to have tripped something.

I keep getting the following error Failed to create '[object]' due to invalid data
It seems like there’s something wrong with the object, but I never edited that part.

Here is my function code any insights appreciated:

exports.handler = async function (context, event, callback) {
  //import hash and http request libraries
  const sha256 = require("sha256");
  const axios = require("axios");

  //get auth token
  const seed = context.USAePAY_API_SEED;
  const apikey = context.USAePAY_API_KEY;
  const apipin = context.USAePAY_API_PIN;
  const prehash = apikey + seed + apipin;
  const apihash = "s2/" + seed + "/" + sha256(prehash);
  const authKey = Buffer.from(apikey + ":" + apihash).toString("base64");
  const authorization = "Basic " + authKey;

  /////////////////////////////////////////////////////////////////////////////////////////////

  //create formated dates for today and next month for billing schedule
  const today = new Date();

  //get today of east coast
  const todayLocal = today.toLocaleDateString("en-US", {
    timeZone: "America/New_York",
  });
  //convert today string into date object
  const localObj = new Date(todayLocal);
  //format date object to YYYY-MM-DD
  const todayFormated = localObj.toISOString().slice(0, 10);

  // Switch the date object to the upcoming month
  const nextMonth = new Date(
    localObj.getFullYear(),
    localObj.getMonth() + 1,
    1
  );

  //Then set with same date of month as today
  const nextMonthSameDay = new Date(
    nextMonth.getFullYear(),
    nextMonth.getMonth(),
    localObj.getDate()
  );

  // Convert the next month's date to a string in YYYY-MM-DD format
  const nextMonthSameDayFormated = nextMonthSameDay.toISOString().slice(0, 10);

  /////////////////////////////////////////////////////////////////////////////////////////////

  const amount = event.amount;
  const rawAmount = amount + "-";
  const cleanAmount = rawAmount.replace(/[- /,$]/g, "");
  const chargeAmount = cleanAmount + ".00";

  const desc = "Charge Description";
  const cust = event.custKey;
  const paymentMethodUrl =
    "https://secure.usaepay.com/api/v2/customers/" + cust + "/payment_methods";

  const response = await axios.get(paymentMethodUrl, {
    headers: { Authorization: authorization },
  });
  const list = response.data;
  const method = list.data[0].key;
  console.log(list);
  console.log(method);

  //USAePAY billing schedule endpoint
  const scheduleUrl =
    "https://usaepay.com/api/v2/customers/" + cust + "/billing_schedules";

  //create recurring schedule object from variables
  const recurrData = {
    amount: chargeAmount,
    paymethod_key: method,
    description: desc,
    enabled: true,
    frequency: "monthly",
    next_date: nextMonthSameDayFormated,
    numleft: "11",
    start_date: todayFormated,
    skip_count: "1",
    rules: [
      {
        day_offset: "1",
        month_offset: "0",
        subject: "Day",
      },
    ],
  };
  try {
    const reccResponse = await axios.post(scheduleUrl, recurrData, {
      headers: { Authorization: authorization },
    });

    var msg;
    if (reccResponse.data[0].key) {
      msg =
        "Your recurring charge of $" +
        chargeAmount +
        " was successfully scheduled";
    } else {
      msg =
        "Sorry your recurring charges could not be scheduled, please reach out to a representative";
    }

    reccResponse.data[0].reply = msg;

    const result = reccResponse.data;

    callback(null, result);
  } catch (error) {
    console.log(error.response.data.error);
    const errMsg =
      "we're sorry an error occurred while setting up your recurring payment.";
    callback(null, errMsg);
  }
};

Node js redis using child_process to manage queue windows process

I have a question about redis using node js, my idea is to create an Orchestrator for my RPA (Robotic Process Automation) bots with a dashboard using websocket, I would like to know if it is right to command the queues using redis with bull and at the same time using child_process from node js to run the bots processes on my machine, or is there any other library that does this?

Sorry if its confuse

Collapsible conent inside collapsible content not pushing down

My issue is when i expand the header from the first list i want content inside that includes more headers that can expand too but right now when i expand the second header that’s inside the first, you cant see the content.

I think I know whats wrong but don’t know how to fix it.

Because the 2nd header is inside the 1st header when i click to expand the 2nd, its content is showing behind the rest of the list of first headers. I want it to push the list of first headers down so I can see the content of the second header. I think its doing this because If i keep the second header open and then close the 1st header and re-open it the 2nd header now shows its content and expands/closes the way i wanted it to.

Im assuming this has something to do with the script im using as its a click function based on scrollheight so its only picking up the new scroll height after i click the 1st header a second time (to close and re-open it) while the 2nd header is open.

Here’s some reference code not actually from my project but showing the same issue.

.card01{
    width: 47%;
    height: auto;
    position: relative;
    display: inline-block;
    margin-top: 20px;
    vertical-align: top;
    min-height: 220px;
    background: rgb(255, 255, 255);
}
.content {
    max-height: 0px;
    padding: 0px 18px;
    overflow: hidden;
    transition: max-height 0.2s ease-out 0s;
}


<div class="card01">
  <div class="collapsible">
    <div class="image"><img src="/images/people/" /></div>
    <div class="interview">This is a short description</div>
  </div>
  <div class="content">
    <p>This is a long description. This is a long description. This is a long description</p>
    <div class="collapsible">
    <div class="image"><img src="/images/people/" /></div>
    <div class="interview">This is the second header that isnt working</div>
  </div>
  <div class="content">
    <p>This is a long description. This is a long description. This is a long description</p>
    <div class="padding10">&nbsp;</div>
  </div>
    <div class="padding10">&nbsp;</div>
  </div>
  <div class="collapsible">
    <div class="image"><img src="/images/people/" /></div>
    <div class="interview">This is a short description</div>
  </div>
  <div class="content">
    <p>This is a long description. This is a long description. This is a long description</p>
    <div class="padding10">&nbsp;</div>
  </div>
</div>

<div class="card01">
  <div class="collapsible">
    <div class="image"><img src="/images/people/" /></div>
    <div class="interview">This is a short description</div>
  </div>
  <div class="content">
    <p>This is a long description. This is a long description. This is a long description</p>
    <div class="padding10">&nbsp;</div>
  </div>
  <div class="collapsible">
    <div class="image"><`img src`="/images/people/" /></div>
    <div class="interview">This is a short description</div>
  </div>
  <div class="content">
    <p>This is a long description. This is a long description. This is a long description</p>
    <div class="padding10">&nbsp;</div>



  <script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var content = `this.nextElementSibling;`
    if `(content.style.maxHeight)` {
        content.style.maxHeight = null;
    } else {
        `content.style.maxHeight = content.scrollHeight + "px";`
    }
});
}
</script>

How can I allow downloading of files inside my android webview app?

I need to make my android webview app be able to download files when the download is initiated by code on the webpage.

I am not at all familiar with android app development, or Java for that matter, so please have patience. On my webpage that the webview app accesses, there is javascript code that initiates a download using a blob object, like so:

let blob = new Blob([filestring]);
let downloadUrl = URL.createObjectURL(blob);
let link = document.createElement('a');
link.href = downloadUrl;
link.download = currentpage + '.csv';
link.click();
URL.revokeObjectURL(downloadUrl);

I have tried to allow the download to work inside of the webview application, but when I pressing the button that runs the above javascript code on the page, the webview application crashes. I cannot figure out why this doesn’t work.

Here is the MainActivity.java file:

package com.example.stockapptestbeta;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.CookieManager;
import android.webkit.DownloadListener;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.app.DownloadManager;
import android.webkit.URLUtil;
import android.os.Environment;

public class MainActivity extends AppCompatActivity {

    private WebView mywebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mywebView=(WebView) findViewById(R.id.webview);
        mywebView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        mywebView.getSettings().setUserAgentString("Mozilla/5.0 (StockAppAndroid) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/107.0.5304.105 Mobile Safari/537.36");
        mywebView.loadUrl("http://192.168.0.22");
        mywebView.setDownloadListener(new DownloadListener() {
            @Override
            public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimeType, long contentLength) {
                DownloadManager.Request request = new DownloadManager.Request(Uri.parse(url));
                request.setMimeType(mimeType);
                String cookies = CookieManager.getInstance().getCookie(url);
                request.addRequestHeader("cookie", cookies);
                request.addRequestHeader("User-Agent", userAgent);
                request.setDescription("Downloading file");
                request.setTitle(URLUtil.guessFileName(url, contentDisposition, mimeType));
                request.allowScanningByMediaScanner();
                request.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);
                request.setDestinationInExternalPublicDir(Environment.DIRECTORY_DOWNLOADS, URLUtil.guessFileName(url, contentDisposition, mimeType));

                DownloadManager dm = (DownloadManager) getSystemService(DOWNLOAD_SERVICE);
                dm.enqueue(request);
            }
        });
        WebSettings webSettings=mywebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }

    public class mywebClient extends WebViewClient {
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view,url,favicon);
        }
        public void onPageFinished(WebView view, String url, Bitmap favicon) {
            super.onPageFinished(view,url);
            CookieManager.getInstance().flush();
        }
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
    @Override
    public void onBackPressed() {
        if (mywebView.canGoBack()) {
            mywebView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

And here is the AndroidManifest.xml file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission>

    <application
        android:allowBackup="true"
        android:configChanges="orientation|screenSize"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.StockAppTestBeta"
        android:usesCleartextTraffic="true"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
            >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

            <meta-data
                android:name="android.app.lib_name"
                android:value="" />
        </activity>
    </application>

</manifest>

Does anybody know how to make this download functionality work? Thanks for taking the time to read my question.

Page render in recursive loop throws Error: Too many re-renders

I have page with few forms components as defined below, everything in front works fine, however if I look my console logs the function Fetchmovies is continuously being executed and throws

caught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Even without error this is undesirable I don’t want to make hundreds of calls to the API url. My requirment is just to call the Fetchmovies function once the page loads first time and update Autocomplete component with the returning array. ButI am not sure, why my page is rendered recursively.

import React, { useState } from 'react';

function GetMovies() {
  var [movies_list, setMovies_list] = useState([]);

  async function Fetchmovies() {

    try {
      movies_list = await fetch(url, {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'authorization':'token'
        },
      }).then(response => movies_list = response.json());
      console.log(movies_list);
    } catch (e) {
      console.log(e);
    }
  }
  Fetchmovies().then(setMovies_list(movies_list));

  return (
    <Card>
      <Divider />
      <CardContent>
            <Autocomplete
              id='movies'
              name='movies'
              getOptionLabel={(movies_list) => movies_list.service_name}
              multiple
              options={movies_list}
              renderInput={(params) => <TextField {...params} label='Impacted movies:' />}
            />
      </CardContent>
    </Card>
  );

}
export default GetMovies;

plot constant Y for date range on Xaxis

I want to know if there is a method in any of the plotting react libraries where I can provide a start and end date for a timeseries on x axis and constant y value for that range. I dont want to generate data for each day between the start and end date because of huge amount of data.

I am expecting something similar to hlines in matplotlib

Base64 encoded PDF upload keeps being stored as text instead of as file

I am trying to send a PDF file through multipart/form-data to Box.com’s API. The PDF data is encoded in Base64. Since my module is being run through the GraalVM, which is setup in a way that node’s built-in modules are blocked, I have to create the form-data payload from scratch.

The main issue that I am having is that the PDF keeps being stored as text and not being decoded back into a binary file.

Here’s my code:

const testFile = file.load(321321654)

    const boundary = 'ikjbhciuydgwyigdchbwikcbjlikwudhqcviudgwvcihblh'

    const header = {
        'Content-Type': 'multipart/form-data; boundary=' + boundary,
        'Authorization': 'Bearer XXXXXXXXXXXXXXXXXXXXXXXXXX'
    }

    const body = []
    body.push('--' + boundary)
    body.push('Content-Disposition: form-data; name="attributes"');
    body.push('')
    body.push(JSON.stringify({name: testFile.name, parent: { id: 12216548 }}))
    body.push('--' + boundary)
    body.push('Content-Disposition: form-data; name="testfile"' + '; filename="' + testFile.name + '"')
    body.push('content-type: application/pdf;charset=UTF-8')
    body.push('Content-Transfer-Encoding: BASE64')
    body.push('')
    body.push(testFile.getContents())
    body.push('--' + boundary + '--')
    body.push('')

    const result = https.post({
        url: 'https://upload.box.com/api/2.0/files/content',
        headers: header,
        body: body.join('rn')
    })

The results of the body.join is:

–ikjbhciuydgwyigdchbwikcbjlikwudhqcviudgwvcihblh
Content-Disposition: form-data; name=”attributes”

{“name”:”Get Started with Box.pdf”,”parent”:{“id”:207753393458}}
–ikjbhciuydgwyigdchbwikcbjlikwudhqcviudgwvcihblh
Content-Disposition: form-data; name=”file”; filename=”Get Started with Box.pdf”
content-type: application/pdf;charset=UTF-8
Content-Transfer-Encoding: BASE64

JVBERi0xLjMKJcTl8uXrp/Og0MTGCjQgMCBvYmoKPDw………
–ikjbhciuydgwyigdchbwikcbjlikwudhqcviudgwvcihblh–

Unfortunately, the file is loaded into box, but to decoded back to a PDF binary. It’s just a text file of the Base64 string.

I have tried this with a local express server that I created and have a similar issue when using the Multer package to handle a multipart/form-data upload. Oddly, when I switch to the Formidable package it works just fine with my above code.

Does anyone have any suggestions as to what may be happening?

How To Decrypt JavaScript Encryption

I try beautifier the code but got error

This The Code, I have been tried beautify and error

how can I use Intl.dateTimeFormat to display the value of a timestamp across four time zones in standard time?

I have timestamps that I’d like to be able to display in a user given time zone. I’m noticing that even when using a dedicated library like date-fns-tz it seems to return values that don’t make sense.

Under the hood they apparently use Intl, and when I use that module it doesn’t seem to provide the correct value.

const zones = ["PST", "MST", "CST", "EST"]
zones.forEach(timeZone => 
console.log(new Intl.DateTimeFormat('en-US', { timeZone, timeStyle: "full", dateStyle: "full"}).format(1588743894000)))

This outputs:

Tuesday, May 5, 2020 at 10:44:54 PM Pacific Daylight Time
Tuesday, May 5, 2020 at 10:44:54 PM GMT-07:00
Wednesday, May 6, 2020 at 12:44:54 AM Central Daylight Time
Wednesday, May 6, 2020 at 12:44:54 AM GMT-05:00

But shouldn’t this be four different values?

File input loses upload handler function in React

I have a simple form with file input and a state with an error flag. If the user tries to submit the form without a file, the error flag is set to true. After that, useEffect in the error component triggers a timeout that will set the error flag to false after 3 seconds. If the user opens the download window before the error flag becomes false, the download function no longer works.

My Home component:

const Home = () => {
  const [file, setFile] = useState<File | null>(null)
  const [error, setError] = useState<boolean>(false)

  const onUploadFile = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setFile(event.target.files?.[0] || null)
  }, [])

  const onSubmit = (event: FormEvent) => {
    event.preventDefault()
    if (!file) {
      setError(true)
      return
    }
    console.log(file.name)
  }

  return (
    <div className="container">
      <form onSubmit={onSubmit} className="form">
        <input type={'file'} accept={'.txt,.zip,.csv,.xlsx'} onChange={onUploadFile}/>
        {file && <p>{file.name}</p>}
        <button type={'submit'}>Submit</button>
      </form>
      {error && <Error message={'Error'} close={setError}/>}
    </div>
  )
}

My error component:

interface ErrorProps {
    message: string
    close: Dispatch<SetStateAction<boolean>>
}

const Error:FC<ErrorProps> = ({message, close}) => {

  useEffect(() => {
    const timerId = setTimeout(() => close(false), 3000)

    return () => {
      clearTimeout(timerId)
    }
  }, [])
  return (
    <div className="error">
      <p>{message}</p>
      <p style={{cursor: "pointer"}} onClick={() => close(false)}>&times;</p>
    </div>
  )
}

I guess that while the upload window is open and timeout calls setState function, Home component is re-rendered and upload function recreated, but input tag save a pointer on a previos function. I tried to pass upload function in useCallback in the hope that the reference to the function will be permanent, but it`s not working. What can I do?

ngAfterViewInit() is not woking as it suppose to work In Angular 15

Image for clarification

I am Using Primeng Library and Angular 15,
I am trying to initialize the color and size, and quantity fields, But it is not working here is my code
for the color

 <div class="d-inline-flex"   #input id="bdiv"
   *ngFor="let item of productColor; let x = index" (change)="sizeAvaliable(color,x)">

   <input #input class="form-check-input  d-none" type="radio" name="inlineRadioOptions"  
             id="inlineRadio{{x+1}}" value={{item.colorID}} [(ngModel)]="color"  >
                    <label class="form-check-label" for="inlineRadio{{x+1}}">
                       <img   class="rounded-circle pic" src="/assets/Swatch/{{item.colorValue}}.jpg"
                              alt="{{item.colorValue}}"
                              style="height: 2.375rem;width: 2.375rem; padding: 1px;" id="pic{{x}}" >
                    </label>

 </div>

This is the data of productColor that comes from an API

(2) [{…}, {…}]
0: {colorID: 1, colorValue: 'Black'}
1: {colorID: 2, colorValue: 'Navy'}

color is Propery in ts public color = 1;

When the user chooses the color I call a function to load the available sizes with its quantities

sizeAvaliable(productID:number ,colorID:number, x:number){
  //to add the golden boarder
  document.querySelectorAll(".pic").forEach(pic=> pic.classList.remove('picked'))
  document.getElementById(`pic${x}`)?.classList.add('picked')

  //reset quanity 
  this.quantity = 1;
  this.productEntryService.getAvaliableSizes(productID, colorID).subscribe(p => {
    //Displaying the name of selected color
    this.colorName = p[0].color.colorValue
    //Showing the avalaible sizes of that product with that color
    p.sort((a,b)=> a.sizeID-b.sizeID)
    this.productSizes = p
    this.size = p[0].sizeID
 })
 this.qty=1;
}

So I am even trying to initialize the size and quantity fields but with no use
I tried ngAfterViewInit() with set timeout to select the first element of color
but I don’t want to use set timeout without it returned Undefined (it is not rendered yet)
here is the code

ngAfterViewInit(){
window.setTimeout(()=>document.getElementById('inlineRadio1')?.click(),1000 )
}

another way is to use ngAfterViewChecked() lifetime hook When I log the element It returned Undifiened for the first 4 logs
and after that, it log the element
But I don’t want to use it as it triggers after any change happen