Hello everyone, I am currently trying to render an article.component.html within my article-list-component.html in a list format. When I use plain HTML, it renders correctly as shown in picture 1: Title - author - Date Here is the code for my article-list.component.html:
<ul>
<li *ngFor="let article of data_array">
<a [href]="article.url" class="undecorateda" target="_blank">
<app-article [data]='article'></app-article>
</a>
</li>
</ul>
However, when I attempt to use Angular Material list, the component renders everything aligned to the left like this (see picture 2): Title-author-Date Here is the updated code for my article-list.component.html:
<mat-list>
<mat-list-item *ngFor="let article of data_array">
<a [href]="test">
<app-article [data]='article' (click)="printURL(article.url)"></app-article>
</a>
</mat-list-item>
</mat-list>
When I stick with plain HTML in the article-list.component.html file, the rendering meets my expectations. However, when using the Angular Material code snippet in the same file, the rendering does not align properly.
Below is the content of the article.component.html file:
<div class='article-container'>
<div class='title-container'>
{{data.title}}
<div class='author-container'>
-{{data.author}}-
</div>
</div>
<div class='date-container'>
{{formatDay(data.created_at)}}
</div>
<div class="actions-container" id="deletebtn">
<button mat-icon-button color="warn" (click)="deleteArticle(data._id)">
<mat-icon>delete_forever</mat-icon>
</button>
</div>
</div>
And here's the CSS code for the article.component.css file:
.article-container {
display: grid;
grid-auto-flow: column;
grid-template-columns: 10fr 2fr 1fr;
height: 50px;
background-color: #fff;
border-bottom: 1px solid #ccc;
align-items: center;
padding: 0 15px;
}
.article-container>* {
grid-row: 1/2;
}
.article-container #deletebtn {
display: none;
}
.article-container:hover {
background-color: #fafafa;
}
.article-container:hover #deletebtn {
display: block;
}
.title-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
color: #333;
font-size: 13pt;
}
.author-container {
color: #999;
font-size: 10pt;
margin-top: 3px;
}
.date-container {
color: #333;
font-size: 13pt;
}
.title-container div {
padding: 0 15px;
}
In summary, my goal is to integrate Angular Material list within the article-list.component.html and have it render correctly similar to how it appears in picture 1. https://i.sstatic.net/TIst3.png https://i.sstatic.net/lVZmz.png
==========================================