Having trouble with the accordion not expanding after fetching API data in Angular4

Currently, I am working on a project using Angular 4 where I have implemented nested accordions. I am facing an issue while trying to dynamically bind the accordion content from an API response in JSON format.

Although I am able to successfully bind the accordion headers, the inner options are not getting bound as expected.

I am uncertain whether the binding is successful but the accordions are not opening, or if the data is simply not being bound at all.

For reference, here is a working example with static values:

https://stackblitz.com/edit/angular-9cuvb9?file=app%2Fapp.component.html

However, when attempting dynamic binding (with the mentioned issue), the problem persists:

https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-jwb2zj?file=app/app.component.html

If anyone can assist me in resolving this issue, it would be greatly appreciated.

angulartypescript

Answer №1

I am not completely sure about the ultimate objective you are aiming for, however in the dynamic version, you have set the data target as href="#collapseInnerTwo" and in the collapsible id, you are trying to evaluate an expression such as 

[id]="'collapseInnerTwo' + group?.CAMD_PRGRP_DESC"

These two will never align with each other and hence will not collapse. If you modify it to

[id]="'collapseInnerTwo' + group?.CAMD_PRGRP_DESC"

to just

id="collapseInnerTwo"

It will function as expected

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

Looking for a way to convert 24-hour format to minutes in Angular? I'm in need of some TypeScript code to

I am looking for Typescript code that can convert 24-hour time format into minutes. For example, when converting 1.00 it should output as 60 minutes. When converting 1.30 it should equal to 90 minutes. If anyone has the code for this conversion, p ...

javascriptangulartypescript

Struggling to fetch information with Angular HttpClient from an API that sends back a JSON response with an array

As a beginner in Ionic and Angular, I am attempting to call an API and then showcase the team names within the template of my project. Despite following numerous tutorials and videos, I seem to be stuck as the JSON response returns an object with results f ...

angulartypescriptionic-frameworkhttpclientangular-httpclient

What is the process for modifying the underline color in ion-datetime for invalid dates?

I am looking for a solution to change the color of the underline on invalid dates to red. I have not attempted any fixes yet as there doesn't seem to be any similar query online. Here's the code snippet related to Date and Time: <ng-containe ...

cssangularionic-framework

Obtain abbreviated names for the days of the week starting from Monday to Sunday using JavaScript

Is there a way to retrieve the abbreviated names of each day of the week in JavaScript, starting from Monday through Sunday? ...

javascripttypescriptdatedays

The deployment of robots.txt is not supported by Angular2 and webpack

I am currently in the process of developing a website using [email protected]. For this project, I have opted to utilize Webpack with its default settings as a dependency. Below is an excerpt from my package.json file: "dependencies": { "@angular/co ...

angularwebpackrobots.txt

Tips for resolving the Cross-Origin-Request-Block problem when retrieving data with angular2 and php

Make sure to carefully read the question as it contains various edits and updates based on user feedback. I am currently working on sending data to a php file using angular2 in a Unix environment. The location of the XAMPP folder for running PHP files is ...

phpangularcorsangular2-services

Angular6 implementation of a 3D card carousel

Looking for a library to create a 3D Card Slider similar to the image below using Angular6? Check it out here ...

typescriptangular6nodes

default radio button selection problem

When working with reactive forms, I am facing an issue where the radio buttons are not being checked by default even though I am using form values for that purpose. Additionally, when I click on the first currency symbol, the numbers change but the default ...

angulartypescript

Tips for converting a Heic image file to a Jpeg or Png format within an Angular application in order to utilize ngx-image-cropper

Query - I am facing an issue with ngx-image-cropper where it does not support Heic image files as input for the '[imageChangedEvent]'. How can I convert a Heic image file to Jpeg or Png in Angular/typescript? Just so you know, when trying to loa ...

angularbase64jpegheic

What are the best practices for implementing jquery owlCarousel within an Angular 4 component?

I've included my 'carousel.js' file like this: $('#owl-carousel-1').owlCarousel({...}); and in carousel.component.html, I have: <div id="owl-carousel-1" class="owl-carousel owl-theme center-owl-nav home- carousel">....< ...

javascriptjqueryangulartypescriptowl-carousel

How can a particular route parameter in Vue3 with Typescript be used to retrieve an array of strings?

Encountered a build error: src/views/IndividualProgramView.vue:18:63 - error TS2345: Argument of type 'string | string[]' is not assignable to parameter of type 'string'. Type 'string[]' is not assignable to type 'strin ...

typescriptvue.jsvuejs3vue-routervue-router4

Is there a way to apply a decorator to a function that has been returned?

Can the following be accomplished? bar () { @custom yield () => { } } ...

typescript

Guide on implementing the date-picker plugin in an Ionic 3 project

This might seem like a simple question, but the documentation for the date-picker is not very clear on how to implement it in HTML. That's why I'm reaching out with this question. Below is the code from somePage.ts: var changeTime = this.datePi ...

angulardatepickerionic3bootstrap-4

Specify the return type based on specific parameter value

I'm facing a situation where I have two definitions that are identical, but I need them to behave differently based on the value of the limit parameter. Specifically, I want the first definition to return Promise<Cursor<T>> when limit is g ...

javascripttypescripttypescript-typings

Compilation issues in node-modules arise following the Vue package and i18next updates

Recently, I decided to upgrade from the i18n package to the newer version called i18next in my project. However, this update led to numerous errors popping up during compilation. Fortunately, by adding 'skipLibCheck' to the compiler options in th ...

typescriptvue.jsnode-modulesi18next

Extract information from a JSON file and import it into an Angular TypeScript file

How can I retrieve data from a JSON file and use it in an Angular typescript file for displaying on web pages? this.http.get<any>('http://localhost:81/CO226/project/loginResult.json').subscribe((res: Response)=>{ }); Here ...

jsonangular

Generating a custom type in Typescript based on specific array keys

Imagine I have a structure like this: export interface MyObject { id: number title: string } and then I create an array as shown below: const myArray: MyObject[] = [ { id: 2358, title: 'Item 1' }, { id: 85373, title: &a ...

typescript

Encountering a compilation error due to a Typescript assignment

While working with Typescript, I encountered a compilation error in the code shown below: console.log('YHISTORY:login: data = '+data); let theData = JSON.parse(data); console.log('YHISTORY:login: theData = '+JSON.stringify(theData)); ...

typescript

What steps can be taken to implement jQuery within an Angular 15 npm package?

In my development process, I often create my own npm packages using Angular and Typescript. One of the packages I am currently working on is a PDF viewer service, which includes a file named pdf-viewer.service.ts with the following code: import { Behavior ...

jqueryangulartypescriptnpm

Optimizing Text Formatting for Angular: Learn how to seamlessly showcase rich content in its proper format

I have a paragraph content fetched from a strapi endpoint that is in rich text format. When displayed on the page using a p tag, it shows with all the rich text formats such as ** for bold and more. How can I display it correctly? Inside the .ts file, // ...

javascripthtmlangularangularjstypescript