Элементы списка материалов Angular с кнопками, красиво, пожалуйста ⇐ CSS

[Anonymous]

Мне нужен список Angular Material v18.1 с выделенным содержимым и парой кнопок, примерно так:


Но когда я добавляю, скажем, директиву matListItemTitle к имени, все идет гладко. неправильно:


Конечно, я могу явно стилизовать элементы, но я подумал, что директивы Angular Material List будут немного более полезными. Есть идеи, что я делаю не так?


@for (c of contacts; track c) {

folder


{{c.name}}
{{c.email}}
{{c.description}}

Compose
Remove


}



:host {
width: 100%;
}

main {
display: flex;
justify-content: center;
align-items: center;
width: 95%;
margin: 20px;
}

mat-list {
width: 80%;
}

mat-list-item {
display: flex;
flex-direction: row;
}

.contact-details {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 10px 30px;
}

import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';

@Component({
selector: 'app-root',
standalone: true,
imports: [MatButtonModule, MatDividerModule, MatIconModule, MatListModule],
templateUrl: './list.html',
styleUrl: './list.css',
})
export class App {
contacts = [
{ name: 'one', email: '1@one', description: 'The one.' },
{ name: 'two', email: '2@one', description: 'The two.' },
];
}


Подробнее здесь: https://stackoverflow.com/questions/788 ... tty-please