Angular 12 – NullInjectorError: No provider for AssetService?

Stackblitz – So this works in Angular 11: import { AssetsModule } from ‘./assets.module’; @Injectable({ providedIn: AssetsModule }) export class AssetService { However now in Angular 12 it creates the error: Error: R3InjectorError(AppModule)[AssetsModule -> AssetService -> AssetService -> AssetService]: NullInjectorError: No provider for AssetService! Any ideas? Source: Angular Material Quesions

Filtering for NavigationEnd events in Angular 12?

In Angular 11 this works: filter(event => event instanceof NavigationEnd), map((event: NavigationEnd) => event.url == ROUTES.APPLICATION)) However in Angular 12 it produces the error: Argument of type ‘MonoTypeOperatorFunction<Event_2>’ is not assignable to parameter of type ‘OperatorFunction<Event_2, NavigationEnd>’. Type ‘Observable<Event_2>’ is not assignable to type ‘Observable<NavigationEnd>’. Type ‘Event_2’ is not assignable to type ‘NavigationEnd’. Property […]

Rendering Sticky Columns Properly in Angular Material Data Table When Using Width 100% on the Table?

This is a fork of the Sticky Column Demo from Angular Material. In order for the sticky columns to render, it seems the <table> element must be inside a container that has a width less than the width of the table element. In the demo the <div class="example-container mat-elevation-z8"> container has a width of 700px […]

By Ole
Categorized as angular, angular-material, css, html Tagged , , ,

Template not found for Angular Material Data Table Footer?

I had to create a github repository for this question, because it works OK on Stackblitz. There are two projects. A library that package the data table component and a test project that tests it. The data-table component in the library project is trying to render this footer row: <tr mat-footer-row *matFooterRowDef="[‘nodata’]"></tr> The nodata template […]

Creating an Angular Material Footer Cell Definition that Spans the Entire Table?

This definition worked in the flex layout of Angular Material Data Table: <ng-container matColumnDef="nodata"> <td mat-footer-cell *matFooterCellDef [attr.colspan]="this.displayedColumns.length || 100" > {{noDataMessage}} </td> </ng-container> I’m attempting to move it to the table layout. This is the demo – Based on one of the Angular Material Documentation Demos. At first I was getting this error: core.umd.js? […]

Setting the Angular Material Data Table Header Left CSS Property with ngStyle for Sticky Columns?

In this demo I’m trying to set the left CSS property of the CUSTOMER mat-header-cell dynamically to 64px using ngStyle but it looks like Angular overwrites the value with what it thinks it should be … 216px after the ngStyle update is applied. Thoughts on how to fix this? Source: Angular Material Quesions

By Ole
Categorized as angular, angular-material, css, html, typescript Tagged , , , ,

How to override Angular Material Data Table CSS styles when the table is packaged?

I have a packaged Angular Material Data Table. I was thinking about adding an @Input property for an object with custom CSS properties for certain columns and then using ngStyle to apply these, but this has shortcomings as illustrated in this question. So instead of doing that I was thinking perhaps I could render css […]

By Ole
Categorized as angular, angular-material, css, html, sass Tagged , , , ,

Styling a library component once it’s been packaged?

How do we style library packaged component from via styles.scss? For example suppose we have a <hello-component> and the template looks like this: <h1 class="fs-HelloHeading">Hello {{ name }}!</h1> How can be override the CSS inside fs-HelloHeading class and do it in a way that is context sensitive? So for example if <hello-component> is inside <party-component> […]

By Ole
Categorized as angular, css, javascript, sass Tagged , , ,

Dynamic Adjustment of Angular’s Positioning of Material Data Table Sticky Columns?

In this demo, the second sticky column is offset 216px from the left. This causes extra space to show between the first ID column and the CUSTOMER column. It looks like Angular is calculating this, because it’s not something the CSS is setting, so it probably does it based on the tables CSS settings. However […]

Styling a MatHeaderCell dynamically with NgStyle?

I’m trying to provide dynamic styling to a MatHeaderCell instance like this: [ngStyle]="styleHeaderCell(c)" I’ve created a demo here. I can see that: styleHeaderCell(c) Receives the column and returns and object however the style is not applied, and so the column still has a min width of 12rem and I want it to be 4rem. Thoughts? […]

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us