| 5 Mar 2021 |
 intellix (Dominic Watson) | really struggling with Stepper... the logic doesn't make sense when using it programatically | 19:21:40 |
| intellix (Dominic Watson) | I want a "3 easy steps" style stepper. You start off on the first step, you click "next" and it goes to the second step etc | 19:21:59 |
| intellix (Dominic Watson) | * I want a "3 easy steps" style stepper. You start off on the first step, you click "next" and it goes to the second step etc..... so I have a property on my wrapping component: "selectedIndex = 0" | 19:22:17 |
| intellix (Dominic Watson) | * I want a "3 easy steps" style stepper. You start off on the first step, you click "next" and it goes to the second step etc..... so I have a property on my wrapping component: "selectedIndex = 0"<mat-horizontal-stepper [linear]="true" [selectedIndex]="selectedIndex"
| 19:22:36 |
| intellix (Dominic Watson) | * I want a "3 easy steps" style stepper. You start off on the first step, you click "next" and it goes to the second step etc..... so I have a property on my wrapping component: "selectedIndex = 0"<mat-horizontal-stepper [linear]="true" [selectedIndex]="selectedIndex"
<mat-step *ngFor="let step of data.steps; let i = index; trackBy: getObjectIdentity" [editable]="true" [optional]="false" [completed]="selectedIndex > i"
| 19:22:55 |
| intellix (Dominic Watson) | * I want a "3 easy steps" style stepper. You start off on the first step, you click "next" and it goes to the second step etc..... so I have a property on my wrapping component: "selectedIndex = 0"<mat-horizontal-stepper [linear]="true" [selectedIndex]="selectedIndex"
<mat-step *ngFor="let step of steps; let i = index" [editable]="true" [optional]="false" [completed]="selectedIndex > i"
| 19:23:08 |
| intellix (Dominic Watson) | * I want a "3 easy steps" style stepper. You start off on the first step, you click "next" and it goes to the second step etc..... so I have a property on my wrapping component: "selectedIndex = 0"<mat-horizontal-stepper [linear]="true" [selectedIndex]="selectedIndex">
<mat-step *ngFor="let step of steps; let i = index" [editable]="true" [optional]="false" [completed]="selectedIndex > i">
| 19:23:23 |
| intellix (Dominic Watson) | you're on the first step, it's the selectedIndex... makes sense. If you're on greater index, the previous ones are completed, obviously so selectedIndex=1 means that index 0 is complete | 19:24:05 |
| intellix (Dominic Watson) | but when I change selectedIndex from 0 to 1, it seems to not work because completed is still false on the first step | 19:24:26 |
| intellix (Dominic Watson) | * but when I change selectedIndex from 0 to 1, it seems to not work because completed is still false on the first step, which gets evaluated later | 19:24:34 |
| intellix (Dominic Watson) | can I not just disable the validation of that since it's clearly on drugs? | 19:25:01 |
| intellix (Dominic Watson) | I'm not using matStepperPrevious or matStepperNext cause the buttons are added dynamically and I need to handle the index manually | 19:26:44 |
| intellix (Dominic Watson) | * I'm not using matStepperPrevious or matStepperNext cause the buttons are added dynamically and I need to handle the index manually and am not able to add those directives | 19:26:51 |
| intellix (Dominic Watson) | it seems like [completed] is even problematic when using stepper.next/previous() | 19:32:20 |
| intellix (Dominic Watson) | this seems to work:this.completedIndex = this.selectedIndex < this.data.steps.length - 1 ? this.selectedIndex + 1 : this.data.steps.length - 1;
setTimeout(() => {
this.selectedIndex = this.completedIndex;
this.cd.detectChanges();
});
| 19:42:08 |
| intellix (Dominic Watson) | seems i'm not alone angular/components#19445 | 20:08:54 |
|  luisvt (Luis Vargas) joined the room. | 22:23:48 |
| luisvt (Luis Vargas) | In general that happens because your console work directoy is outside the project root | 22:23:49 |
| 6 Mar 2021 |
|  Xender007 (Suprotim Mukherjee) joined the room. | 21:12:07 |
| Xender007 (Suprotim Mukherjee) | Hi | 21:12:07 |
| Xender007 (Suprotim Mukherjee) | I am new here!! can anyone help me how to do docs contribution ? | 21:13:05 |
| 11 Mar 2021 |
 meanstackBasit (meanstackBasit) | how to get value fomrHTMLCollection []? | 14:46:57 |
| 23 Mar 2021 |
|  kpaxton (kpaxton) joined the room. | 15:41:59 |
| kpaxton (kpaxton) | Hey, I think there might be an issue with the FormArray and validation. I put together this stackblitz which shows my issue. https://stackblitz.com/edit/angular-9mjpyy?file=src/app/app.component.html When you hit 'Add Row' the entire form starts showing the errors even though everything is pristine. How can avoid this and only show the error state if it's been touched? It doesn't matter which ErrorStateMatcher I use either. I am forced to use a custom one. | 15:42:00 |
| kpaxton (kpaxton) | type="button" for the win. | 15:57:59 |
| 1 Apr 2021 |
|  Romjkez (Roman Meshkov) joined the room. | 12:56:13 |
| Romjkez (Roman Meshkov) | Hello, I want to investigate if this behaviour is bug or feature of Material tabs
What we have in v9 of Material tabs demo (below): if you resize the viewport (where component is being rendered), mat-tabs component dynamically (on fly) shows/hides horizontal navigation arrows according to viewport width
What we have starting from v10: viewport resize does not trigger arrows showing/hiding until we trigger change detection manually (click on tab or programmatically), so they stay visible or hidden at the wrong time.
Examples:
v9: https://stackblitz.com/angular/xbpevvrbkpr?file=src%2Fapp%2Ftab-nav-bar-basic-example.ts
v10: https://stackblitz.com/angular/xoepvnaxqak?file=src%2Fapp%2Ftab-nav-bar-basic-example.ts
Do you think this behaviour is normal? | 12:56:14 |
| Romjkez (Roman Meshkov) | * Hello, I want to investigate if this behaviour is bug or feature of Material tabs
What we have in v9 of Material tabs demo (below): if you resize the viewport (where component is being rendered), mat-tabs component dynamically (on fly) shows/hides horizontal navigation arrows according to viewport width
What we have starting from v10: viewport resize does not trigger arrows showing/hiding until we trigger change detection manually (click on tab or programmatically), so they stay visible or hidden at the wrong time.
Examples:
v9: https://stackblitz.com/angular/xbpevvrbkpr?file=src%2Fapp%2Ftab-nav-bar-basic-example.ts
v10: https://stackblitz.com/angular/xoepvnaxqak?file=src%2Fapp%2Ftab-nav-bar-basic-example.ts
Do you think this behaviour (in v10) is normal? | 12:56:56 |
| 2 Apr 2021 |
|  LukSN joined the room. | 12:22:05 |
| 7 Apr 2021 |
|  vishalgajjar (vishalgajjar) joined the room. | 17:29:41 |
