41fea84957
Previously, it was possible to set the live-example title as content in
the `<live-example>` element. This relied on our custom loader
functionality that extracted the content from the DOM element before
passing it to the Angular compiler and stored it on a property for later
retrieval.
Since we switched to custom elements (and got rid of the custom loader),
the property is no longer populated with the contents. As a result, many
live examples show the default title ("live example") instead of the one
specified as content.
This commit fixes it by projecting the content into an invisible node
for later retrieval (similar to what we do in other components, such as
the `CodeExampleComponent`).
PR Close #23960
24 lines
929 B
HTML
24 lines
929 B
HTML
<!-- Content projection is used to get the content HTML provided to the component. -->
|
|
<span #content style="display: none"><ng-content></ng-content></span>
|
|
|
|
<span [ngSwitch]="mode">
|
|
<span *ngSwitchCase="'disabled'">{{title}} <em>(not available on this device)</em></span>
|
|
<span *ngSwitchCase="'embedded'">
|
|
<div title="{{title}}">
|
|
<aio-embedded-stackblitz [src]="stackblitz"></aio-embedded-stackblitz>
|
|
</div>
|
|
<p *ngIf="enableDownload">
|
|
You can also <a [href]="zip" download title="Download example">download this example</a>.
|
|
</p>
|
|
</span>
|
|
<span *ngSwitchCase="'downloadOnly'">
|
|
<a [href]="zip" download title="{{title}}">{{title}}</a>
|
|
</span>
|
|
<span *ngSwitchDefault>
|
|
<a [href]="stackblitz" target="_blank" title="{{title}}">{{title}}</a>
|
|
<span *ngIf="enableDownload">
|
|
/ <a [href]="zip" download title="Download example">download example</a>
|
|
</span>
|
|
</span>
|
|
</span>
|