angular-docs-cn/aio/src/app/embedded/live-example/live-example.component.html
Ward Bell 9a5084412d feat(aio): force plunker to embedded-style on narrow (mobile) screens
Regular plunker is unusable on narrow screen
Refactors LiveExampleComponent and adds tests.
Refactor width detection to `DeviceService` because need to know width change in 2 places.
Keep “disable” option add in earlier spikes because simple and potentially useful in future.
2017-04-16 08:12:48 +01:00

19 lines
784 B
HTML

<span [ngSwitch]="mode">
<span *ngSwitchCase="'disabled'">{{title}} <em>(not available on this device)</em></span>
<span *ngSwitchCase="'embedded'">
<div *ngIf="showEmbedded" title="{{title}}">
<aio-embedded-plunker [src]="plnkr"></aio-embedded-plunker>
</div>
<img *ngIf="!showEmbedded" (click)="toggleEmbedded()" [src]="plnkrImg" width="100%" height="100%" alt="{{title}}">
<p *ngIf="enableDownload">
You can also <a [href]="zip" download title="Download example">download this example</a>.
</p>
</span>
<span *ngSwitchDefault>
<a [href]="plnkr" target="_blank" title="{{title}}">{{title}}</a>
<span *ngIf="enableDownload">
/ <a [href]="zip" download title="Download example">download example</a>
</span>
</span>
</span>