What are the steps to customize the collapse and expand icons?

Having trouble changing the icon up and down when collapsing and expanding with the code below.

<div class="attach-link">

                <a href="javascript:void(0);" *ngIf="fileData.fileDataType.canAttach && !isFinancialEntity" (click)="openFileInput(i)">
                    <i class="fa fa-plus"></i> Add Attachment</a>
                <input type="file" class="hide" id="fileData_{{i}}" ng2FileSelect [uploader]="fileData.uploader" (onFileSelected)="onFileSelected()"
                />
                <a class="attachFileList" href="#attachFileList_{{i}}" data-toggle="collapse">
                    <i class="fa fa-angle-up" ></i>                       

                    Attachments [{{fileData.fileList.length}}] </a>
            </div>

Also, included script :

 $('a[data-toggle="collapse"]').click(function () {            
        //$(this).find('i').addClass('fa fa-angle-up').removeClass('fa fa-angle-down');
        $(this).find('i .fa fa-angle-up').toggleClass('fa fa-angle-down');
    });

Seeking assistance to resolve this issue. Thank you for your help in advance.

angulartwitter-bootstraptypescript

Answer №1

Learn how to create a collapsible feature in Angular with this sample code snippet.

<div class="attach-link">
      <a href="javascript:void(0);"  (click)="openFileInput(i)">
              <i class="fa fa-plus"></i> Add Attachment</a>
            <input type="file" class="hide" id="fileData_{{i}}" ng2FileSelect (onFileSelected)="onFileSelected()"
            />
             <br>                
            <a (click)="collapse=!collapse" class="attachFileList" href="#attachFileList_{{i}}" data-toggle="collapse">
                <i class="fa" [ngClass]="{'fa-angle-up': collapse, 'fa-angle-down': !collapse}"></i>    
                Attachments {{fileData.fileList.length}}                 
            </a>
 </div>

Controller

 import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  collapse:boolean =true;
}

Answer №2

To add on to @sharma-vikram's response, if someone is looking to address the expand-collapse issue described above for multiple elements in a loop, the following solution can be implemented. Note: This is a basic solution without utilizing ngbCollapse or material.

Template (html):

...
<div *ngFor="let item of items">
  <div class="row">
   <div class="col" (click)="toggle(rowItem)" >
    <i class="fa" [ngClass]="{'fa-plus': rowItem.classList.contains('d-none'), 'fa-minus': !rowItem.classList.contains('d-none')}"></i>
   </div>
  </div>
  <div class="row" #rowItem>
    Value
  </div>
</div>

Controller (ts):

...
public toggle( element: HTMLElement) {
  element.classList.toggle('d-none');
}

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

Implementing centralized authentication through an IdentityServer application with the utilization of the resource owner password flow

I am currently developing two Angular 2 applications that will have a .NET Core 1.1 REST backend and be hosted on Azure App Service. My goal is to enable them to share authentication information in order to provide a seamless Single Sign-On experience. Add ...

angularjwtidentityserver4asp.net-core-webapiazure-web-app-service

The incorrect child output is causing the observable to trigger erroneously, resulting in the observable receiving inaccurate

For quite some time now, I've been struggling to identify the issue in my code. The scenario is that I have a child component acting as a modal, which includes a search bar. When the user interacts with the search bar, it triggers an event to the pare ...

angularrxjsngrx

Is the regex returning the correct result?

I need to discuss the date field with a format of YYYYMMDD, as shown below: zod.string().max(8).regex(new RegExp('^(19[0-9][0-9]|20[0-9][0-9]|[0-1][0-9]{3})(1[0-2]|0[1-9])(3[01]|[0-2][1-9]|[12]0)$')); The value provided is 20001915. The definit ...

regextypescriptzod

How to Resolve File Paths in CSS Using Angular 7 CLI

My assets folder contains an image named toolbar-bg.svg, and I am attempting to use it as the background image for an element. When I use background: url('assets/toolbar-bg.svg'), the build fails because postcss is unable to resolve the file. How ...

cssangularsasscommand-line-interfaceassets

Creating a dynamic CSS height for a div in Angular CLI V12 with variables

Exploring Angular development is a new venture for me, and I could use some guidance on how to achieve a variable CSS height in Angular CLI V12. Let me simplify my query by presenting it as follows: I have three boxes displayed below. Visual representatio ...

javascripthtmlcssangulartypescript

Attaching an event listener to elements with a specified Class name

Currently facing a challenge where I am trying to implement a function that captures click events on squares. The objective is to capture the click event on every button with the square class. import { Component, OnInit } from '@angular/core&apos ...

javascriptangulartypescript

Switching from HttpModule to HttpClientModule

Angular's transition from HttpModule to HttpClientModule is causing some confusion, as discussed in detail here. The official Angular tutorial at https://angular.io/tutorial/toh-pt6 still uses HttpModule, while the Fundamentals documentation at https ...

angularhttprxjsreactivexangular-httpclient

Determine the generic parameter of the output type by analyzing the resolved value of a data type within the function

I am looking to automatically determine the generic parameter of the return type by utilizing the resolved value of a type within the function. Consider the following: export type Context = any; export type Handler<T> = (ctx: Context) => Promise& ...

typescripttypescript-generics

Is there a way to customize the styles for the material UI alert component?

My journey with Typescript is relatively new, and I've recently built a snackbar component using React Context. However, when attempting to set the Alert severity, I encountered this error: "Type 'string' is not assignable to type 'Colo ...

javascriptreactjstypescripttypesmaterial-ui

Create a container-fluid design in Bootstrap with various colors

I am aiming to create a design with a fluid container featuring different background colors on each side, separated by two columns within the container. I have visualized it in this image - do you think it is feasible? https://i.stack.imgur.com/KRc2Q.pn ...

htmlcsstwitter-bootstrap

Obtain a string representation of an array of selection choices within an Ionic2 Angular2 framework

I'm currently attempting to extract the values from the multiple selection feature of ionic2. This is my HTML: <ion-select name="days" [(ngModel)]="appointment.days" multiple="true"> <ion-option value="mon" selected="true>Monday</ ...

angularionic2

Having trouble sending HTTP requests in Angular 6

I am currently facing an issue in my Angular application while trying to send an HTTP POST request to a Spring RESTful API. Despite my attempts, I have not been able to succeed and I do not see any error response in the browser console. Below is a snippet ...

javascriptangular

Having trouble with Angular Ng2-file-Upload's Upload.all() method not successfully sending files to the API

Dealing with the challenge of uploading files in mp4 and jpg formats, I have set up 2 separate instances of FileUploader with custom validation. Upon clicking the upload button, I attempt to merge the files from both instances into a single FileUploader ...

angulartypescriptangular-file-uploadng2-file-upload

The parameter 'host: string | undefined; user: string | undefined' does not match the expected type 'string | ConnectionConfig' and cannot be assigned

My attempt to establish a connection to an AWS MySQL database looks like this: const config = { host: process.env.RDS_HOSTNAME, user: process.env.RDS_USERNAME, password: process.env.RDS_PASSWORD, port: 3306, database: process.env.RDS_DB_NAME, } ...

typescriptexpressmysql-connector

What is the method to modify the starting point of the animation for the material component "mat-progress-bar" so it initiates from 0 instead of 100

I recently integrated a material progress bar into my Angular project. Here is the code snippet: <mat-progress-bar mode="determinate" value="40"></mat-progress-bar> However, I encountered an issue where upon page refresh, ...

angularangular-materialmaterial-uiprogress-bar

How come my button is initiating automatically instead of manually?

Working on developing an API using Angular 2 with the Janus media server has brought up an issue regarding the start button. When running Janus, the button initiates automatically instead of manually. The following function was implemented for this purpos ...

javascriptjqueryangular

Merge generic nested objects A and B deeply, ensuring that in case of duplicate properties, A's will take precedence over B's

Two mysterious (generic) nested objects with a similar structure are in play: const A = { one: { two: { three: { func1: () => null, }, }, }, } const B = { one: { two: { three: { func2: () => null, ...

typescripttypescript-generics

Issue: The element p-button (and p-password) is unrecognized

After installing primeng using the command npm install primeng --save, I have version ^12.0.1 of primeng listed in both dependencies and devDependencies in my package.json file. In my angular.json file, I have included the necessary styles: "styles& ...

angulartypescriptprimeng

Retrieving the value of a checkbox when clicked in Angular 2

I am trying to use ngModel binding to check the status of a checkbox. After calling console.log(activeCheckbox);, I can see that the ngmodel and its value property are set to true in the console. However, when I immediately call console.log(activeCheck ...

angularcheckbox

What is the most effective way to refresh SCSS in a current Angular project?

I'm in the process of updating the SCSS version within my angular project. From the beginning, I selected scss in the angular cli for this project, so I have been using SCSS already. However, now I need to incorporate a spacing library that requires t ...

angularsass