Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why can't I style angular material stepper elements directly?

Here is a code example I've forked from the official angular documentation for stepper: https://stackblitz.com/edit/angular-tth817

In my fork, I'm trying to achieve a couple of things:

  • I want to hide the stepper header.

    • I've tried doing this by styling .mat-horizontal-stepper-header-container (actually just adding a border to it).
  • I forced the content of the last step to be tall. There, you can see that the buttons on each step no longer align. What I would like to do is have the stepper content fill its parent (.container, the thick red dashed line), and then I can use flex box to get the buttons to all align at bottom.

    • I added mat-stepper-horizontal, mat-stepper-horizontal rules, and these don't apply either.

Can you tell me:

  • Why aren't these rules appearing at all? (F12 developer tools, shows all the other rules, but not that ones that are stepper specific). What's going on here?

  • Generally - what philosophy should I use for styling the stepper? The best alternative I can think of, is to put a content div inside each step, and size it with vh and vw or something.

  • How would I get rid of the header?

like image 476
dwjohnston Avatar asked Jun 03 '18 05:06

dwjohnston


People also ask

How do you handle stepper step in angular?

There are two possible approaches. One is using a single form for stepper, and the other is using a different form for each step. Alternatively, if you don't want to use the Angular forms, you can pass in the completed property to each of the steps which won't allow the user to continue until it becomes true.

How to override Angular Material’s styles?

Angular Material uses the least specific selectors possible for its components to make it easy to override them. More specific styles will take precedence over less specific styles. So in our case, we have to add more specificity to overwrite our AM styles. The best way to do so is to use the name of our component’s selector.

What is the difference between Mat-horizontal-stepper and Mat-vertical stepper?

The only difference is the orientation of stepper. You are now done. mat-horizontal-stepper selector can be used to create a horizontal stepper, and mat-vertical-stepper can be used to create a vertical stepper. mat-step components need to be placed inside either one of the two stepper components.

What is a stepper and how does it work?

A stepper is a wizard-like workflow that divides content into logical steps The base CDK version of the stepper primarily manages which step is active. This includes handling keyboard interactions and exposing an API for advancing or rewinding through the workflow.


1 Answers

From the angular docs:

The styles specified in @Component metadata apply only within the template of that component.

(https://angular.io/guide/component-styles#style-scope)

In other words, adding styling in this file will not affect child components.

Please note that Angular provide special CSS selectors you can use to select children components. These are technically deprecated, but there is currently no mention of what will take their place.

::ng-deep .mat-horizontal-stepper-header-container {
  border: solid 1px red; 
}

::ng-deep mat-stepper-horizontal, mat-stepper-horizontal {
  border: dashed 1px blue; 
  padding: 1em;
}
like image 71
user184994 Avatar answered Oct 28 '22 03:10

user184994