Angular Material page not completely rendering

I have an angular material app that is multi-paged. This is one of my components, but the issue applies to all. When I run the app, many of my elements are not rendering. Does anybody have something that could help? The elements below, such as the h2, do not render, and the buttons are completely unresponsive, resulting in a useless app. When I remove the 'opened' tag from the side nav, the content appears, but reloads do not work.

HTML

<router-outlet>

<mat-toolbar class="mat-header" >

<span>Study Buddy</span>
</mat-toolbar>
<mat-sidenav-container class="sidenav-main">
<mat-sidenav mode="side" opened class="sidenav-drawer">

<h1>
DRAWER
</h1>
</mat-sidenav>
<mat-sidenav-content>
<div class="flashcards">

<h2>Flashcards</h2>
<div class="tp-wrapper">
<div class="tp-box" (click)="toggleFlip()" [@flipState]="flip">
<div class="tp-box__side tp-box__front">{{front}}</div>
<div class="tp-box__side tp-box__back">{{back}}</div>

</div>
<div align="center">

<p>{{card_num}}</p>
<button mat-icon-button aria-label="Example icon button with a vertical three dot icon" (click)="flashcardBack()">
<mat-icon>arrow_back</mat-icon>
</button>
<button mat-icon-button aria-label="Example icon button with a open in new tab icon" (click)="flashcardNext()">
<mat-icon>arrow_forward</mat-icon>
</button>
</div>
</div>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</router-outlet>


CSS

.sidenav-main {

top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
background: #ADBBDA;
position: relative;
}

.sidenav-drawer {

background-color: #7a95d9;
border-radius: 0px !important;
}
.mat-header {

background-color: #8697C4;
}

.example-spacer {
flex: 1 1 auto;
}

.custom-prompt-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}

.custom-prompt {

white-space: pre-wrap;
}

.custom-prompt, .summariser, .question_and_answer{
margin: 10px;

}

.flashcards {
margin: 10px;
}

p {

font-family: "Roboto", serif;
font-weight: 400;
font-style: normal;
}


.tp-wrapper {
-webkit-perspective: 800px;
perspective: 800px;
}

.tp-box {

position: relative;
width: 400px;
height: 200px;
margin: 3rem auto;

-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform : transform 1s;
-ms-transform : transform 1s;
transform : transform 1s;

}
.tp-box__side {
width: 100%;
height: 100%;
position: absolute;

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

color: #000000;
text-align: center;

display: flex;
justify-content: center;
align-items: center;

/* line-height: 200px; */
/*font-size: 24px;*/
font-weight: 700;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;


}
.tp-box__front {
border-radius: 10px; /* Optional for rounded corners */

background: #8697C4;
-webkit-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform : rotateY(0deg);


}
.tp-box__back {
border-radius: 10px; /* Optional for rounded corners */

background: #7a95d9;
-webkit-transform : rotateY(-180deg);
-ms-transform : rotateY(-180deg);
transform : rotateY(-180deg);

}


TYPESCRIPT

import { Component, OnInit, Renderer2, ViewChild, ElementRef } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import { HttpSerivceService } from './http-service.service';
import { HttpClient } from '@angular/common/http';
import {MatCardModule} from '@angular/material/card';
import { trigger, state, style, transition, animate } from '@angular/animations';


@Component({
selector: 'app-root',
standalone: true,
imports: [
RouterOutlet,
MatSidenavModule,
MatToolbarModule,
MatIconModule,
MatFormFieldModule,
MatInputModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule

],
templateUrl: './flashcards.component.html',
styleUrl: './flashcards.component.css',
animations: [
trigger('flipState', [
state('active', style({
transform: 'rotateY(179deg)'
})),
state('inactive', style({
transform: 'rotateY(0)'
})),
transition('active => inactive', animate('500ms ease-out')),
transition('inactive => active', animate('500ms ease-in'))
])
]
})

export class flashcards implements OnInit{

//Base functions
title = 'study-buddy';
customPromptForm = new FormGroup({
customPrompt: new FormControl(''),
});
constructor(private http: HttpClient, private renderer: Renderer2) { }

ngOnInit() {

this.getFlashcards() // Run the flashcard function on page load
}

URL: any = 'http://127.0.0.1:8000'

//Flaschard Functions
flip: string = 'inactive';
front: any = "Click next to start";
back: any = "Click next to start";

flashcards: any;
curr_card: any; // Starts at 0
total_card: any; // Starts at 1 and counts up
card_num: any; // To display on the frontend
toggleFlip() {
this.flip = (this.flip == 'inactive') ? 'active' : 'inactive';
}

updateCardStatus(): void {

this.front = this.flashcards[this.curr_card]['Front']
this.back = this.flashcards[this.curr_card]['Back']
}

getFlashcards(): void {
this.http.get(this.URL + "/get_flashcards").subscribe((res: any) => {

this.flashcards = res;
this.total_card = this.flashcards.length;
console.log(this.total_card, this.flashcards)
this.curr_card = 0;
this.front = this.flashcards[this.curr_card]['Front']
this.back = this.flashcards[this.curr_card]['Back']
})
}

flashcardBack(): void {

if (this.curr_card != 0) {

this.curr_card -= 1
this.updateCardStatus()

}
}

flashcardNext(): void {
console.log(this.curr_card, this.total_card
)
if (this.curr_card < this.total_card - 1 ) {

this.curr_card += 1
this.updateCardStatus()
}
}


}```

Continue reading...