Category: javascript

I’m relatively new to React and Next.js and am currently developing a web application for property rentals and sales. I’m seeking advice on the best approach for handling location selection. Would it be more effective to use an API that returns suggestions including both town and county, or to define enums for counties and towns within the application?

I have been working on a quiz project.There i was getting a problem like changes were done without being explicitly by me and again the right code then also i was appearing like before.So,i need a solution from an expert to overcome the situation.

I tried to push the code right code to the github and some data in the files were changing implicitly so iam expecting the right code which is in my local storage to be pushed into the github.

I have a component for a card with a couple of properties that all work fine one of the properties is a call to a database that fetches some links.

Every card has either none or a few links.
So I am using the card component like this:

{
  laureates.map((item) => (
    <PeopleCard
      title={item.laureates?.title}
      content={item.content}
      links={item.laureates?.links}
     />
  ))
}

And inside the PeopleCard component i have the card itself with {title} and {card}, and then I want to map over the links since there can be a few so that looks like this:

<ul>
  {
    links?.map((item) => (
      <li>
        <a href={ item?.attachment.attached === 'file' ? item.attachment.file.node.mediaItemUrl : item.attachment.url }>{item.text}</a>
      </li>
     ))
   }
</ul>

But that doesn’t work and I get an error saying “item is not defined”.
But if I do like this:

<ul>
  {
    links?.map((item) => (
      <li>
        <a href={ item?.attachment.attached === 'file' ? item.attachment.file.node.mediaItemUrl : item.attachment.url }>Just some text</a>
      </li>
     ))
   }
</ul>

or like this:

<ul>
  {
    links?.map((item) => (
      <li>
        <a href="https://google.com">{item.text}</a>
      </li>
     ))
   }
</ul>

Both of those works as expected and returns what I’m looking for, it’s only when I combine them all goes to hell and I can’t figure out why!
What am I missing?

Also my fetch query looks like this:

query getLaureates {
  allLaureates(first: 100) {
    nodes {
      title
      content
      laureates {
        links {
          attachment {
            attached
            url
            file {
              node {
                mediaItemUrl
              }
            }
          }
          text
        }
      }
    }
  }
}

import { useEffect, useRef, useState } from "react";

const HEADER_HEIGHT = 64;
const BREADCRUMBS_HEIGHT = 61;
const OFFSET = 0;

function App() {
  const stickyRef = useRef(null);
  const [isStuck, setIsStuck] = useState(false);

  useEffect(() => {
    const stickyElement = stickyRef.current as unknown as HTMLDivElement;
    if (!stickyElement) return;

    const sentinel = document.createElement("div");
    sentinel.style.height = "1px";
    sentinel.style.position = "absolute";
    sentinel.style.top = `${HEADER_HEIGHT + BREADCRUMBS_HEIGHT - OFFSET}px`;
    sentinel.style.left = "0";
    sentinel.style.right = "0";
    sentinel.style.pointerEvents = "none";
    sentinel.style.backgroundColor = "red";
    sentinel.style.border = "1px dashed red";
    sentinel.style.zIndex = "1";

    stickyElement.parentNode?.insertBefore(sentinel, stickyElement);

    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsStuck(!entry.isIntersecting);
      },
      {
        root: null,
        rootMargin: "0px",
        threshold: 0,
      }
    );

    observer.observe(sentinel);

    return () => {
      observer.disconnect();
      if (sentinel.parentNode) {
        sentinel.parentNode.removeChild(sentinel);
      }
    };
  }, []);

  return (
    <>
      <div
        style={{
          height: HEADER_HEIGHT,
          backgroundColor: "lightgreen",
          color: "#000000bd",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        Header
      </div>
      <div
        style={{
          height: BREADCRUMBS_HEIGHT,
          backgroundColor: "lightpink",
          color: "#000000bd",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        Navbar
      </div>
      <div
        ref={stickyRef}
        style={{
          backgroundColor: "lightgray",
          height: isStuck ? 60 : 300,
          position: "sticky",
          top: 0,
          transition: "height 0.3s ease",
          color: "#000000bd",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        Sticky
      </div>
      <p style={{ margin: 0, padding: 16 }}>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione
        ducimus nam a id ipsam, eum nihil minus ab dolorem exercitationem,
        praesentium tempora pariatur ullam? Asperiores optio eos consequuntur
        temporibus omnis, incidunt quia aspernatur autem mollitia. Alias
        distinctio minima, quos repellat ipsa nesciunt quisquam amet cupiditate
        perspiciatis sit optio reprehenderit esse, porro explicabo. Fuga iure,
        iste doloribus corrupti pariatur accusamus, quia aspernatur quibusdam
        facilis deserunt qui debitis accusantium consequuntur! Iusto repellendus
        rem sint voluptatibus ipsam itaque deleniti mollitia repellat ratione
        recusandae! Veritatis placeat soluta odio nihil, aliquid dolor iste
        dolorem facilis laudantium id tempora nostrum, ducimus possimus
        recusandae dicta porro enim sed sapiente explicabo incidunt repudiandae
        modi. Distinctio explicabo id, repudiandae saepe totam eligendi facere
        cum repellat voluptates aliquid adipisci quod ipsam ipsa dicta expedita
        dolor non aperiam accusamus consequuntur, maiores dolores fugit? Nam
        earum sapiente debitis! Odio exercitationem placeat iusto, nihil magnam,
        accusamus itaque nam amet culpa distinctio aliquam quis expedita
        suscipit eligendi temporibus ea aut veniam quia, ab eum labore corrupti
        cupiditate ipsa!
      </p>
    </>
  );
}

export default App;

In the above code I want to collapse the sticky section when it is stuck to the top of the viewport. To do that I used the IntersectionObserver browser API.

In your browser, open responsive mode, select iPhone SE (375px * 667px). Then if you scroll down you will see the multiple collapsing and expanding of the sticky section!

I attempted to set a guard for setIsStuck based on the height of the p tag. It works, but I don’t like this solution.
I want a clean solution that doesn’t depend on p tag section.

CodeSandbox Link

I would like to make a website display in the same way it would if the user rotated their monitor at the OS level.

The easiest way to do that (if it were supported) would be to change the coordinate system of the webpage. Any JS on the page that measures top would get shadowed to measure the physical right instead, measuring right should measure bottom, etc. Any CSS that places an element with a top value would be placing its physical right.

I would like to rotate an existing webpage 90°, while having to change as little of the existing code as possible.

I tried

:root {
    transform: rotate(90deg);
    origin: top left;
    right: 0;
    top: 0;
}

But it normally just screws up all of the rendering and JS of the site.

What could I write in the dev console on this stackoverflow webpage to get it to display as if I used my OS to rotate my monitor 90°?

I made some JS code to simulate the collision between two objects in a frictionless, dragless, and perfectly elastic world. I designed it so momentum is perfectly conserved, or so I thought, as I tested it, and there was a massive energy loss.

The first cube would move at a speed of -20, and collide with the second stationary cube. the cubes have equal mass. The speeds for both cubes are way less after the collision, with the first cube somehow retaining some of its own speed with a speed of -0.661 instead of 0, while the second cube, instead of having a speed of exactly -20, has a speed of -3.63, instead.

The directions are correct (ignoring the fact that the cubes keep some of their speed), it’s just the total momentum has a large portion lost with every collision. There are no issues with the wall collisions though.

Here is the code:

var canvas = document.getElementById('PhysicsSim');
var con = canvas.getContext('2d');
var speedC1 = -20 //speed for big cube
var speedC2 = 0 // speed for small cube
var simOn = "false"
let Mass1
let Mass2
var Bounce = 0
var MassSum = Mass1 + Mass2

document.getElementById('StartButton').onclick = function(){
    simOn = "true"
}

document.getElementById('StopButton').onclick = function(){
    simOn = "false"
}

document.getElementById('SubmitUnit').onclick = function(){
    Mass1 = document.getElementById('BigInput').value;
    Mass2 = document.getElementById('SmallInput').value;
    console.log(Mass1);
    console.log(Mass2);
    console.log(speedC2);
    console.log(speedC1);
    MassSum = Mass1 + Mass2
}

X1 = 150
X2 = 120



con.fillRect(0, 140, 300, 10);
con.fillRect(0, 0, 10, 140);


setInterval(() => {
    if (simOn == "true") {
        if ((X2 += speedC2*0.005) <= 10) {
            X2 = 10
            speedC2 = speedC2*-1
            Bounce += 1
        } else if (X1 <= X2 + 10) {
            X2 = X1 - 10
            speedC2 = ((2*Mass1)/MassSum)*speedC1 + ((Mass2-Mass1)/MassSum)*speedC2
            speedC1 = ((Mass1 - Mass2)/MassSum)*speedC1 + ((2*Mass2)/MassSum)*speedC2
            Bounce += 1
            console.log(speedC2);
            console.log(speedC1);
            console.log(Bounce);
            //put the collision logic for dual cubes here
        } else {
            X2 += speedC2*0.005
            X1 += speedC1*0.005
        }
    }
}, 5);

setInterval(() => {
    if (simOn == "true") {
    con.clearRect(0, 0, canvas.width, canvas.height);
    con.fillRect(0, 140, 300, 10);
    con.fillRect(0, 0, 10, 140);
    con.fillRect(X1, 120, 20, 20);
    con.fillRect(X2, 130, 10, 10);
    }
}, 50);

h1{
  font-size:48pt;
  font-family:Helvetica
}

.c{
  text-align:center;
}

canvas {
    border: 3px solid black;
    background: white;
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

<canvas id="PhysicsSim"></canvas>

<label><br>Big Cube Mass: </label>
<input id="BigInput">
<label><br>Small Cube Mass: </label>
<input id="SmallInput"><br>
<button id="SubmitUnit">Submit</button><br><br>
<button id="StartButton">Start Simulation</button><br>
<button id="StopButton">Stop Simulation</button>

I already tried flipping it, and solving for the equation gives the right answer seemingly. I’m pretty sure the issue is in the logic, not anywhere else.

error screenshotI have done RN upgrade from 0.76.9 to 0.77x. In Android, it’s working fine. but getting this error on ios while running the app.I have added to lines in AppDelegate.mm
#import <ReactAppDependencyProvider/RCTAppDependencyProvider.h>
self.dependencyProvider = [RCTAppDependencyProvider new]; because as per docs i don’t have to migrate to Swift: the Objective-C++ variant but i got error ‘React/JSCExecutorFactory.h’ file not found. I have tried multiple possible solution but it’s not resolved yet.

# require_relative '../node_modules/react-native/scripts/react_native_pods'
# require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
require_relative '../node_modules/react-native-permissions/scripts/setup'
#Google Maps SDK for iOS requires iOS 13, so make sure that your deployment target is >= 13.4 in your iOS project settings.
#platform :ios, min_ios_version_supported #'13.4'
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip
  
platform :ios,'15.6'
prepare_react_native_project!
setup_permissions([
  'AppTrackingTransparency',
  'LocationAccuracy',
   'LocationAlways',
   'LocationWhenInUse',
   'Bluetooth',
   'Camera'
])

def node_require(script)
   # Resolve script with node to allow for hoisting
   require Pod::Executable.execute_command('node', ['-p',
     "require.resolve(
       '#{script}',
       {paths: [process.argv[1]]},
     )", __dir__]).strip
end

# Use it to require both react-native's and this package's scripts:
node_require('react-native/scripts/react_native_pods.rb')
node_require('react-native-permissions/scripts/setup.rb')
# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
#
# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
# ```js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
# ```
# Changed this line with below line: flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled
#flipper_config = FlipperConfiguration.disabled

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

  flags = get_default_flags()
#


target 'CustomerFacingApp' do
#target 'CustomerFacingAppDevelopment' do
#use_frameworks!
use_frameworks! :linkage => :static
$RNFirebaseAsStaticFramework = true
$RNFirebaseAnalyticsWithoutAdIdSupport = true
#use_modular_headers!

 
  config = use_native_modules!

  #$RNFirebaseAsStaticFramework = true
  # Add the lines specifying :modular_headers => true for Firebase pods
  pod 'GoogleUtilities', :modular_headers => true
  pod 'FirebaseCore', :modular_headers => true
  pod 'FirebaseInstallations', :modular_headers => true
  pod 'GoogleDataTransport', :modular_headers => true
  pod 'nanopb', :modular_headers => true
  pod 'FirebaseCoreInternal', :modular_headers => true
  pod 'FirebaseCrashlytics', :modular_headers => true
  pod 'FirebaseRemoteConfig', :modular_headers => true
  pod 'FirebaseSessions', :modular_headers => true
  pod 'FirebaseABTesting', :modular_headers => true
  pod 'FirebaseCoreExtension', :modular_headers => true
  pod 'FirebaseFirestoreInternal', :modular_headers => true
  pod 'react-native-version-check', :path => '../node_modules/react-native-version-check'
  pod 'RNScratch', :path => '../node_modules/react-native-scratch'
  pod 'HyperCardScan', '2.2.3'  

  # React Native Maps dependencies
  rn_maps_path = '../node_modules/react-native-maps'
  pod 'react-native-google-maps', :path => rn_maps_path
  # Flags change depending on the env values.
  use_react_native!(
    :hermes_enabled => flags[:hermes_enabled],
        :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'CustomerFacingAppTests' do
    inherit! :complete
    # Pods for testing
  end
   target 'CustomerFacingAppDevelopment' do
     inherit! :complete
   end

  target 'CustomerFacingAppStaging' do
    inherit! :complete
  end
  target 'CustomerFacingAppQa' do
    inherit! :complete
  end
  target 'CustomerFacingAppPreprod' do
    inherit! :complete
  end
  target 'CustomerFacingAppUat' do
    inherit! :complete
  end
  target 'CustomerFacingAppDevTemp' do
    inherit! :complete
  end

  pre_install do |installer|
    installer.pod_targets.each do |pod|
      if pod.name.eql?('callstack-repack')
        def pod.build_type
          Pod::BuildType.static_library
        end
      end
    end
  end

  post_install do |installer|
    react_native_post_install(
      installer,
      # Set `mac_catalyst_enabled` to `true` in order to apply patches
      # necessary for Mac Catalyst builds
      :mac_catalyst_enabled => false
    )

   puts "Post-install Patch is running..."
     # Run your patching script and log its output
     result = `sh ./CustomerFacingApp/patch_grpc_core.sh`
     # Print the output of the script
     puts "Output from patch_grpc_core.sh:"
     puts result
     # Optionally, check for errors
     if $?.exitstatus != 0
       puts "Error: The patching script failed with exit code #{$?.exitstatus}"
     else
       puts "Patch Script executed successfully."
       end
   
    bitcode_strip_path = `xcrun --find bitcode_strip`.chop!
   def strip_bitcode_from_framework(bitcode_strip_path, framework_relative_path)
     framework_path = File.join(Dir.pwd, framework_relative_path)
     command = "#{bitcode_strip_path} #{framework_path} -r -o #{framework_path}"
     puts "Stripping bitcode: #{command}"
     system(command)
     system("chmod -R u+w Pods/RCT-Folly")
       Dir.glob("Pods/RCT-Folly/folly/Portability.h").each do |file|
         text = File.read(file)
         new_contents = text.gsub('#define FOLLY_HAS_COROUTINES 1', '#define FOLLY_HAS_COROUTINES 0')
         File.open(file, "w") { |file| file.puts new_contents }
       end
   end
 
   framework_paths = [
     "Pods/LogRocket/LogRocket.xcframework/ios-arm64/LogRocket.framework/LogRocket",
     "Pods/hermes-engine/destroot/Library/Frameworks/macosx/hermes.framework/hermes",
     "Pods/hermes-engine/destroot/Library/Frameworks/macosx/hermes.framework/Versions/Current/hermes",
     "Pods/hermes-engine/destroot/Library/Frameworks/universal/hermes.xcframework/ios-arm64/hermes.framework/hermes",
     "Pods/hermes-engine/destroot/Library/Frameworks/universal/hermes.xcframework/ios-arm64_x86_64-maccatalyst/hermes.framework/hermes"
   ]
 
   framework_paths.each do |framework_relative_path|
     strip_bitcode_from_framework(bitcode_strip_path, framework_relative_path)
   end
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
            config.build_settings['CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES'] = 'YES'
          end
      if target.name == 'BoringSSL-GRPC'
        target.source_build_phase.files.each do |file|
          if file.settings && file.settings['COMPILER_FLAGS']
            flags = file.settings['COMPILER_FLAGS'].split
            flags.reject! { |flag| flag == '-GCC_WARN_INHIBIT_ALL_WARNINGS' }
            file.settings['COMPILER_FLAGS'] = flags.join(' ')
          end
        end
      end
    end
    # __apply_Xcode_12_5_M1_post_install_workaround(installer)
    fuse_path = "./Pods/HyperSDK/Fuse.rb"
    clean_assets = false # Pass true to re-download all the assets
    if File.exist?(fuse_path)
      if system("ruby", fuse_path.to_s, clean_assets.to_s)
      end
    end
    installer.pods_project.targets.each do |t|
      if t.name.start_with?("AEP")
        t.build_configurations.each do |bc|
            bc.build_settings['OTHER_SWIFT_FLAGS'] = '$(inherited) -no-verify-emitted-module-interface'
        end
      end
      t.build_configurations.each do |bc|
         bc.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)', '_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION']
      end
    end

  end
  # pod 'FirebaseCore'
  #     pod 'FirebaseCoreInternal'
end

1. I have updated the podfile with enable Hermes and new Arch.
2. Tried to direct import RCTAppDependencyProvider in podfile.
3. Upgrade the “@react-native-community/cli-platform-ios
4. I have tried this steps multiple times
   cd ios
   rm -rf Pods
   rm Podfile.lock
   rm -rf ~/Library/Developer/Xcode/DerivedData/*
   pod cache clean –all
   pod install –repo-update
5. tried to update use_frameworks! :linkage => :static in podfile

I’m using Mediasoup and building a streaming app. I have implemented only a receiver transport. From the backend, the stream chunks (UDP data) are successfully sent to the Mediasoup server. However, on the frontend side, even though bytesReceived and framesReceived are shown, their values are 0.

I don’t know where the problem is. I can see logs in the terminal showing that the data is correctly sent. On my backend terminal, I ran DEBUG=mediasoup:* and it shows the complete connection with all ICE, DTLS, codec, and transport information. The transport and consumer are also created successfully without any error, and the consumer resumes successfully from frontend to backend.

However, the frames are not being received by the frontend or the consumer side. I don’t know why this is happening or where the issue lies.

I’m trying to make a terminal quiz that has a timer running in the background while you answer the question that once finished overrides the input if it hasn’t been filled.

I’ve tried putting the timer and question into different functions and have calling them in different orders:

const prompt = require("readline-sync");
let countdown;

function timer(questionAnswer){
    clearTimeout(countdown);
    countdown = setTimeout(() => {
        console.log("Sorry! you ran out of time. The answer was " + questionAnswer);
    }, 5000);//<-- Adjust this number to change the length of the countdown

}

function question(questionAnswer){
    let playerAnswer = prompt.question("Please enter your answer:   ");
    playerAnswer = Number(playerAnswer);//<--change this line depending on variable type

    if(countdown != 0){
        if(playerAnswer == questionAnswer){// change this condition on a question-by-question basis
          console.log("Correct!");
          //<--add point distribution here
        }else{
            console.log("Incorrect! The correct answer was " + questionAnswer);
        }  
    clearTimeout(countdown);
    }
}

question(72);//<¬
timer(72);// <----Change these lines to read from file that stores the answers depending on the question

However, calling the timer first has no effect and continues straight to the question and if I call the question first the timer only starts after the input has been filled.

I create a web-submit-form for whistleblower. In order to keep the whistleblower anonym, I need to protect the form from being recorded.

I thought about DRM but its for videos only. Is there a transparent video I could overlap the form with DRM?

Otherwise, any other suggestions?

There are two <div> elements with the class “slider-cell” where the images are set via the inline style “background-image” The “Network” tab in Dev Tools shows that these two images have Priority High Low (screenshot), but it needs to be High High.

If this were an <img> element, it could probably be changed by adding the “fetchpriority” attribute, but here it’s a background-image. I’ve heard it might somehow be possible to do this with a link rel (though not sure). But how?

The HTML below cannot be changed since it is generated, so the Priority needs to be adjusted by affecting this HTML.

<div class="flickity-slider">
  <div class="slider-cell" style="background-image: url(&quot;https://mysite/pathtoimage/first.jpg&quot;);"></div>
  <div class="slider-cell is-selected" style="background-image: url(&quot;https://mysite//second.jpg&quot;);"></div>
</div>

the backend endpoints moved from dev to stage environment. All the env variables are correct. When accessed the staging url in browser, the request in network tab is still like: https://dev-appname/bundle.js.

But in production environment it correctly points to the proper request url

using webpack bundler. build is successfull for stage as well. not sure about this issue. Because of this on accessing stage url, there is blank screen and no UI.

all env variables and dist files have the staging url. still no ui on accessing the staging url

Example 1 – No focus outline for link

I have a keydown handler for a <textarea>. When the handler gets invoked, I want a link (<a> tag) to receive focus. If you run the example below and type something in the <textarea>, you will see the link receiving focus after 1000 ms (1 second). The link changes its color to green when it receives focus.

But when the link receives focus, it does not get a focus outline around it. I confirmed this with Firefox v143 and Chrome v140.

let link
let text

function main() {
  link = document.getElementById('link')
  text = document.getElementById('text')
  text.value = ''
  text.addEventListener('keydown', keydown)
}

function keydown() {
  setTimeout(handler, 1000)
}

function handler() {
  console.log('text.value:', text.value)
  link.focus()
}

window.addEventListener('load', main)

a:focus { color: green }

<textarea id="text"></textarea>
<a id="link" href="https://example.com/">example.com</a>

Example 2 – Successful focus outline for link

But in the example below, when I type something into the <textarea>, the link gets focus after 1000 ms (1 second) and the link gets an outline too.

The only difference between the previous example and this example is that this example has text.focus() call which the previous example does not have.

let link
let text

function main() {
  link = document.getElementById('link')
  text = document.getElementById('text')
  text.focus()
  text.value = ''
  text.addEventListener('keydown', keydown)
}

function keydown() {
  setTimeout(handler, 1000)
}

function handler() {
  console.log('text.value:', text.value)
  link.focus()
}

window.addEventListener('load', main)

a:focus { color: green }

<textarea id="text"></textarea>
<a id="link" href="https://example.com/">example.com</a>

Question

Why does the link NOT get a focus outline around it in the 1st example and why does it get a focus outline in the 2nd example? I am unable to find anything in the W3 specs that would explain this behavior. Can you help explain this behavior?

I have the following in document-browser.component.html :

<window-container #createDocumentWindow [title]="'XXX'">
    <document-form *ngIf="createDocumentWindow.isOpen"
        CreateDocumentForm
        (save)="onCreateDocument($event)"
        (reset)="createDocumentWindow.close()"
        (saveChanged)="onSaveChanged($event)">
    </document-form>
</window-container>

document-form.component.ts extends a class BaseFormComponent that has an

@Output() saveChanged: EventEmitter<any> = new EventEmitter();  

and in the same (BaseFormComponent) class emits it :

private _saving;

get saving(){ return this._saving; }

//this is fired whenever needed.
set saving(value:boolean){
    this._saving=value;
    this.saveChanged.emit(value);
  }

In document-browser.component.ts I’ve exposed a method :

  onSaveChanged(state: boolean){
    console.log("onSaveChanged fired");
    this.isSaving=state;
  }

The problem is that the onSaveChanged never gets fired.

I’ve implemented the exact same code in a slightly different scenario in document-page.component.html and the event fires as expected:

<page-container [title]="'XXX'">
    <kendo-tabstrip class="mb-2">
        <kendo-tabstrip-tab [title]="'XXXX'" [selected]="true">
            <ng-template kendoTabContent>
                <div class="tab-form-content">
                    <document-form CreateDocumentForm 
                                        (save)="onSave($event)"
                                        (saveChanged)="onSaveChanged($event)">
                    </document-form>
                </div>
            </ng-template>
        </kendo-tabstrip-tab>
    </kendo-tabstrip>

    <div bottomButtons>
        <button BackButton 
                [backUrl]="urls.browser"
                [disabled]="isSaving">xxxxx</button>
    </div>
</page-container>

document-page.component.ts implements the onSaveChanged method too :

onSaveChanged(state:boolean){
    this.isSaving=state;
  }

The document-form.component.ts is the same in both cases.
I’ve also attached a debugger and the setter is hit in both cases.

I am entirely new in Angular, so please help me understand why the method onSaveChanged is not fired in the first case.

Here on Swagger JwtToken appearing:

JavaScript code:

async function Login(email, password)
{
    let loginForm = {};
    loginForm['email'] = email;
    loginForm['password'] = password;

    await fetch('https://localhost:7238/login',
    {
        method: "POST",
        body: JSON.stringify(loginForm),
        headers: { 'content-type': 'application/json' }
    });

    console.log(JSON.stringify(loginForm));

}

But here on web application JwtToken does not appear, but JSON request is the same (you can see it on Console):