Retirez l'en-tête Material Stepper
Je veux me débarrasser de la navigation d'en-tête sur le stepper matériel. Veuillez suggérer comment puis-je le faire? J'ai essayé de définir le CSS suivant mais ne semble pas fonctionner:
.mat-horizontal-stepper-header-container{display: none}
Voici le lien stackblitz du stepper. https://stackblitz.com/edit/angular-material2-beta-ybbnhe?file=app%2Fapp.component.html
Vous devez utiliser une combinaison de ::ng-deep pour contourner le DOM fantôme et le !important drapeau pour contourner les styles propres aux matériaux:
::ng-deep .mat-horizontal-stepper-header-container {
display: none !important;
}
La réponse de @Simon K est correcte. Mais cela affectera tous les moteurs pas à pas de votre application. Mais si vous souhaitez l'utiliser pour votre composant spécifique, utilisez :Host avant le ::ng-deep. Ensuite, cela n'affectera pas les autres moteurs pas à pas (le cas échéant) dans votre application. Par exemple de @Simon K 'answer-
:Host ::ng-deep .mat-horizontal-stepper-header-container {
display: none !important;
}