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

Angular Material SlideToggle Fails to Toggle

I am having issues with a specific Angular component called "new-form" that incorporates a slide toggle feature from the Angular Material library. Despite rendering on the client side, the slide toggle does not respond to clicks when interacted with. Even ...

angularangular-materialslidetoggle

Arranging Columns in JQuery Sortable and Bootstrap Causes Item to Disappear from the First to Last Column

Currently experimenting with integrating JQuery Sortable with Bootstrap v3. My layout consists of 3 columns, where I aim to drag and drop items from column 1 to column 3, with column 2 hosting buttons for bidirectional movement. Despite the functionality ...

jquerytwitter-bootstrapjquery-uijquery-ui-sortable

The Perplexing Problem with Angular 15's Routing Module

After upgrading to Angular 15, I encountered an issue with the redirect functionality. The error message points out a double slash "//" in my code, but upon inspection, I couldn't find any such occurrence. * * PagesRoutingModule: const routes: Routes ...

angulartypescriptangular-routingangular14angular15

Is it possible for an Interface's property to be a type that contains an array?

As I dive into the Angular code, I encountered a peculiar type for a property within an Interface named 'Origin' that has left me perplexed. Here's the snippet: export interface Origin { areaNum?: number; open?: { [key: stri ...

angulartypescripttypescript-typings

Encountering an issue with the date pipe in Angular that prevents

I'm trying to incorporate a date pipe in my AngularJS and Firebase project to display the creation date of a post. However, I am facing an issue where the date does not appear when testing it. Below is my create Post function: createPost() { con ...

javascriptangularfirebase

Encountering a "ReferenceError: global is not defined" in Angular 8 while attempting to establish a connection between my client application and Ethereum blockchain

I'm trying to configure my web3 provider using an injection token called web3.ts. The token is imported in the app.component.ts file and utilized within the async ngOnInit() method. I've attempted various solutions such as: Medium Tutorial ...

angulartypescriptethereumsolidity

Is there a way to utilize Typescript enum types for conditional type checking?

I'm working with restful services that accept enum values as either numbers or strings, but always return the values as numbers. Is there a way to handle this in TypeScript? Here's my attempt at it, although it's not syntactically correct: ...

typescriptenumsmapped-typesconditional-types

Exploring the Power of Enum in Angular

I am trying to display an enum value obtained from a REST service in a table. <td *ngIf="door.doors==Pass">No error</td> In this scenario, the value of doors is the enum. I have attempted to create the condition in various ways: 1 - == < ...

angularenums

What are the steps to update your profile picture using Angular?

In my Angular 6 application, I am implementing an image upload feature with the following code: Html: <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> <br/> <input type='file' (change)="onSelec ...

javascripthtmlcssangulartypescript

Validating dynamic forms with multiple rows in Angular 9

I am looking for a way to consolidate validation errors in one place for multiple rows created dynamically based on user input. Instead of displaying the error message next to each field, I want all the validation errors for each row to be displayed collec ...

angularvalidationangular-formsangular9dynamicform

Using *ngIf with values from an array in *ngFor in Angular 2: How to make it work?

i just started learning angular 2 and ionic, so I'll keep it brief: <ion-card class="acc-page-card" *ngFor="let account of accounts"> <ion-card-content> <!-- Add card content here! --> <ion-item (click)="GoTo('Ac ...

angulartypescriptionic2

Is it possible to implement a redirect within a Guard in Angular while utilizing asynchronous validation methods?

Within my Angular project, specifically version 6.x.x, I am working on implementing a Guard for certain routes that will redirect to '/login' if validation fails. The Guard relies on an asynchronous method within the AuthService for user validati ...

angularangular-guards

Compiling Typescript tasks in Visual Studio Code - ensuring output encoding is set correctly

Have you tried manually setting up a typescript compilation task in Visual Studio Code? You can find detailed instructions at this link. When you run the build command (Ctrl+Shift+B), are you seeing an error message from tsc with unknown encoding? Check o ...

typescriptvisual-studio-codetsc

Ways to resolve the error message "Type 'Promise<{}>' is missing certain properties from type 'Observable<any>'" in Angular

Check out this code snippet: const reportModules = [ { url: '', params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() } }, { url: 'application1', params: { to: for ...

javascripttypescript

Having Trouble Displaying Material UI Icons in Your React App? Here's Why: "Invalid Objects as React Children"

I have been working on a basic app that showcases information about a patient. In this specific component, I am only displaying the name, occupation, and a symbol from Material UI to indicate whether the patient is male or female. However, when I attempt ...

reactjstypescriptmaterial-ui

Organize and display a list of contacts alphabetically by the first letter of their

I have a list of contacts that I need help with. Despite searching on Stack Overflow, I couldn't find the answer. Can someone please assist? Thank you. export const rows = [ { id: 1, name: 'Snow', email: 'Jon', co ...

javascriptreactjstypescript

The value of additionalUserInfo.isNewUser in Firebase is consistently false

In my application using Ionic 4 with Firebase/AngularFire2, I authenticate users with the signinwithemeailandpassword() method. I need to verify if it's the first time a user is logging in after registering. Firebase provides the option to check this ...

typescriptfirebaseionic-frameworkfirebase-authenticationangularfire2

Solving issues with Angular4 Router changes

I'm attempting to chain the router resolver for my application. Below are my Router options: { path: '', component: AdminComponent, resolve: [ SessionResolve, LocaleResolve ] } The desired flow is to first call S ...

javascriptangularangular-router-guardsangular4-router

Mistakes following update to Angular 4 from Angular 2

After upgrading from Angular2 to Angular4, I encountered these errors in the CLI. While my app continues to function after the upgrade, I am curious about possible solutions to resolve these errors. Any suggestions? https://i.stack.imgur.com/CyYqw.png He ...

typescriptnpmupgradeangular

What is the best way to clear all content from the "textarea" and input fields after submitting?

I'm currently using a Devextreme library for my project. I am having trouble finding a way to clear all the textarea information in the component along with other inputs when clicking on the Save button. Despite trying various methods, I have not bee ...

angulartypescriptdevextreme