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.
19 lines
784 B
HTML
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>
|