How can I add 2 Title elements side by side using Angular?

Question

In my project I am using <mat-expansion-panel>. I am trying to add 2 title element using <mat-panel-title> side by side with their respective description

Currently my code displays

Title1 Title2 Description1 Description2

What I am looking for is

Title1 Description1 Title2 Description2

Here is my code - Link - https://stackblitz.com/edit/mat-expansion-panel-q1qxz7?file=app%2Fexpansion-overview-example.html

<mat-nav-list>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Title 1 </mat-panel-title>
      <mat-panel-description>
        <dd class="col-sm-10 record_property_value" data-property-type="select">{{ 'Description fror Title 1'}}</dd>
      </mat-panel-description>
      <mat-panel-title>
        Title 2
      </mat-panel-title>
      <mat-panel-description>
        <dd class="col-sm-10 record_property_value" data-property-type="select">{{ 'Description fror Title 2'}}</dd>
      </mat-panel-description>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
</mat-nav-list>

A single panel header may have only 1 `mat-panel-title` and 1 `mat-panel-description`. Why do you need to have a panel with double titles and their descriptions? — hastrb, May 13 '21 at 15:38
Requirement is to display both `Title 1` and `Title 2` with their `description` on `main element`. As of now I was showing `Title 2 and its description` when `expansion panel ` was `opened`. For `readability` purpose trying to show both `data` on `main component`. Is there any other way I can make this possible? Thanks — DON DAN, May 13 '21 at 15:42
this is just to play along wrap them in 2 divs Div1 = title1+desc1 and Div2=title2+desc2. You should consider implementing a custom header if you have some exceptional requirements — joyBlanks, May 13 '21 at 15:46

score 0 · Accepted Answer · answered May 13 '21 at 15:47

As per Angular material documentation, mat-expansion-panel-header should have a single <mat-panel-title> and an <mat-panel-description> for proper positioning of panel content. But in your case you can try this method...

I have edited your stackblitz here and it seems to be working. Please verify..

How can I add 2 Title elements side by side using Angular?

1 Answers1