Updating Angular 8 Component and invoking ngOninit

Within my main component, I have 2 nested components. Each of these components contain forms with input fields and span elements. Users can edit the form by clicking on an edit button, or cancel the editing process using a cancel button. However, I need to automatically cancel the edit status whenever the user switches tabs without explicitly clicking the cancel button. This means that an event needs to be triggered once the component is changed in order to reset the edit status to false. So far, I have not been able to find a solution to this seemingly simple issue.

The structure is illustrated below:

<accordion [isAnimated]="true">
<accordion-group heading="Basic Details">
    <div class="profiletab_detail_wrp">
        <app-basic-details></app-basic-details>
    </div>
</accordion-group>
<accordion-group heading="Address Details">
    <div class="profiletab_detail_wrp">
        <app-address-details></app-address-details>
    </div>
</accordion-group>

javascriptangulartypescriptangular8

Answer №1

One of the features of the Ngx-bootstrap accordion is the (isOpenChange) event, which triggers every time an accordion is toggled. Here's how you can implement it:

HTML

<accordion [closeOthers]="oneAtATime"
   <accordion-group heading="Basic Details" (isOpenChange)="onBasicInfoToggle($event)">
       <div class="profiletab_detail_wrp">
           <app-basic-details></app-basic-details>
       </div>
   </accordion-group>
<accordion>

Component

onBasicInfoToggle(event) {
  // Turn off the edit mode if necessary
  if(event === 'closed') {
      this.editMode = false;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The importance of dependencies in functions and testing with Jasmine

In troubleshooting my AngularJS Service and Jasmine test, I encountered an issue. I am using service dependency within another service, and when attempting to perform a Unit Test, an error is thrown: TypeError: undefined is not an object (evaluating sso ...

javascriptangularjsunit-testingjasminekarma-jasmine

When a class decorator is returned as a higher-order function, it is unable to access static values

Check out this showcase: function Decorator(SampleClass: Sample) { console.log('Inside the decorator function'); return function (args) { console.log('Inside the high order function of the decorator: ', args); let sample = ...

typescriptdecorator

An automatic conversion cannot handle spaces and prohibited characters in Object keys

The AlphaVantage API uses spaces and periods in the keys. Their API documentation is not formal, but you can find it in their demo URL. In my Typescript application, I have created data structures for this purpose (feel free to use them once we solve the ...

typescriptalpha-vantage

Utilizing JavaScript to Retrieve Selected Parameter in SSRS Report

Currently, I am incorporating an SSRS report into my website using Iframe. I aim to share a link to the specific filtered report, which is why I require knowledge of the report's parameters. My query pertains to how I can identify these parameters (e ...

javascriptreporting-servicesssrs-2008

The data is not being displayed in the table

I am encountering an issue while attempting to populate the table with data received through props by looping over it. Unfortunately, the data is not rendering on the UI :( However, when I manually input data, it does show up. Below is my code: Code for P ...

htmltypescriptnext.jsreact-props

Image not located: 404 error in JavaScript

I am currently working with JavaScript and have encountered an issue. I have an array of objects that contain various data such as id, title, price, and image. I need to retrieve this data from the array in order to display it. While I am able to successfu ...

javascriptjavascript-objects

Displaying data from a service on an Ionic screen: a comprehensive guide

I've retrieved JSON data from an API: { "userGroups":[ {"title":"group 1"}, {"title":"group 2"}, {"title":"group 3"}, {"title":"group 4"} ] } Currently, I am storing this raw data in NativeStorage. // userService this.userGroup ...

angularionic-framework

Assign the DatePicker Object to an HTML Element

I am currently using a SyncFusion date picker in my project and the implementation looks like this: var datepicker = null; $("#datepicker").hide(); $("#click").click(function(){ $("#datepicker").show(); datepicker = new ej.calendars.DatePi ...

javascriptjquerysyncfusionej2-syncfusion

What are the steps for combining two constants with the JSON format of "const = [ { } ]"?

Here is the initial code that I would like to merge with another section. const sections = [ { title: section1_title, rows: [{ title: section1_option01, rowId: "sec1_option01", ...

javascriptnode.jsjson

Encountering a Hydration Error with Next.JS and MDX-Bundler when a MDX Component Adds Extra New Lines to its Children

Currently, I am incorporating next.js + mdx-bundler into my project. There is a simple component that I frequently use in my mdx files. Everything runs smoothly with the following code: Mdx is a great <Component>format and I like it a lot</Compon ...

javascriptreactjsnext.jsmdxjshydration

Slate Map by Google Navigation

I have a situation here that is similar to the grey maps, except all the buttons are visible. Everything appears normal except for the Map tiles, which are all grey! It's strange because it loads nicely at zoom level 8 and then zooms in to the maximum ...

javascripthtmlcssgoogle-mapsgoogle-chrome

Creating specific union types for a bespoke React hook

There are 4 objects with both similar and different keys. The union of these objects is used for database operations as follows -> type Objects = Food | Diary | Plan | Recipe ; A Custom Pagination Hook function usePaginate (key: string, options: Option ...

reactjstypescriptnarrowing

Having trouble with your JavaScript regex not functioning properly?

I am currently working with an array of arrays and I need to iterate through it to retrieve each word, excluding any "@", punctuation, and hashtags. However, my regular expression seems to be removing certain words entirely from the array and I can't ...

javascriptnode.js

What is the best way to use JavaScript to click on a block and retrieve its attribute value?

Struggling to capture the data-id attribute value of each item on click, despite researching online. Seeking guidance as I navigate the learning process and encounter programming frustrations. document.addEventListener("click", handle); const demo = e. ...

javascriptjquery

Utilizing $.Deferred() in a loop of nested ajax requests

I have spent countless hours searching for solutions to my problem, but I am still hopeful that someone out there has a solution. The issue at hand is being able to receive a notification once function a() has finished its execution. The challenge lies in ...

javascriptjqueryajaxdeferred

When attempting to execute a query in Node using oracledb, an error with the code 'npm ERR! errno 3221225477' occurred

Encountered the following error message in the command line: npm ERR! code ELIFECYCLE npm ERR! errno 3221225477 npm ERR! [email protected] start: `node ./bin/www` npm ERR! Exit status 3221225477 npm ERR! npm ERR! Failed at the [email protected] start sc ...

javascriptnode.jsexpressnpmnode-oracledb

rearranging the sequence of buttons using JavaScript

I am faced with the challenge of making a series of buttons draggable and droppable within a parent div without using any external libraries at the request of the client. Although I could have easily accomplished this task with jQuery, it's an opportu ...

javascriptdrag-and-drop

Learn how to dynamically clear and update source data in jQuery autocomplete for enhanced functionality

Here is a snippet of my jQuery code. In this code, 'year' refers to the form input tag ID, and 'years' is an array variable containing all the year values. I have set this array as the source for autocomplete, which works fine. However, ...

javascriptjqueryhtmlautocompletejquery-ui-autocomplete

Maintaining the order of subscribers during asynchronous operations can be achieved by implementing proper synchronization

In my Angular setup, there is a component that tracks changes in its route parameters. Whenever the params change, it extracts the ID and triggers a function to fetch the corresponding record using a promise. Once the promise resolves, the component update ...

javascriptangulartypescriptrxjs

What are some ways to adjust the size of the option field in a select menu?

In my ionic popup, I have a HTML property called select with nested options. Below is the code snippet along with the applied CSS. My query is how can I set the white space to occupy the entire area of the select? https://i.stack.imgur.com/iPqAa.png http ...

javascripthtmlcss