Modify the arrow design for the expansion panel's default arrow style

Looking to customize the design of an angular expansion panel? Check out the images below for inspiration:

Before Customization:

https://i.sstatic.net/4u6NS.png

After Customization (Not expanded):

https://i.sstatic.net/8N6Br.png

After Customization (Expanded):

https://i.sstatic.net/EII3v.png

Wondering how to achieve this look using angular material?

Check out the code snippet below:

HTML:

<md-expansion-panel>
  <md-expansion-panel-header>
    <md-panel-title>
      Personal data
    </md-panel-title>
    <md-panel-description>
      Type your name and age
    </md-panel-description>
  </md-expansion-panel-header>

  <md-form-field>
    <input mdInput placeholder="First name">
  </md-form-field>

  <md-form-field>
    <input mdInput placeholder="Age">
  </md-form-field>
</md-expansion-panel>

TS:

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

/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}

Answer №1

Achieving this is indeed possible. Simply assign a reference id, such as example, to your expansion panel and set the hideToggle property to true.

Within the <md-panel-description>, you can insert icons and utilize the expanded property of the panel to toggle the visibility of these icons.

  <md-expansion-panel  class="custom-header" hideToggle="true" #example>
    <md-expansion-panel-header>
      <md-panel-title>
        Personal data
      </md-panel-title>
      <md-panel-description>
        Enter your name and age
        <md-icon *ngIf="!example.expanded">play_arrow</md-icon>
        <md-icon *ngIf="example.expanded">arrow_drop_down</md-icon>
      </md-panel-description>
    </md-expansion-panel-header>

    <md-form-field>
      <input mdInput placeholder="First name">
    </md-form-field>

    <md-form-field>
      <input mdInput placeholder="Age">
    </md-form-field>
  </md-expansion-panel>

To create space between the icon and panel description, apply the following classes in your component.css file:

.custom-header .mat-expansion-panel-header-title, 
.custom-header .mat-expansion-panel-header-description {
  flex-basis: 0;
}

.custom-header .mat-expansion-panel-header-description {
  justify-content: space-between;
  align-items: center;
}

I opted for material icons, but feel free to use custom icons if desired. For a demonstration, check out this stackblitz demo.

Answer №2

Building on @Faisal's response, it's worth noting that in the newest version of angular material, we now utilize the mat prefix instead of md for the Material components.

Angular Material 8.1.4

<mat-expansion-panel class="mb-15px" hideToggle="true" #xyz>
<mat-expansion-panel-header>
  <mat-panel-title class="font-weight-bold font-small">
    Info
  </mat-panel-title>
  <mat-panel-description>
    <mat-icon *ngIf="!xyz.expanded">play_arrow</mat-icon>
    <mat-icon *ngIf="xyz.expanded">arrow_drop_down</mat-icon>
  </mat-panel-description>
</mat-expansion-panel-header>
<mat-expansion-panel class="mb-15px" hideToggle="true" #xyz>

Check out the Stackblitz demo here

Answer №3

A simple and elegant solution would be to include a span with fxFlex

  <mat-panel-description>
       <span fxFlex></span>
       <img src="">
   </mat-panel-description>

Remember to also include hideToggle in the mat-expansion-panel component

<mat-expansion-panel hideToggle>

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

Is there a way to adjust the size of a table display to ensure that both vertical and horizontal scroll bars are constantly visible?

[edits added below per the request to see code. Edits also added to the original post to clarify the ask - marked in bold] My application features a broad table with the potential for many rows, generated by django-tables2 using the bootstrap5-responsive ...

Error TS2315: Invalid Type Assignment for Angular 6 ModuleWithProviders

Hey there, I'm encountering an issue that's got me scratching my head. I've shared some of my code in the hopes that it might shed some light on the problem. The problem cropped up as soon as I started working on a Reactive Form. Let me s ...

What are some ways to enhance the content within a JWT?

After following this tutorial, I am interested in adding additional information to the token. Specifically, I would like to include an 'accessRights' field that can be used for user authorization in both the backend and Angular. Where should I i ...

Issue with rendering in sandbox environment versus localhost

Here's a dilemma I'm facing - I have some HTML code on my localhost that looks like this: <div> <p>Go to: <a href="www.foobar.com">here</a></p> </div> On localhost, the output is "Go to: here" with 'he ...

Looking to create a div in HTML with two columns and two rows for display

Query: I am facing issues adjusting these grids using HTML and CSS. I have attempted to place them in a single frame within a separate div, but it's not working as expected. I need help aligning the grids according to the provided image below. Can som ...

Element Style Does Not Align with Computed Z-Index

Currently, I am in the process of developing an HTML5 video player. However, I have encountered a problem where my custom controls become unclickable once the video element is set to fullscreen mode. This issue arises because the video's z-index is se ...

Angular 14: Exploring the left datepicker panel navigation in PrimeNG

In my situation, I am trying to adjust the position of the date-picker in relation to a panel displayed within a <p-calendar> element. Due to a splitter on the right side, I need to shift the date-picker towards the left. Here is the HTML code: < ...

Differences in rendering with Google Chrome when zooming in or out

After creating some code, I observed a peculiar issue. At 500% zoom, the DOWNLOAD button aligns perfectly with the left wall without any gap. However, upon reducing the zoom to 250%, a green background segment becomes visible. To witness this anomaly, refe ...

How can I use TypeScript to copy data from the clipboard with a button click?

One of the functionalities I have implemented is copying data to the clipboard with a button press. However, I am now looking to achieve the same behavior for pasting data from the clipboard. Currently, the paste event only works when interacting with an i ...

Issues with the functionality of multiselect in Angular2-PrimeNg's reactive forms are currently being experienced

Currently, I am utilizing PrimeNG version 2.0.3 alongside Angular 2.0.0 while implementing reactive forms. My aim is to incorporate the multiselect functionality of PrimeNg into my form. To achieve this, I have taken the following steps: Component.html ...

Verify if the array entries match

Within my select element, I populate options based on an array of values. For example: [{ name: 'A', type: 'a', }, { name: 'B', type: 'b', }, { name: 'B', type: 'b', }, { name: &apos ...

The functionality of Angular 6 Material Nested Tree is disrupted when attempting to use dynamic data

In Angular 6, I am utilizing mat-tree along with mat-nested-tree-node. My objective is to dynamically load the data when the user toggles the expand icon. Attempting to apply the dynamic data concept from the Flat Tree example provided in Material Example ...

Revamping Tab Styles with CSS

Currently, I am working on a mat tab project. The code snippet I am using is: <mat-tab-group> <mat-tab [label]="tab" *ngFor="let tab of lotsOfTabs">Content</mat-tab> </mat-tab-group> If you want to see the liv ...

Avoid automatic background resizing to match the full width of the header text

I've been trying to use CSS to style my <h1> element in a specific way, but it seems the default browser behavior is getting in the way: https://i.sstatic.net/oRR5N.png Despite my efforts, the browser continues to display it like this: https: ...

When restarting nginx, Angular fails to display the index page

On my VPS server, I have an application with the backend coded in node.js and the frontend in Angular. After restarting nginx, I encountered some issues where my API stopped working on HTTPS and only functioned on HTTP (previously, I was able to make requ ...

Position on the chart in the Highcharts

I have developed 2 highcharts in the code below: <div> <p id="container"> </p> <p id="cont"> </p> </div> I specified the width and height as follows: $('#cont').highcharts({ char ...

What is causing the #wrapper element to not fully contain all of its content within?

I am struggling to figure out why the wrapper on this page is not properly wrapping the content. It's only 332px tall for some reason when it should be the height of the content, which is causing the footer to pull up to the top of the page. Could I b ...

Tips for modifying only one property after receiving an object from an HTTP GET request

Within my Angular application, I have defined an object structure like this: export class Article { id: number; author: number; title: string; content: string; date: Moment; readingTime: number; draft: boolean; constructor(obj: Partial< ...

Unable to find values for all parameters on the ContactEdit page

While exploring the functionality of local storage, I encountered an error when trying to inject it into my constructor: 'Can't resolve all parameters for ContactEdit page ?, [object Object], [object Object], [object Object], [object Object] ...

Issue with HTTP Interceptor not being effective when making service calls

I've implemented an interceptor to automatically add headers to each HTTP request without manual intervention. However, I'm facing an issue where the service call inside my interceptor is not triggering for some reason. Below is the code snippet: ...