Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
107 lines (93 sloc) 4.37 KB
<mat-toolbar color="primary">
<div class="page-title">Angular Update Guide</div>
</mat-toolbar>
<div class="page">
<div class="wizard">
<div>
<mat-card>
<h3>
Select the options matching your project:
</h3>
<mat-card-content>
<h4>Angular Version</h4>
<mat-form-field appearance="outline">
<select (change)="from = getVersion($event.target.value)" placeholder="from" matNativeControl>
<option *ngFor="let version of versions" [value]="version.name" [selected]="version.name === from.name">{{version.name}}</option>
</select>
</mat-form-field>
<mat-form-field appearance="outline">
<select (change)="to = getVersion($event.target.value)" placeholder="to" matNativeControl>
<option *ngFor="let version of versions" [value]="version.name" [selected]="version.name === to.name">{{version.name}}</option>
</select>
</mat-form-field>
<div *ngIf="from.number >= 900 || to.number >= 900">
<br/>
<strong style="color:darkred">Warning:</strong> Plans for releases after the current major release are not finalized and may change. These recommendations
are based on scheduled deprecations.
</div>
<div *ngIf="from.number > to.number">
<br/>
<strong style="color:darkred">Warning:</strong> We do not currently support downgrading versions of Angular.
</div>
<div *ngIf="to.number - from.number > 100">
<br/>
<strong style="color:darkred">Warning:</strong> We do not recommend moving across multiple major versions.
</div>
<h4>App Complexity</h4>
<ng-container>
<mat-button-toggle-group (change)="level = $event.value" [value]="level">
<mat-button-toggle [value]="1">Basic</mat-button-toggle>
<mat-button-toggle [value]="2">Medium</mat-button-toggle>
<mat-button-toggle [value]="3">Advanced</mat-button-toggle>
</mat-button-toggle-group>
</ng-container>
<h4>Other Dependencies</h4>
<ng-container *ngFor="let option of optionList">
<p>
<mat-checkbox (change)="options[option.id] = $event.checked" [value]="options[option.id]">I use {{option.name}} {{option.description}}</mat-checkbox>
</p>
<mat-grid-tile [colspan]="2"></mat-grid-tile>
</ng-container>
<h4>Package Manager</h4>
<ng-container>
<mat-button-toggle-group (change)="packageManager = $event.value" [value]="packageManager">
<mat-button-toggle value="npm install">npm</mat-button-toggle>
<mat-button-toggle value="yarn add">yarn</mat-button-toggle>
</mat-button-toggle-group>
</ng-container>
</mat-card-content>
<mat-card-actions>
<button type="button" (click)="showUpdatePath()" mat-raised-button color="primary">Show me how to update!</button>
</mat-card-actions>
</mat-card>
</div>
</div>
<!-- RECOMMENDATIONS SECTION -->
<div class="recommendations" *ngIf="beforeRecommendations.length > 0 || duringRecommendations.length > 0 || afterRecommendations.length > 0">
<h2>{{title}}</h2>
<h3>Before Updating</h3>
<div *ngFor="let r of beforeRecommendations">
<mat-checkbox></mat-checkbox>
<div style="margin-left:30px;" [innerHTML]="r.renderedStep"></div>
</div>
<div *ngIf="beforeRecommendations.length <= 0">
<em>There aren't currently any changes needed before moving between these versions.</em>
</div>
<h3>During the Update</h3>
<div *ngFor="let r of duringRecommendations">
<mat-checkbox></mat-checkbox>
<div style="margin-left:30px;" [innerHTML]="r.renderedStep"></div>
</div>
<div *ngIf="duringRecommendations.length <= 0">
<em>There aren't currently any recommendations for moving between these versions.</em>
</div>
<h3>After the Update</h3>
<div *ngFor="let r of afterRecommendations">
<mat-checkbox></mat-checkbox>
<div style="margin-left:30px;" [innerHTML]="r.renderedStep"></div>
</div>
<div *ngIf="afterRecommendations.length <= 0">
<em>There aren't currently any changes needed after moving between these versions.</em>
</div>
</div>
</div>
You can’t perform that action at this time.