CODEWITHSUNDEEP
angularangular-dart
Benjamin Jesuiter
Benjamin Jesuiter

Reputation: 1162

Angular2-Dart : Component Template not loading

Context

I'm trying to build a menu component for angular2 dart.
Here is a screenshot: Menu screenshot
-> more on the crappy formatting of menu items after "Problem" heading below

I have an AppComponent for preview, as angular2 style suggests. This is called and is the bootstrap component.

The AppComponent template contains the code for my menu components as displayed below: 

<jb-menu [activeBreakpoints]="activeBreakpoints"
     [collapsedStateBreakpoints]="collapsedStateBreakpoints"
     customCssPath="css/jbMenuStyles.css"
     #menu>

    <jb-menu-item *ngFor="let url of urls; let i=index"
              customCssPath="css/jbMenuItemStyles.css"
              [openInNewTab]="true"
              [disableNavigation]="true"
              [collapsedMode]="menu.isCollapsible"
              [url]="url"
              [active]="isActiveUrl(url)"
              [textContent]="menuItems[url]"
              (click)="onClick(url)">
    </jb-menu-item>
</jb-menu>

Both menu components (JbMenu and JbMenuItem) are registered in AppComponent: directives: const [JbMenu, JbMenuItem])

I have some logging inside both components to test proper initialization, which is shown below. 

2016.43.17 08:43:25.124 jb_menu.jb_menu_item    
[INFO]: JbMenuItem constructor: 802477160 VM645:1 

2016.43.17 08:43:25.132 jb_menu.jb_menu_item    
[INFO]: JbMenuItem constructor: 785692334 VM645:1 

2016.43.17 08:43:25.133 jb_menu.jb_menu_item    
[INFO]: JbMenuItem constructor: 930402410 VM645:1 

2016.43.17 08:43:25.168 jb_menu.jb_menu_item    
[FINEST]:        hash: 802477160,
    url: http://www.w3schools.com/,
    customCssPath: css/jbMenuItemStyles.css,
    active: true,
    collapsedMode: false,
    isMenuButton: null,
    openInNewTab: true,
    disableNavigation: true 
 VM645:1 

2016.43.17 08:43:25.171 jb_menu.jb_menu_item    
[FINEST]:           hash: 785692334,
    url: http://www.apple.com/de/,
    customCssPath: css/jbMenuItemStyles.css,
    active: false,
    collapsedMode: false,
    isMenuButton: null,
    openInNewTab: true,
    disableNavigation: true
VM645:1 

2016.43.17 08:43:25.172 jb_menu.jb_menu_item    
[FINEST]:           hash: 930402410,
    url: http://www.chip.de/#,
    customCssPath: css/jbMenuItemStyles.css,
    active: false,
    collapsedMode: false,
    isMenuButton: null,
    openInNewTab: true,
    disableNavigation: true
VM645:1 

2016.43.17 08:43:25.180 jb_menu.jb_menu_component   
[FINEST]:           customCssPath: css/jbMenuStyles.css,
    collapsedStateBreakpoints: [small, medium, large],
    _operationMode: responsive,
    labelCollapsed = Menü,
    isOpen: true,
    isCollapsible: true

Problem

The console log tells me, that both JbMenu and JbMenuItem are initialized as intended. But for some reason the template of JbMenuItem was not loaded. This could be seen also in the screenshot at the top of this post, as no styles where applied to menu items

<jb-menu _ngcontent-mae-1="" customcsspath="css/jbMenuStyles.css" _nghost-mae-3=""><link _ngcontent-mae-3="" rel="stylesheet" type="text/css" href="css/jbMenuStyles.css">

    <nav _ngcontent-mae-3="" class="">
    <!--template bindings={}-->
    <!--template bindings={}-->
    <!--template bindings={}-->
    <jb-menu-item _ngcontent-mae-1=""
                  customcsspath="css/jbMenuItemStyles.css" 
                  _nghost-mae-4=""> W3C Schools </jb-menu-item>
    <jb-menu-item _ngcontent-mae-1=""
                  customcsspath="css/jbMenuItemStyles.css" 
                  _nghost-mae-4="">Apple</jb-menu-item>
    <jb-menu-item _ngcontent-mae-1=""
                  customcsspath="css/jbMenuItemStyles.css" 
                  _nghost-mae-4="">Chip</jb-menu-item>
    </nav>
</jb-menu>

Each JbMenuItem component should contain this template: 

<!--External stylesheet which can be passed from the user to 
    incorporate outside styles for the inside template.
    CSS-Variables are not useful for now ;)-->
<link rel="stylesheet" type="text/css" [href]="safeCustomCssUrl">

<a [href]="url" 
   [class.active]="active
   [class.collapsed]="collapsedMode" 
   (click)="onClick($event)"
   [target]="target">
   <!--this will transclude the button content though this component-->
   <ng-content></ng-content>
</a>

Does anybody have a good idea how to solve this?

Thanks in advance! :)

Upvotes: 3

Views: 201

Answers (1)

Benjamin Jesuiter
Benjamin Jesuiter

Reputation: 1162

Okay, I found the answer myself.

The Problem was the binding of [textContent] inside jb-menu-item tag inside AppComponent Template. 

<jb-menu-item *ngFor="let url of urls; let i=index"
              ...
              [textContent]="menuItems[url]">
</jb-menu-item>

This disables ANY rendering of subcomponents inside jb-menu-item tag!

Solution

Bind the text content of jb-menu-item with normal curly braces binding to jb-menu-item tag and remove the binding to textContent. 

<jb-menu-item *ngFor="let url of urls; let i=index">
    {{menuItems[url]}}
</jb-menu-item>

Deeper Background:

There was a ng-bind directive in angular-dart to bind something to the content of a tag without using double curly braces inside the tag and ng-cloak. I thought, i could use that too in angular2-dart, but instead of binding with ng-bind attribute (which doesn't exists anymore), I thought I can bind directly to the [textContent] property, which proved to be wrong.

Upvotes: 2

Related Questions