Probleme mit Angular | Gängige Strukturen und Herangehensweisen

[Rezzer]

Hallo zusammen,

ich nehme gerade an einer Umschulung teil, indem wir gerade das Modul Angular haben. Leider ist der Dozent total inkompetent und unterrichtet nicht, sondern hat uns nur das Angular Buch übergeben. Dieses sollen wir als Selbststudium sehen und das Projekt Book Monkey umsetzen, bzw. ist es einfach nur abtippen des Codes.
Mit dem Buch komme ich überhaupt nicht zurecht, obwohl ich durch mein abgebrochenes Studium schon in Java und C# programmieren kann und somit kein Problem mit der Programmierung allgemein habe. Es geht mir eher darum, die gängigen Methoden und Herangehensweisen zu verstehen. Ich habe mir schon verdammt viele gute englische YouTube Videos angeguckt, um HTML und CSS grundlegend zu erlernen. TypeScript ist für mich kein Problem. Sobald ich aber etwas umsetzen möchte, hakt es oft nach ein paar Minuten.
So möchte ich gerne eine Quiz App als bevorstehendes Projekt, welches benotet wird, erstellen.

Ich möchte gerne bei jeder Frage durch ein "Antwort prüfen" Button prüfen, ob alles korrekt beantwortet wurde und ein Absatz durch *ngIf anzeigen lassen. Nur kann ich die einzelnen Checkboxes nicht an die Komponente übertragen. Auch so bin ich mir unsicher, ob der Code sinnvoll aufgebaut ist, sowohl in HTML, CSS als auch TypeScript. Mein Hauptproblem ist im Moment das mit dem Element, wer aber Lust hast, kann mir gerne auch Tipps/Verbesserungsvorschläge zu der ganzen Struktur geben.

Spoiler: HTML Code:

[CODE lang="html" highlight="4,5"]<div class="card-container">
<h1>{{questions[questionCounter].question}}</h1>
<div *ngFor="let answers of questions[questionCounter].answers; let i = index">
<input id={{i}} class="checkbox" type="checkbox" (change)="check()"><div class="answer">{{answers[0]}}</div>
<!-- Wie übergebe ich den Wert jeder Checkbox an die Methode check()?-->
</div>
<div class="button-bar">
<button class="button back" (click)="chooseQuestion(0)">Zurück</button>
<button class="button check" (click)="checkAnswer()">Antwort prüfen</button>
<button class="button forward" (click)="chooseQuestion(1)">Weiter</button>
</div>
</div>[/CODE]

Spoiler: CSS Code:

.card-container {
    position: relative;
    background-color: royalblue;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
    min-height: 400px;
    box-shadow: 5px 5px 10px grey;
    border-radius: 10px;
}

h1 {
    padding-top: 5%;
    padding-bottom: 4%;
    text-align: center;
    text-decoration: underline 5px;
}

.checkbox {
    margin-left: 35%;
    margin-bottom: 2%;
    width: 25px;
    height: 25px;   
}

.answer {
    display: inline;
    margin-left: 2%;
    font-size: 1.5em;
}

.button-bar {
    position: relative;
    margin-top: 5%;
}

.button {
    position: absolute;
    color: white;
    border-radius: 15px;
    width: 75px;
    height: 50px;
    box-shadow: 1px 1px 5px black;
}

.back {
    background: red;
    left: 20px;
}

.check {
    background-color: black;
    left: 45%;
}

.forward {
    background: green;
    right: 20px;
}

Spoiler: TypeScript:

[CODE lang="javascript" highlight="40-43"]import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-quiz-card',
templateUrl: './quiz-card.component.html',
styleUrls: ['./quiz-card.component.css']
})
export class QuizCardComponent implements OnInit {

questionCounter: number = 0;
questionCorrect: boolean = false

questions = [
{
id: 1,
question: "Welches Jahr haben wir heute?",
answers: [["2020", false], ["2021", false], ["2022", true]]
},
{
id: 2,
question: "Welches ist der erste Tag in der Woche?",
answers: [["Montag", true], ["Dienstag", false], ["Sonntag", false]]
}
]

constructor() { }

ngOnInit(): void { }

chooseQuestion(val: 0 | 1): void {

if(val === 0 && this.questionCounter > 0) {
this.questionCounter--;
}
else if (val === 1 && this.questionCounter < this.questions.length-1) {
this.questionCounter++;
}
}

check(): void {
document.getElementById("0")?.getAttribute //hier kommt immer undefined

}

checkAnswer() {

}
}[/CODE]

Ich bedanke mich schonmal im Voraus und freue mich auf eure Hilfe 😀👍

 

[M.L.]

Generell gilt in Angular, dass es auch (nur) einen Weg zur Lösung gibt (im Ggs. zu z.B. Aurelia, Svelte, React,...). Weiterhin könnte die Nennung, welche Werkzeuge genutzt werden sollen (z.B. VS Code, TypeScript in welcher Version, Version des Angular-Framework), ganz nützlich sein.

 

[Rezzer]

Hi und vielen Dank für deine Antwort. Stimmt, das hätte ich schonmal alles angeben können.

Ich arbeite mit Visual Studio Code mit installierten Angular Language Service.
Angular CLI: 13.2.0
Node: 16.14.0
Package Manager: npm 8.3.1

 

[M.L.]

(offtopic) Am (zukünftigen) Beispiel "Standalone Components" i.V. mit Angular merkt man, wie schnell Vorgehensweisen veralten können ( Quelle: Newsletter von entwickler.de (17.02.22) )