angular-materialmat-tab

Angular Material 2 - Display mat-tab-label text in two lines (like title an subtitle)


I'd like to display text in mat-tab-label like some title and its subtitle. For example as on mat-card-header where the title and subtitle can be set and displayed one under the other.

Is it possible to make text in mat-label be displayed like in this screenshot? enter image description here

Here is the stackbliz that I tried, but nothing works - all the tags always display inline.


Solution

  • Nothing with just HTML, Angular Material formats them using inline-flex and puts them on one line. You need to use the ::ng-deep combinator to change the style of the components inside the shadow tree. Here's a little article to read about, google for more.

    And here is your stackblitz with the answer. Of yourse, add your classes to it and adjust the stylesheet so you are not manipulating all of the tabs, unless that's what you want to.