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

Creating TypeScript models from a JSON response in React components

My Angular 2 application retrieves a JSON string, and I am looking to map its values to a model. According to my understanding, a TypeScript model file is used to assist in mapping an HTTP Get response to an object - in this case, a class named 'Custo ...

javascriptangularjsjsontypescriptangular

Displaying nested arrays correctly

My latest endeavour involves constructing a data tree in Vue, utilizing components. Let's examine the provided data snippet: "data": [ { "id": 1, "name": "foo", "children": [ { "id": 2, "name": "bar", "children": [] } ...

javascripthtmlvue.jsvuejs2

loading a module's dependencies seamlessly with RequireJS

Currently, I am working with Knockout and Require in my project. I have isolated some Knockout handlers into a separate module that I want to utilize. While there is no specific JavaScript code relying on this module, it is referenced in the data-bind attr ...

javascriptknockout.jsrequirejs

Generating a PDF file from HTML div content using a button click

I am looking to export a specific div section as a PDF file. The div contains a mix of text, images, and charts. <div id="newdiv"> <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/ ...

javascriptjqueryhtmlcsspdf

Angular 2 component stays static despite changes in route parameters

So, I am in need of a way to refresh my component after the URL parameter's id has been altered. The following code is from my player.component.ts: import {Component, OnInit, AfterViewInit} from '@angular/core'; import {ActivatedRoute, Rout ...

javascriptjqueryangularangular2-routing

I am perplexed as to why my useEffect function is executing twice within my NextJs client

I am currently working on a NextJs program and using a function called useAsync on my website. However, I have noticed that this function runs twice every time it is called. I suspect that the useEffect calling the useAsyncInternal might be causing this be ...

javascriptnode.jsreactjsnext.jsreact-hooks

When it comes to mapping routes in the express framework of Node.js

Currently, I am facing an issue while setting up the route in my app.js file. The route for the listing of flights is passed in the routes/flights.js file. When I define the route at the bottom of all routes, it results in a 404 error. However, if I place ...

javascriptnode.jsexpress

Troubleshooting Error 400 while fetching JSON data using $http.get method in AngularJS

I keep encountering a 400 error when attempting to fetch the JSON data from the following URL using $http.get. $http.get('https://api.spotify.com/v1/search?q=artist:Owl+City+title:On+The+Wing&type=track&limit=1'). success(function(data) ...

javascriptangularjsjsonhttp

Step-by-step tutorial on designing an input slider to dynamically adjust the CSS :before linear-gradient values

Is there a way to achieve a gradient effect using pseudo-element :before on an image that can be customized by adjusting a slider input? I've been trying to implement this feature with the following code, but have not been successful so far. var ...

javascripthtmljquerycss

Is it possible to designate a Typescript generic type as a tuple with equal length to that of another tuple?

Imagine having a function that takes in a dataset which is an array of (identically-typed) tuples: type UnknownTuple = any[] function modifyDataStructure<T extends UnknownTuple>(list: T[]) { ... } The goal is to define a second argument with the ...

typescript

Discovering if an agent is a mobile device in Next.js

I am currently working with nextjs version 10.1.3. Below is the function I am using: import React, {useEffect, useState} from "react"; const useCheckMobileScreen = () => { if (typeof window !== "undefined"){ const [widt ...

javascriptreactjsnext.js

The hyperlink within the Angular component seems to be unresponsive and is difficult to click on

I attempted to click on the user's profile link, but nothing happens. It seems impossible to interact with it. Here is the code snippet: JavaScript ViewUserProfile(user) { this.router.navigate([user.username]); if (this.currentUser.usernam ...

angularhtmltypescriptangular6

Transferring data from Node.js server to React client with axios communication

I have a project in the works that involves tracking chefs and their new recipes. I am developing a simple frontend application where users can input a chef's username, which will then be sent to the backend for scraping several cooking websites to re ...

javascriptnode.jsreactjsexpressaxios

Error encountered while loading a plugin in Typescript and RequireJS compilation process

Currently, I am working on a Typescript application in Visual Studio 2015 where RequireJS is used for loading modules. I have successfully loaded various modules from .ts classes and external libraries by using their typing .d.ts files. However, I have en ...

typescriptrequirejs

Utilizing URL-based conditions in Reactjs

Currently, I am working with Reactjs and utilizing the Next.js framework. My goal is to display different text depending on whether the URL contains "?id=pinned". How can I achieve this? Below is the snippet of my code located in [slug.js] return( ...

javascriptreactjsnext.js

ng-init assign value to a new object

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl2" ng-init="person = new Person('Al ...

javascripthtmlangularjs

Managing the back button in Nativescript-Angular to toggle visibility

Struggling to toggle the visibility of an element in response to the back button event. <ActionItem icon="~/images/menu_3_dots.png" ios.position="right" android.position="right" *ngIf="isActionItemVisible"></ActionItem> construc ...

angularnativescriptnativescript-angular

Is there an error when iterating through each table row and extracting the values in the rows?

Here is a basic table that I am attempting to iterate through in order to retrieve the value of each cell in every row where there are <td>s present. However, I encounter an error indicating that find does not exist despite having added jQuery. Any ...

javascriptjqueryhtml

Exploring the world of Angular CLI testing and the versatility of

Struggling with integrating Angular CLI's test framework and enum types? When creating an enum like the following (found in someenum.ts): const enum SomeEnum { Val0, Val1 } Utilizing it in this way (in app.component.ts): private someEnum = Some ...

angularangular-clikarma-jasmine

Why does the AngularJS ngRepeat filter permanently remove null values?

Check out this JSFiddle demonstration I created to illustrate the problem: http://jsfiddle.net/s6Lj2/2/ Observe that in the dataset $scope.places = [{ name: 'Chicago', status: 'Active', analyst: 'Sam', recor ...

javascriptarrayshtmlangularjs