Skip to content

Cdk stepper example refactor #20383

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Aug 28, 2020
Merged

Cdk stepper example refactor #20383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
2a1ba86
build: Added required files to listbox directory.
nielsr98 Jun 11, 2020
28fcff4
build: added listbox option directive and renamed listbox directive f…
nielsr98 Jun 11, 2020
8330082
build: Added required files to listbox directory.
nielsr98 Jun 11, 2020
e082728
build: added listbox option directive and renamed listbox directive f…
nielsr98 Jun 11, 2020
92065fa
build: Added required files to listbox directory.
nielsr98 Jun 11, 2020
1f34f25
build: added listbox option directive and renamed listbox directive f…
nielsr98 Jun 11, 2020
08a135f
build: Added required files to listbox directory.
nielsr98 Jun 11, 2020
d13c056
build: added listbox option directive and renamed listbox directive f…
nielsr98 Jun 11, 2020
18e3136
feat(dev-app/listbox): added cdk listbox example to the dev-app.
nielsr98 Jul 15, 2020
ca59f61
fix(listbox): removed duplicate dep in dev-app build file.
nielsr98 Jul 22, 2020
14c6771
fix(listbox): deleted unused files.
nielsr98 Aug 4, 2020
f94582e
refactor(combobox): changed names and made coerceOpenActionProperty s…
nielsr98 Aug 10, 2020
1d646b9
fix(combobox): fixed trailing whitespace.
nielsr98 Aug 10, 2020
52a4633
refactor(listbox): prevented listbox from auto closing when in multip…
nielsr98 Aug 17, 2020
6234df5
feat(combobox): added focus out handling on panel.
nielsr98 Aug 20, 2020
d189971
refactor(stepper): made minor changes to the cdk stepper example to b…
nielsr98 Aug 21, 2020
bcf40c5
refactor(combobox): removed unwanted changes from other branch.
nielsr98 Aug 21, 2020
c54be09
nit(combobox): removed extra line.
nielsr98 Aug 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...es/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ export class CdkCustomStepperWithoutFormExample {}
selector: 'example-custom-stepper',
templateUrl: './example-custom-stepper.html',
styleUrls: ['./example-custom-stepper.css'],
providers: [{ provide: CdkStepper, useExisting: CustomStepper }]
providers: [{provide: CdkStepper, useExisting: CustomStepper}]
})
export class CustomStepper extends CdkStepper {
onClick(index: number): void {
selectStepByIndex(index: number): void {
this.selectedIndex = index;
}
}
8 changes: 3 additions & 5 deletions ...mponents-examples/cdk/stepper/cdk-custom-stepper-without-form/example-custom-stepper.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,15 @@
<h2>Step {{ selectedIndex + 1 }}/{{ steps.length }}</h2>
</header>

<div [style.display]="selected ? 'block' : 'none'">
<ng-container [ngTemplateOutlet]="selected.content"></ng-container>
</div>
<div [ngTemplateOutlet]="selected ? selected.content : null"></div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excuse me, but could we use ng-container here so that no elements are rendered when it's not selected?


<footer class="example-step-navigation-bar">
<button class="example-nav-button" cdkStepperPrevious>&larr;</button>
<button
class="example-step"
[class.example-active]="selectedIndex === i"
*ngFor="let step of steps; let i = index"
[ngClass]="{ 'example-active': selectedIndex === i }"
(click)="onClick(i)"
(click)="selectStepByIndex(i)"
>
Step {{ i + 1 }}
</button>
Expand Down