Styjun

How can mimic phobia be cured?

Why is short-wave infrared portion of electromagnetic spectrum so sensitive to fire?

How can I avoid dust and bubbles when installing window film?

Quoting Keynes in a lecture

Angel of Condemnation - Exile creature with second ability

Using substitution ciphers to generate new alphabets in a novel

Why can Carol Danvers change her suit colours in the first place?

Creepy dinosaur pc game identification

Solve the following system of equations - (3)

PTIJ: Haman's bad computer

How do you respond to a colleague from another team when they're wrongly expecting that you'll help them?

Can a college of swords bard use blade flourish on an OA from dissonant whispers?

How to explain what's wrong with this application of the chain rule?

Recommended PCB layout understanding - ADM2572 datasheet

Pre-mixing cryogenic fuels and using only one fuel tank

How should I address a possible mistake to co-authors in a submitted paper

Is there a way to get `mathscr' with lower case letters in pdfLaTeX?

Why does AES have exactly 10 rounds for a 128-bit key, 12 for 192 bits and 14 for a 256-bit key size?

Why is it that I can sometimes guess the next note?

Does Doodling or Improvising on the Piano Have Any Benefits?

Can disgust be a key component of horror?

Calculate sum of polynomial roots

Does the Linux kernel need a file system to run?

When were female captains banned from Starfleet?

Set dynamic template variable in a dynamically rendered html with Angular

Can HTML checkboxes be set to readonly?How can I set the default value for an HTML <select> element?JavaScript set object key by variableCannot display HTML stringAngular HTML bindingLocal variable in template returning null (ionic)Adding expansion panel to the row inside angular material tableAngular change detection after template renderAngular5 Material -> Close mat-expansion-panel when switch TABIs mat-expansion-panel lazy rendering broken?

0

I'm displaying a dynamically rendered tree like structure with angular material expansion panel, I've customized the expansion panel to show the drop arrow on left with a ternary operator like this:

This is how i'm rendering the expansion panel:

Parent Component template:

<div>
 <ui-tree [data]="data" [key]="key"></ui-tree>
</div>

Child Component template:

 <div *ngIf="items.length">
 <mat-expansion-panel hideToggle="true" class="border mat-elevation-z0" *ngFor="let item of items" #toggle (click)="toggle.value = !toggle.value">
 <mat-expansion-panel-header>
 <mat-panel-title (click)="icon.value ? icon.value = true : icon.value = false;">
 <mat-icon>toggle.value ? 'navigate_next': 'keyboard_arrow_down'</mat-icon>
 <div class="col-md-9">
 item.name
 </div>
 </mat-panel-title>
 </mat-expansion-panel-header>
 <button mat-button>Add Role</button>

 <ui-tree *ngIf="item[key].length" [key]="key" [data]="item[key]"></ui-tree>
 </mat-expansion-panel>
</div>

I want the to change in the header on click, Icon should point right if closed and point down if open.
How do I achieve this?

javascript html angular angular-material2 angular-dynamic-components

share|improve this question

edited 11 hours ago

Jawad Farooqi

asked yesterday

Jawad FarooqiJawad Farooqi

9418

add a comment | 

0

I'm displaying a dynamically rendered tree like structure with angular material expansion panel, I've customized the expansion panel to show the drop arrow on left with a ternary operator like this:

This is how i'm rendering the expansion panel:

Parent Component template:

<div>
 <ui-tree [data]="data" [key]="key"></ui-tree>
</div>

Child Component template:

 <div *ngIf="items.length">
 <mat-expansion-panel hideToggle="true" class="border mat-elevation-z0" *ngFor="let item of items" #toggle (click)="toggle.value = !toggle.value">
 <mat-expansion-panel-header>
 <mat-panel-title (click)="icon.value ? icon.value = true : icon.value = false;">
 <mat-icon>toggle.value ? 'navigate_next': 'keyboard_arrow_down'</mat-icon>
 <div class="col-md-9">
 item.name
 </div>
 </mat-panel-title>
 </mat-expansion-panel-header>
 <button mat-button>Add Role</button>

 <ui-tree *ngIf="item[key].length" [key]="key" [data]="item[key]"></ui-tree>
 </mat-expansion-panel>
</div>

I want the to change in the header on click, Icon should point right if closed and point down if open.
How do I achieve this?

javascript html angular angular-material2 angular-dynamic-components

share|improve this question

edited 11 hours ago

Jawad Farooqi

asked yesterday

Jawad FarooqiJawad Farooqi

9418

add a comment | 

I'm displaying a dynamically rendered tree like structure with angular material expansion panel, I've customized the expansion panel to show the drop arrow on left with a ternary operator like this:

This is how i'm rendering the expansion panel:

Parent Component template:

<div>
 <ui-tree [data]="data" [key]="key"></ui-tree>
</div>

Child Component template:

 <div *ngIf="items.length">
 <mat-expansion-panel hideToggle="true" class="border mat-elevation-z0" *ngFor="let item of items" #toggle (click)="toggle.value = !toggle.value">
 <mat-expansion-panel-header>
 <mat-panel-title (click)="icon.value ? icon.value = true : icon.value = false;">
 <mat-icon>toggle.value ? 'navigate_next': 'keyboard_arrow_down'</mat-icon>
 <div class="col-md-9">
 item.name
 </div>
 </mat-panel-title>
 </mat-expansion-panel-header>
 <button mat-button>Add Role</button>

 <ui-tree *ngIf="item[key].length" [key]="key" [data]="item[key]"></ui-tree>
 </mat-expansion-panel>
</div>

I want the to change in the header on click, Icon should point right if closed and point down if open.
How do I achieve this?

javascript html angular angular-material2 angular-dynamic-components

share|improve this question

edited 11 hours ago

Jawad Farooqi

asked yesterday

Jawad FarooqiJawad Farooqi

9418

<div>
 <ui-tree [data]="data" [key]="key"></ui-tree>
</div>

 <div *ngIf="items.length">
 <mat-expansion-panel hideToggle="true" class="border mat-elevation-z0" *ngFor="let item of items" #toggle (click)="toggle.value = !toggle.value">
 <mat-expansion-panel-header>
 <mat-panel-title (click)="icon.value ? icon.value = true : icon.value = false;">
 <mat-icon>toggle.value ? 'navigate_next': 'keyboard_arrow_down'</mat-icon>
 <div class="col-md-9">
 item.name
 </div>
 </mat-panel-title>
 </mat-expansion-panel-header>
 <button mat-button>Add Role</button>

 <ui-tree *ngIf="item[key].length" [key]="key" [data]="item[key]"></ui-tree>
 </mat-expansion-panel>
</div>

javascript html angular angular-material2 angular-dynamic-components

javascript html angular angular-material2 angular-dynamic-components

share|improve this question

edited 11 hours ago

Jawad Farooqi

asked yesterday

Jawad FarooqiJawad Farooqi

9418

share|improve this question

edited 11 hours ago

Jawad Farooqi

asked yesterday

Jawad FarooqiJawad Farooqi

9418

asked yesterday

Jawad FarooqiJawad Farooqi

9418

asked yesterday

Jawad FarooqiJawad Farooqi

9418