Right now the Vehicles Component HMTL file is laying out the vehicle results using Angular templating like we used in, “Chapter 6: Angular, another Client-Side Language – SPAs (Single Page Applications)”.
One of the advantages of using a component library is it lets you develop and add functionality rapidly without having to do a lot of programming. We’ll see that in action in the next few modules by using the Angular Material MatTable component and implementing paging and sorting.
Import the Components
The first thing we need to do is import MatTableModule into our AngularMaterialModule module so we can use it. Open the angular-material.module.ts file and make the modifications below.
FredsCars/src/app/angular-material.module.ts
import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
const angularMatModules = [
MatToolbarModule,
MatIconModule,
MatButtonModule,
MatTableModule
]
@NgModule({
imports: [
angularMatModules
],
exports: [
angularMatModules
]
})
export class AngularMaterialModule { }
In the code above, we are importing MatTableModule so we can use it in the Vehicles component. But we also added a constant called angularMatModules where we can specify all of the Angular Material components we want to use. Now whenever we want to import a new AM module, we don’t have to update two places (imports and exports properties in the NgModule decorator). We simply add it to the angularMatModules const array.
Define the columns array
When using MatTable, we need to define an array in the component’s TypeScript file specifying the columns available to use in the HTML template. Open the vehicles.component.ts file and make the following modifications.
FredsCars/src/app/vehicles/vehicles.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Vehicle } from './vehicle';
import { environment } from '../../environments/environment';
@Component({
selector: 'app-vehicles',
templateUrl: './vehicles.component.html',
styleUrls: ['./vehicles.component.scss']
})
export class VehiclesComponent implements OnInit {
public vehicles?: Vehicle[];
constructor(private http: HttpClient) {
}
columnsToDisplay: string[] = ['id', 'vehicleType', 'status', 'year', 'make', 'model', 'color', 'price'];
ngOnInit() {
this.http.get<Vehicle[]>(environment.baseUrl + 'api/vehicles').subscribe(result => {
this.vehicles = result;
}, error => console.error(error));
}
}
In the code above we defined a constant named columnsToDisplay of type string array with the column names we will render in the HTML template.
These column names match up with the properties returned by our vehicles API HTTP GET service for each vehicle. The following is a snapshot of the first couple of vehicles returned in the results from our API service.
{
"id": 1,
"status": "New",
"year": "2021",
"make": "Dodge",
"model": "Challenger",
"color": "Frostbite",
"price": 64164,
"vin": "2C3CDZFJ8MH631199",
"vehicleType": "Car"
},
{
"id": 2,
"status": "Used",
"year": "2020",
"make": "Ford",
"model": "Escape",
"color": "Oxford White",
"price": 22999,
"vin": "1FMCU0F63LUC25826",
"vehicleType": "Car"
},We do not include the vin property returned for each vehicle in the JSON results of the API service in the columnsToDisplay array in the TypeScript file because that doesn’t seem like something a user would be interested in when conducting a search on the Vehicles page (we will be adding search features soon to the Vehicles component). We will show the VIN number on the details, edit and create screens later on.
Use MatTable in the HTML
Now that we have imported the MatTableModule into our custom AngularMaterialModule and defined the columns we want to render in the TypeScript file, we can apply MatTable to a table element.
Open the vehicles.component.html file and fill it with the contents below.
<p *ngIf="!vehicles"><em>Loading...</em></p>
<table mat-table [dataSource]="vehicles"
*ngIf="vehicles">
<ng-container matColumnDef="vehicleType">
<th mat-header-cell *matHeaderCellDef>Category</th>
<td mat-cell *matCellDef="let item">
<b>{{ item.vehicleType }}</b>
</td>
</ng-container>
<mat-text-column name="id"></mat-text-column>
<mat-text-column name="status"></mat-text-column>
<mat-text-column name="year"></mat-text-column>
<mat-text-column name="make"></mat-text-column>
<mat-text-column name="model"></mat-text-column>
<mat-text-column name="color"></mat-text-column>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef>Price</th>
<td mat-cell *matCellDef="let item">
{{ item.price | currency:"USD" }}
</td>
</ng-container>
<!-- No VIN on vehicles page. We will show this on the details page -->
<!-- Header Template -->
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<!-- Row Template -->
<tr mat-row *matRowDef="let row; columns: columnsToDisplay"></tr>
</table>The results in your browser should now look similar to the following screenshot.
Let’s take a look at the new HTML in the Vehicles component template above.
Apply mat-table and create the databinding
The first thing we did is apply the mat-table attribute to the html <table> element. We also create the datasource databinding to our vehicles variable which is holding the JSON results from our Vehicles API HTTP GET method.
<table mat-table [dataSource]="vehicles"
*ngIf="vehicles">Define the row templates
Next, at the bottom of the HTML, we defined the row templates.
<!-- Header Template -->
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<!-- Row Template -->
<tr mat-row *matRowDef="let row; columns: columnsToDisplay"></tr>Here we are creating row templates for the header row of the HTML table and each data row by applying the mat-header-row and mat-row attributes respectively. *matHeaderRowDef in the header row template uses our columnsToDisplay constant to specify which columns to render as does *matRowDef in the row template.
Define the column templates
Finally, for the last step we define a column template for each column we specified we would render in the columnsToDisplay constant and applied to the mat-row template in the above section.
Define the vehicleType column with ng-container
We defined the vehicleType column template using the ng-container element which is a special element that can hold structural directives without adding new elements to the DOM.
<ng-container matColumnDef="vehicleType">
<th mat-header-cell *matHeaderCellDef>Category</th>
<td mat-cell *matCellDef="let item">
<b>{{ item.vehicleType }}</b>
</td>
</ng-container>Here we give the column template a unique name of vehicleType using the matColumnDef attribute on the ng-container element.
Next we describe the <th> element for the column template by applying the mat-header-cell attribute and *matHeaderCell directive. The text in the header cell will be “Category” since the vehicleType for each vehicle represents whether the vehicle is a car, jeep, or truck.
Finally, we specify the <td> element for the column template by applying the mat-cell attribute and assigning the expression, “let item” to the *matCellDef directive. This creates a variable for each data row called item which we can use to access the vehicle for that row and each of it’s properties we need.
We then lay out the vehicleType (Category) for each row using the one way databinding expression:{{ item.vehicleType }} surrounded by bold tags to give the category for each vehicle a bold appearance.
This renders the columns header and row values with the following appearance.
Define the price column with ng-container
We also defined the price column template using the ng-container element.
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef>Price</th>
<td mat-cell *matCellDef="let item">
{{ item.price | currency:"USD" }}
</td>
</ng-container>Here we give the column template a unique name of price using the matColumnDef attribute on the ng-container element.
Next we describe the <th> element for the column template by applying the mat-header-cell attribute and *matHeaderCell directive. The text in the header cell will be “Price”.
Finally, we again specify the <td> element for the column template by applying the mat-cell attribute and assigning the expression, “let item” to the *matCellDef directive. As before this creates a variable for each data row called item which we can use to access the vehicle for that row and each of it’s properties we need.
We then lay out the price for each row once again using a one way databinding expression:
{{ item.price | currency:"USD" }}.
Within the databinding expression a CurrencyPipe is used to format the number item.price to a currency string.
This renders the columns header and row values with the following appearance.
Define simple columns using mat-text-column
For the vehicleType (Category) and price columns we had to use a ng-container type template because each column had a special need. For vehicleType, we wanted different header text from the property name; Category rather then vehicleType. And for price we needed to use a pipe to transform the price number to a currency string.
But, if your column is only responsible for rendering a single string value for the header and cells, you can instead define your column using the mat-text-column. And that is what we did for the rest of the columns.
<mat-text-column name="id"></mat-text-column>
<mat-text-column name="status"></mat-text-column>
<mat-text-column name="year"></mat-text-column>
<mat-text-column name="make"></mat-text-column>
<mat-text-column name="model"></mat-text-column>
<mat-text-column name="color"></mat-text-column>Note: another alternative for the the vehicle (Category) column would have been to use mat-text-column and override the header text with the headerText input.
<mat-text-column name="vehicleType" [headerText]="'Category'"></mat-text-column>The following screenshot shows how these columns render.
Styling MatTable
Well, it looks like we have successfully replaced the table created with regular Angular templating with an Angular Material MatTable Component.
But some of our styling is no longer taking affect. The appearance of the table header columns has changed from this:
to this:
The styling of the table header columns text is different and the <tr> element in <thead> lost the background color of black. Plus there is much more padding in the <td> cells within the <tbody><tr> portion of the table.
Next, let’s see if we can regain some control over the styling.
Creating Mixins with Sass
We are about to try and create some custom styles for an AM MatTable component within our Vehicles component. But who knows? We may add another table in another component in our application. Or even dozens more tables. Successful applications tend to grow as users request more and more features.
It would be nice if there was a way to create groups of custom CSS properties for a MatTable header row and MatTable data rows.
That way we could define some default properties for text color and font-size as well as row background colors and provide a way to customize those properties if we need to change the defaults. We can do this using Sass Mixins.
Create a file called _mixins.scss in the FredsCars/src folder and fill it with the following contents.
FredsCars/src/_mixins.scss
/* Custom MatTable header row css */
@mixin custom-mat-table-header-row( $font-size: medium, $text-color: #FFFFFF) {
font-size: $font-size;
color: $text-color;
}In the Saas code above we are using the @mixin directive to create our MatTable header row mixin. It takes two parameters for font-size and text-color and sets the default values to medium (the default for font-size) and white respectively. Then it sets the CSS font-size and color properties to the $font-size and $text-color parameter values. Now any element in our components we apply this mixin to will have a font-size of medium and text-color of white but allows us to change those values on the fly if needed. This will make our CSS much more DRY then having to repeat the same styles on dozens of tables if need be.
Using a Saas Mixin
To use the custom mixin we created above in the Vehicles component, we need to include the _mixins.scss file we created earlier in the vehicles.component.scss file. By naming _mixins.scss with a leading underscore, we let Saas know that the file is only a partial file and that it should not be generated into a CSS file.
Open vehicles.component.scss and modify it’s contents with the code below.
FredsCars/src/app/vehicles/vehicles.component.scss
@use '../../mixins' as mixins;
$lightBlue: #add8e6;
table {
/*border-spacing: 0px;*/
tr {
&:nth-child(even) {
background-color: $lightBlue;
}
height: auto;
td, th {
padding: 5px;
}
}
}
tr.mat-mdc-header-row{
background-color: black;
}
/* USING A MIXIN EXAMPLE! */
/* only works on column templates using ng-container */
/* -- Doesn't work for mat-text-column */
th.mat-mdc-header-cell {
@include mixins.custom-mat-table-header-row;
}
/* only works on column templates using ng-container */
/* -- Doesn't work for mat-text-column */
td.mat-mdc-cell {
border: 1px solid black;
}At this point your browser results should look similar to the following.
Wait a minute! What? It looks like our mixin worked but only on the Category and Price columns. The rest of the columns are still a default dark color and so cannot be seen through the black background color. Also I tried to put a border around each <td> element in the data rows just to see if we have control over data row <td> elements as well. And again only the ng-container columns are working.
Obviously something is wrong. And I’ll come back to this problem. But first, let’s look at the code in vehicles.component.scss above.
The fist line uses the @use rule to load our mixins file.
@use '../../mixins' as mixins;Next we create our variable for the light blue color we apply to even numbered data row backgrounds as before.
$lightBlue: #add8e6;Next we also have our table nesting structure as before with some minor modifications.
table {
/*border-spacing: 0px;*/
tr {
&:nth-child(even) {
background-color: $lightBlue;
}
height: auto;
td, th {
padding: 5px;
}
}
}Above I commented out “border-spacing: 0px;” because it was not working on a MatTable component. To fix this I added “height: auto;” to the <tr> element nested in the <table> element. Also in the <tr> portion of the nesting structure every even numbered row is set to a background-color of lightblue and and we pad the <td> and <th> cells with 5 pixels as before.
Below the nesting structure we set the background-color of the table header row to black.
tr.mat-mdc-header-row{
background-color: black;
}This style targets a <tr> element with a class of mat-mdc-header-row which the MatTable Component adds as we can see in the WebDev tools by pressing the F12 key in the browser.
Defining the problem
The next CSS rule targets <th> elements with a class of mat-mdc-header-cell which MatTable adds to each <th> element and applies our custom-mat-table-header-row mixin using the @include at-rule.
th.mat-mdc-header-cell {
@include mixins.custom-mat-table-header-row;
}Again this renders the header row like this.
And we could add in parameters to the include mixin statement for font-size of 26 pixels and text-color of our $lightBlue variable like this :
th.mat-mdc-header-cell {
@include mixins.custom-mat-table-header-row(26px, $lightBlue);
}Which would render like the screenshot below.
The header text is now noticeably bigger and the header text color is back to our custom light blue color. Pretty snazzy right? But we can see the crux of the problem here. Even using a mixin only the Category and Price ng-container columns are able to accept our style. The rest of the mat-text-column columns are not affected.
And we get the same problem with our last style rule.
td.mat-mdc-cell {
border: 1px solid black;
}This style targets all <td> elements with a class of mat-mdc-cell and applies a border of 1 pixel solid black. But we get the same problem here. Only data rows for the ng-container columns work. Not the mat-text-columns as you can see in all of the screenshots above.
Understanding the problem
As stated at the beginning of this module the advantage of using a component library is it enables you to develop rapidly and use ready made features like paging and sorting without a lot of programming. However, there is a trade off. One of the cons is when you run into problems like this and you end up having to hack a little to get things to work the way you want. Or just accept the default styles and move on.
The interesting thing is the styling we tried to do above works in Angular Material for Angular 13 for both ng-container and mat-text-column templates. The problem with targeting mat-text-column templates with CSS does not seem to appear until Angular 15. We’ll just have to hope this issue gets resolved in a future version. But for now we need to figure out how to deal with it.
One thing I noticed is that Angular Material 15.x adds “mdc” to a lot of the MatTable class names. For instance, the following Angular Material 13.x class names:
- mat-header-row
- mat-header-cell
- mat-cell
became the following in Angular Material 15.x:
- mat-mdc-header-row
- mat-mdc-header-cell
- mat-mdc-cell
Let’s examine these class names once again in the WebDev tools for the Vehicles component.
In the screenshot above, we can see MatTable added the mat-mdc-header-cell class to the Category column. It also added an _ngcontent-ytn-c15 attribute. Price is the only other column that gets this attribute. What do Category and Price have in common? By now we are well aware they are the only ng-container type columns. None of the five mat-text-column(s) get this attribute. So what is it? What is this attribute? This is a unique id Angular gives a component, in this case the Vehicles component. This enables Angular to scope the Vehicles component and wrap it’s content in an element with this id as an attribute, like this:
<app-vehicles _nghost-ytn-c5>
...
</app-vehicles>And so all of the styles in vehicles.component.scss will only be applied to the Vehicles component.
_nghost-[your unique id]There is a very good article written on this at: https://betterprogramming.pub/best-way-to-overwrite-angular-materials-styles-e38dc8b84962
If we hone in to the styles panel in the WebDev tools we can see our rule to apply the following mixin:
th.mat-mdc-header-cell {
@include mixins.custom-mat-table-header-row(26px, $lightBlue);
}is working, but only for <th> elements with the mat-mdc-header-cell class and the _ngcontent-ytn-c15 attribute.
Now let’s take a look at what happens to a mat-text-column using the WebDevTools. The following screenshot uses the Status column as an example.
A mat-text-column also gets the mat-mdc-header-cell class. But it does not get the _ngcontent-ytn-c15 attribute. So it is not scoped to the Vehicles component as far as CSS goes.
Again if we hone in on the Styles panel in the WebDev tools, we can see exactly what happens as an effect of this missing attribute.
Because the mat-text-columns don’t have the unique id attribute, _ngcontent-ytn-c15, they are not scoped to the Vehicles component. So, the font-size and text color are set in in indigo-pink.css, the Angular Material theme we chose when we installed it.
Addressing the problem
Now that we thoroughly understand what is the cause of mat-text-columns not receiving our styles, what are we going to do about it? One option is just to make every column an ng-container template. Let’s do that and see if does the trick.
Open vehicles.component.html and modify it with the contents below.
FredsCars/src/app/vehicles/vehicles.component.html
<p *ngIf="!vehicles"><em>Loading...</em></p>
<table mat-table [dataSource]="vehicles"
*ngIf="vehicles">
<ng-container matColumnDef="vehicleType">
<th mat-header-cell *matHeaderCellDef>Category</th>
<td mat-cell *matCellDef="let item">
<b>{{ item.vehicleType }}</b>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let item">
{{ item.id }}
</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>Status</th>
<td mat-cell *matCellDef="let item">
{{ item.status }}
</td>
</ng-container>
<ng-container matColumnDef="year">
<th mat-header-cell *matHeaderCellDef>Year</th>
<td mat-cell *matCellDef="let item">
{{ item.year }}
</td>
</ng-container>
<ng-container matColumnDef="make">
<th mat-header-cell *matHeaderCellDef>Make</th>
<td mat-cell *matCellDef="let item">
{{ item.make }}
</td>
</ng-container>
<ng-container matColumnDef="model">
<th mat-header-cell *matHeaderCellDef>Model</th>
<td mat-cell *matCellDef="let item">
{{ item.model }}
</td>
</ng-container>
<ng-container matColumnDef="color">
<th mat-header-cell *matHeaderCellDef>Color</th>
<td mat-cell *matCellDef="let item">
{{ item.color }}
</td>
</ng-container>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef>Price</th>
<td mat-cell *matCellDef="let item">
{{ item.price | currency:"USD" }}
</td>
</ng-container>
<!-- No VIN on vehicles page. We will show this on the details page -->
<!-- Header Template -->
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<!-- Row Template -->
<tr mat-row *matRowDef="let row; columns: columnsToDisplay"></tr>
</table>The results in your browser should now look like the following.
Beautiful! Worked like a charm. Our <th> and <td> styling are now reaching all of our columns.
Next let’s take out the parameters in the call to the mixin and go with the defaults. We’ll also comment out the rule making data row <td> cells get a 1 pixel solid black background. Open vehicles.component.scss and modify it with the code highlighted in bold blue font below.
FredsCars/src/app/vehicles/vehicles.component.scss
/* --existing code */
/* USING A MIXIN EXAMPLE! */
/* only works on column templates using ng-container */
/* -- Doesn't work for mat-text-column */
th.mat-mdc-header-cell {
@include mixins.custom-mat-table-header-row;
}
/* only works on column templates using ng-container */
/* -- Doesn't work for mat-text-column */
/*td.mat-mdc-cell {
border: 1px solid black;
}*/And now the results in your browser should look similar to the following.
That’s a much crisper look. I like the white on black text in the header. And the data rows look much cleaner with out a border on each cell.
But now that we know we have control over our styling, let’s back it off a little bit. Let’s comment the call to the mixin in vehicles.component.scss and the table header row’s black background. The two rules will still be there if we need them. But soon we are going to add paging and sorting into the MatTable. And we want to see what the default look of the controls are and go from there. So let’s make one final modification to vehicles.component.scss.
/* --existing code-- */
/*tr.mat-mdc-header-row{
background-color: black;
}*/
/* USING A MIXIN EXAMPLE! */
/* only works on column templates using ng-container */
/* -- Doesn't work for mat-text-column */
/*th.mat-mdc-header-cell {
@include mixins.custom-mat-table-header-row;
}*/At this point the results in your browser should look similar to the following. We are now back to the table header row displaying the default MatTable styling.
What’s Next
We covered a lot of ground in this module. We learned about using Saas mixins and a lot about how Angular works behind the scenes with components and scoping and how this affects styling. In the next few modules we are going to use an Angular Material Progress Spinner component and impliment paging and sorting for the Vehicles MatTable.