Components: docs(stepper): add guide for creating a custom stepper based on cdk-stepper

[Mayocampo]

Bug, feature request, or proposal:

Feature-Request

What is the expected behavior?

There must be an easy way to change styles of step headers: change colors, change fonts, change icons, change position of labels

What is the current behavior?

As far as i know, we get stuck with a default confguration. I already check a lot of issues here regarding to those topics, but i didn't understand if things are corrected or if there's a way to acomplish this

What is the use-case or motivation for changing an existing behavior?

Every project has an specific group of styling rules. Component should cover that. (mantaining guidelines from material specs, obviously)

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cli: 1.4.9
node: 6.11.3
os: win32 x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

[andrewseguin]

Check out the theming guide at https://material.angular.io/guide/theming-your-components

It includes colors, fonts, etc. Other than those you are welcome to customize the CSS as you wish. Is there a set of styles that aren't feasible for you to override?

[sainture]

Yes, need to change the step-header icon when the step is complete. Currently, it changes to "create" icon but I would like to change it to "done" (and still keeping it editable).

[Mayocampo]

@andrewseguin i understand that i can change some styles using the theming guide... but if i need to change the icon of the steps or put the label below of it and not beside, how can i change that?... now, i really dont understand how to customize CSS for it... i mean, if i change styles inside node_modules, when i publish the app to server, those styles are lost cause server (Azure) runs a fresh npm install every time.... now, if i include a custom CSS in my component (styleUrls:['myCustomCss.scss']),e styles are not taken and the original ones are always used..... so, i guess i'm losing something here.... thank you in advance if you can hep me

[mmalerba]

We have added the ability to swap out the icons. If you're trying to do something that's significantly different in appearance from a normal mat-stepper, you probably want to build a new component on top of the cdk-stepper instead (this is exactly what mat-stepper does.

See:
cdk-stepper
mat-stepper - as an example of how to build on cdk-stepper

This could really use some better documentation, probably in the form of a guide on the docs site. Will re-purpose this issue for that.

[brackio]

@Mayocampo any luck with this?

[nicholas-davis]

+1

[Mokkapps]

I wrote a blog post about how I built a custom stepper using Angular Material CDK Stepper which also includes this simple StackBlitz example:

https://stackblitz.com/edit/angular-basic-cdk-stepper?embed=1&file=src/app/custom-stepper/custom-stepper.component.ts

If you think this is interesting and helpful I could also try to add this information to the official documentation.

What do you think?

[mmalerba]

@Mokkapps if you're interested in working on it, I would be happy to accept a contribution for this, you can add it here: https://github.com/angular/material2/tree/master/guides. Just mention me on the PR when you're ready. Thanks!

[vzR]

@Mokkapps your example helped a ton to set up a stepper component thanks a lot. One question is that this bit doesnt seem to be rendered
<ng-template cdkStepLabel>StepA1</ng-template>
That didnt work in my case either so i resorted to the 'label' property on the cdk-step

[Mokkapps]

@vzR First thanks for the feedback. I will take a look at it and update my StackBlitz example. I will give you an update if I have some news on this topic.

[Mokkapps]

@vzR: I analysed it and simplified my StackBlitz example. I think if you are using custom stepper it does not make sense to use the labelor cdkStepLabel property.

In this case, it makes sense to show the label inside your custom stepper HTML template and pass the value via Angular input.

[Mokkapps]

@mmalerba The PR was merged but the new guide is not visible in https://material.angular.io/guides

Why is it not visible there?

[mmalerba]

It looks like it wasn't added to the list of guides. I made a PR: https://github.com/angular/material.angular.io/pull/575

It won't show up until the next release with your fix PR though. The version of the example code in 7.3.0 throws errors so I don't want to publish it yet

[Mokkapps]

Ok thanks. Should I investigate why the example throws errors?

[mmalerba]

I think your follow-up PR might have fixed it, it was because you re-declared steps but didn't add @ContentChildren

[mmalerba]

Closing since this is done and just waiting for a release

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}