CODEWITHSUNDEEP
angularangular-material
Timuçin Çiçek
Timuçin Çiçek

Reputation: 1616

How to manipulate mat-card-header-text class for different mat-card elements?

This mat-card-header-text manipulates padding value of header text.I have two dfferent cards and I want to apply different margin for them.(default margin :0 16px)

 ::ng-deep .mat-card-header-text {
    margin: 0 !important;
}

This is the way how I can manipulate them.But is being applied for all.How to manipulate this for different cards?I want default margin:0 16px; for some of them and 0px for another card element.Unfortunately without using this class name it doesnt apply

Upvotes: 3

Views: 2764

Answers (2)

Santosh Kadam
Santosh Kadam

Reputation: 1352

Wrap your Angular material selector in any other div element with some class. then you can style only within that particular div.

div .mat-card-header-text  {}

Upvotes: 1

Chellappan வ
Chellappan வ

Reputation: 27363

Add some custom class to mat-card-header component and combine that class with mat-card-header-text

component.html

<mat-card-header class="header">
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>

component.css

::ng-deep .header .mat-card-header-text {
    margin: 0 !important;
}

Upvotes: 5

Related Questions