angular-docs-cn/aio/src/app/custom-elements/live-example/live-example.component.html
George Kalpakas f8c6947205 fix(aio): avoid unnecessary re-calculations in live-examples (#23960)
With `plnkrs`, we used to choose a different plnkr mode (normal vs
embedded) based on the size of the screen. This affected the layout of
the plnkr page ("embedded" plnkr mode was usable on small screens, while
"normal" mode wasn't). This is not to be confused with the live-example
mode we use today to determine whether the live-example should be a link
(that open StackBlitz on a new page) or embedded into the document
(using an iframe).

Since we no longer need to change the live-example URL based on the
screen size, there is no need to listen for rezise events on Window. The
necessary properties can be computed once and certain variables are
obsolete.

PR Close #23960
2018-05-21 16:10:12 -04:00

23 lines
836 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="'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>