Menu
I have 2 different components where I am using Angular - Expansion Panel for expandable summary view.
I am able to integrate <mat-expansion-panel> to individual components successfully.
I need help to make Component2.html as parent of Component1.html (Expand within expand- Please see below Image)
Component 1 should be able to expand and collapse independently to show data
Component 2 should embed Component 1 within itself, so when Component 1 is expanded it can show its data and display remaining Child components
NOTE - Both the component has Sibling relation, no parent child or child - parent
Component1.html
<div class="row">
<div class>
<dl class="row property_set" data-property-set-name="data">
<mat-accordion>
<mat-expansion-panel (opened)="doExpand = true"
(closed)="doExpand = false">
<mat-expansion-panel-header>
<mat-panel-title>
<dt class="col-sm-4 record_property">data</dt>
</mat-panel-title>
<mat-panel-description>
<dd class="col-sm-8 record_property_value data_name" id="{{genId(data.name)}}">
<inline-misal-edit
[(field)]="data.name" [elementType]="a.bName" (fieldChange)="dataModified(data)"
cols="30" rows="1"></inline-misal-edit>
</dd>
</mat-panel-description>
</mat-expansion-panel-header>
<dt class="col-sm-4 record_property">news</dt>
<dd class="col-sm-8 record_property_value">{{data.news?.created | news}}</dd>
</mat-expansion-panel>
</mat-accordion>
</dl>
</div>
Component2.html
<dl class="row property_set" data-property-set-name="misal">
<mat-accordion>
<mat-expansion-panel (opened)="doExpand = true"
(closed)="doExpand = false">
<mat-expansion-panel-header>
<mat-panel-title>
misal Id
</mat-panel-title>
<mat-panel-description>
<dd class="col-sm-10 record_property_value" data-property-type="select">{{misal.id || 'new'}}</dd>
</mat-panel-description>
</mat-expansion-panel-header>
<dd class="col-sm-10 record_property_value misal_name">{{misal.data[0].name}}</dd>
<dt class="col-sm-2 record_property">Country Pass</dt>
<dt class="col-sm-2 record_property">Plugins Program</dt>
<dd class="col-sm-10 record_property_value">
<north-dhamma[(misal)]="misal" [editMode]="editMode" (misalChange)="recordModified.emit()"></registry-number>
</dd>
<dt *ngIf="misal.value === 'hovered'" class="col-sm-2 record_property">Related Plugins Program</dt>
<dd *ngIf="misal.value === 'hovered'" class="col-sm-10 record_property_value">
<land-hole></land-hole>
</dd>
</mat-expansion-panel>
</mat-accordion>
</dl>
.ts file
panelOpenState = true;
UPDATE
The answer given below by Robbie works for parent - child component relation but not for the sibling component
557
)To compress a view of a hierarchy so that only the roots of each branch are visible. The opposite of collapse is expand, which makes the entire branch visible.
This pattern creates a button that toggles an element as hidden (collapsed) or not hidden (expanded). The element's current state and changes in the element's state are communicated to screen reader users.
Collapse is a term used to describe the process of hiding something or reducing its size, so it's not visible. For example, when you expand a folder, it shows the folder's contents. To hide the open folder's contents, you'd collapse the folder.
In the collapsible panel you are toggling the previous state. Instead you have to explicitly set expand/collapse state.. const animate = collapse => { setIsCollapse(collapse); setIcon(state => { return state === "fa fa-chevron-down" ? "fa fa-chevron-right" : "fa fa-chevron-down"; }); }; useEffect(() => { animate(!
The Collapse component doesn't display anything on its own, it describes a relationship between two other components that do. The Material UI docs explain that it is used to make the Vertical Stepper component. The Expansion Panel is a complete package, it has the collapsing behavior, but also it provides the panels that are displayed as well.
You may also expand and collapse elements manually via JavaScript — just call the collapse () Bootstrap method with the id or class selector of the collapsible element. <script> $ (document).ready (function () { $ ("#myBtn").click (function () { $ ("#myCollapse").collapse ("toggle"); }); }); </script>
The Expansion Panel is a complete package, it has the collapsing behavior, but also it provides the panels that are displayed as well. If you look at the source code for ExpansionPanel, you'll see that it uses Collapse in its render function.
interaction within a scorecard. In this blog we will create the hierarchy expand and collapse functionality directly within scorecard using scripting. As there is no in-built functionality for hierarchy, we will have to achieve this via scripting. enhance our scorecard by adding additional columns for which we will write a code snippet.
One way to do this is using a shared service - https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service
However I find the following solution much simpler, it allows to share data between 2 siblings.
app-sibling2.component.ts
import { AppSibling1Component } from '../app-sibling1/app-sibling1.component';
export class AppSibling2Component {
@Input() data: AppSibling1Component;
...
}
In you parent component template:
<!-- Assigns "AppSibling1Component" instance to variable "data" -->
<app-sibling1 #data></app-sibling1>
<!-- Passes the variable "data" to AppSibling2Component instance -->
<app-sibling2 [data]="data"></app-sibling2>
I believe this is what you are looking for. Let me know if you have any questions
102
You should be able to add your child component right after the close tag of mat-expansion-panel-header
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Parent Expansion
</mat-panel-title>
</mat-expansion-panel-header>
<p>Content of parent</p>
<!-- add child here -->
<app-child></app-child>
</mat-expansion-panel>
</mat-accordion>
https://stackblitz.com/edit/angular-5euuwx?file=src%2Fapp%2Fexpansion-overview-example.html
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
