How to use the *deferredContent directives in angular dart components?

Issue

I just noticed the new angular dart components, so I was attemping to use them this way :

  <material-expansionpanel-set>
      <material-expansionpanel *ngFor="let place of places" name="{{place.name}}" showSaveCancel="false">
        <div *deferredContent>{{place.name}}</div>
      </material-expansionpanel>
  </material-expansionpanel-set>

I was expecting the elements inside the div to be displayed automagically in a differed manner. It seams I don’t get how it works : the statement inside the div is never displayed (naturally this is just a test, I’m planning to put an entire component inside the *deferredContent div.

This is the html I get.

<material-expansionpanel-set _ngcontent-toa-2="">
      <!--template bindings={}--><material-expansionpanel _ngcontent-toa-2="" showsavecancel="false" _nghost-toa-10="">
<div _ngcontent-toa-10="" class="panel themeable open" role="group" aria-label="myplace" aria-expanded="true">


  <!--template bindings={}--><header _ngcontent-toa-10="" buttondecorator="" role="button" class="" aria-label="Close myplace panel" tabindex="0" aria-disabled="false">
    <div _ngcontent-toa-10="" class="panel-name">
      <p _ngcontent-toa-10="" class="primary-text">myplace</p>
      <!--template bindings={}-->

    </div>

    <div _ngcontent-toa-10="" class="panel-description">

    </div>

    <!--template bindings={}--><glyph _ngcontent-toa-10="" buttondecorator="" class="expand-button" role="button" _nghost-toa-11="" tabindex="0" aria-disabled="false"><i _ngcontent-toa-11="" aria-hidden="true" class="material-icons">expand_less</i></glyph>
  </header>

  <main _ngcontent-toa-10="" class="">
    <div _ngcontent-toa-10="" class="content-wrapper">
      <div _ngcontent-toa-10="" class="content">

        <!--template bindings={}-->

      </div>
      <!--template bindings={}-->
    </div>

    <!--template bindings={}--><div _ngcontent-toa-10="" class="toolbelt">

    </div>

    <!--template bindings={}-->
  </main>

</div>
</material-expansionpanel>
  </material-expansionpanel-set>

If the idea is to implement DeferredContentAware and get notified when the component is visible, I’d be pretty deceived (since we could have done that manually by listening to open and close events)

Solution

material-expansionpanel should automatically fire events for *deferredContent.

Some simple questions:

  • Do you have DeferredContentDirective in your directives: const [ ...]?

  • What version of AngularDart are you using?

Answered By – matanlurey

Answer Checked By – David Marino (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.