Angular 4: routerLink anchors within material md-cell won't work

Question

UPDATED: the md-table is wrapped in some containers using flex layout directives that seem to be causing this issue. I am updating the code to show these wrappers. Specifically, the fxLayoutGap in the outer wrapper is breaking the app

I have this data table in angular 4 that shows a list of records from a database. On a specific row click (actually, cell click), the app is meant to show the detailed data of that row (another url in the app). Im trying to achieve this by using a routerLink anchor within the md-cells like this:

<div class="main-content-container" fxLayoutGap="10px">
    <div class="table-container mat-elevation-z8" fxLayout.xs="column">
        <md-table #table [dataSource]="dataSource" fxFlex="100">

            <ng-container cdkColumnDef="id">
                <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
                <md-cell *cdkCellDef="let row"> 
                    <a [routerLink]="['/detail']">{{row.id}}</a> 
                </md-cell>
            </ng-container>
            ...
        </md-table>
    </div>
</div>

But when i try this out i get a weird error in the browser console that seems unrelated to anything in my code:

ERROR Error: Uncaught (in promise): TypeError: _this._renderer.setStyle is not a function
TypeError: _this._renderer.setStyle is not a function
at base.js:107
at Array.forEach (<anonymous>)
at base.js:107
at Array.forEach (<anonymous>)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/base.js.BaseFxDirective._applyStyleToElements (base.js:106)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/base.js.BaseFxDirective._getFlowDirection (base.js:78)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._validateValue (flex.js:200)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._updateStyle (flex.js:192)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._onLayoutChange (flex.js:183)
at SafeSubscriber._next (flex.js:50)
at base.js:107
at Array.forEach (<anonymous>)
at base.js:107
at Array.forEach (<anonymous>)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/base.js.BaseFxDirective._applyStyleToElements (base.js:106)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/base.js.BaseFxDirective._getFlowDirection (base.js:78)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._validateValue (flex.js:200)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._updateStyle (flex.js:192)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._onLayoutChange (flex.js:183)
at SafeSubscriber._next (flex.js:50)
at resolvePromise (zone.js:770)
at resolvePromise (zone.js:741)
at zone.js:818
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:584)
at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)

Well, it is obviously something that has to do with the anchor but... don't know if im missing some concept or what, and there are not a lot of examples out there.

I just noticed that the log error is showing several errors in the flex layout module. So I took out all the flex directives (which i didn't include in my original post, see the updated version) and it works. After some debugging i found out that the fxLayoutGap causes the issue. Don't know whether it's a bug or a misuse of the directive. But I don't think that is typescript related. — Kilian Perdomo Curbelo, Jul 13 '17 at 08:45

Angular 4: routerLink anchors within material md-cell won't work

0 Answers0