CODEWITHSUNDEEP
htmlangularangular-material
CptDayDreamer
CptDayDreamer

Reputation: 1794

Angular mat-list-item button in one line with text

I want to change my icon to a button to use it as copy to clipboard method. But when I do it, the button moves to the right side. Only when I try a around the text it works but of course the formatting is broken.

<mat-list>
        <h3 matSubheader>Persönliche Daten</h3>
        <mat-list-item>
          <button mat-icon-button ngxClipboard [cbContent]="firstname">
            <mat-icon  matListAvatar>account_box</mat-icon>
          </button>
          <h4 matLine>{{firstname}}</h4>
          <p matLine>Vorname</p>
        </mat-list-item>
        <mat-divider [inset]="true"></mat-divider>
        <mat-list-item>
          <mat-icon matListAvatar>description</mat-icon>
          <h4 matLine>{{lastname}}</h4>
          <p matLine>Nachname</p>
        </mat-list-item>
</mat-list>

My CSS:

mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
    background-color: rgba(0,0,0,0.04);
}

mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
    align-items: center;
    align-content: center;
    justify-content: center;
    display: flex;
}

/deep/ .mat-list-item-content {
    padding: 0!important;
}

/deep/ .mat-list-base .mat-subheader {
    padding: 0!important;
}

p {
    font-family: Lato;
    color: rgba(0,0,0,.54);
}

Here you can see what's happening

Upvotes: 0

Views: 5433

Answers (1)

JossFD
JossFD

Reputation: 2216

Using the (click) property

You can just make the icon behave like a button.

Add a (click) property to it and call the function you want!

<mat-icon (click)="myFunction($event)" matListAvatar>account_box</mat-icon>

Then you can add some :hover css to it to make it feel like a button.

Using HTML/CSS

You can place any content next to the button in a wrapper, you can customize this one in the css to behave differently if needed (if you end up adding more data to display you might have to play around with the flex properties, margin... or you might need to have nested wrappers, etc...)

<button mat-icon-button > 
  <mat-icon matListAvatar>account_box</mat-icon> 
</button> 

<div class="test-wrapper"> 
  <h4 matLine>{{firstname}}</h4> 
  <p matLine> Vorname</p> 
</div>

with this css:

.test-wrapper{ 
    padding-right: 0; 
    padding-left: 16px; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
}
 
.test-wrapper > *{ 
    margin: 0; 
}

Upvotes: 3

Related Questions