javascript - Material expansion panel content - ng-template? - Stack Overflow

admin管理员组

文章数量:1318991

I have the following code, which I stole from here: .html

  <mat-expansion-panel class="mat-expansion-demo-width" #myPanel>

    <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
      <mat-panel-description>Click here to change view format.</mat-panel-description>
      <mat-panel-title>View Controls</mat-panel-title>
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
      This is the content text that makes sense here.
      <mat-checkbox>Trigger a ripple</mat-checkbox>
    </ng-template>

    foo bar baz

    <mat-action-row>
      <button mat-button (click)="myPanel.expanded = false">CANCEL</button>
    </mat-action-row>
  </mat-expansion-panel>

One question - I am confused, because the content inside the <ng-template> tag does not display, however "foo bar baz" does display. So what is the purpose of the content inside <ng-template> and why is it not displaying?

I have the following code, which I stole from here: https://github./angular/material2/blob/master/src/demo-app/expansion/expansion-demo.html

  <mat-expansion-panel class="mat-expansion-demo-width" #myPanel>

    <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
      <mat-panel-description>Click here to change view format.</mat-panel-description>
      <mat-panel-title>View Controls</mat-panel-title>
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
      This is the content text that makes sense here.
      <mat-checkbox>Trigger a ripple</mat-checkbox>
    </ng-template>

    foo bar baz

    <mat-action-row>
      <button mat-button (click)="myPanel.expanded = false">CANCEL</button>
    </mat-action-row>
  </mat-expansion-panel>

One question - I am confused, because the content inside the <ng-template> tag does not display, however "foo bar baz" does display. So what is the purpose of the content inside <ng-template> and why is it not displaying?

• javascript
• html
• angular
• dom
• angular-material2

Share Improve this question Follow asked Jan 31, 2018 at 20:26 Alexander MillsAlexander Mills 101k166166 gold badges536536 silver badges914914 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

<ng-template> doesn't render until you call it. Try this:

<mat-expansion-panel class="mat-expansion-demo-width" #myPanel>

  <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
    <mat-panel-description>Click here to change view format.</mat-panel-description>
    <mat-panel-title>View Controls</mat-panel-title>
  </mat-expansion-panel-header>

  <ng-container *ngTemplateOutlet="matExpansionPanelContent"></ng-container>

  foo bar baz

  <mat-action-row>
    <button mat-button (click)="myPanel.expanded = false">CANCEL</button>
  </mat-action-row>
</mat-expansion-panel>

<ng-template #matExpansionPanelContent>                <-- Note the #hashtag
  This is the content text that makes sense here.
  <mat-checkbox>Trigger a ripple</mat-checkbox>
</ng-template>

This way you can build the <ng-template> once, and re-use it all of the place.

本文标签： javascriptMaterial expansion panel contentngtemplateStack Overflow