...
Resultaat
figuur 3: resultaat vue
Angular
Het duurde even tot ik de beginnende kneepjes van angular in de hand had. Dit kwam wel vrij snel door de grote hoeveelheid documentatie die angular bied. Voor bijna elk component dat angular biedt zijn er 10 tal voorbeelden over hoe je het zou kunnen gebruiken. Hierdoor was het maken van het prototype zeer gemakkelijk en van zelf sprekend, enig wat iets lastig was, was het feit dat het maken van pagina's iets uitgebreider was dan met bijvoorbeeld vue.
| Code Block | ||||
|---|---|---|---|---|
| ||||
import { Component, OnInit } from '@angular/core';
import {FormControl} from "@angular/forms";
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
tabs = ['First', 'Second', 'Third'];
selected = new FormControl(0);
addTab(selectAfterAdding: boolean) {
this.tabs.push('New');
if (selectAfterAdding) {
this.selected.setValue(this.tabs.length - 1);
}
}
removeTab(index: number) {
this.tabs.splice(index, 1);
}
}
|
| Code Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<div>
<button mat-raised-button
class="example-add-tab-button"
(click)="addTab(selectAfterAdding.checked)">
Add new tab
</button>
<mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
</div>
<mat-tab-group mat-align-tabs="center">
<mat-tab label="First" style="height: 100%">
<div class="example-boundary">
<div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag>
<img src="https://lh3.googleusercontent.com/_eWd5RuZfGPlgVcNzsG4S352TTXbZVoHsJju1t2_jFattGC-JaLrRTe02L7tBfQacQ=w600-rwa" height="100%" width="100%">
</div>
</div>
</mat-tab>
<mat-tab label="Second" >Content 2</mat-tab>
<mat-tab label="Third" >Content 3</mat-tab>
</mat-tab-group> |
Resultaat
Hoe scoren de frameworks op de criteria
...